接上篇ccs之經典布局（二）（兩欄，三欄布局）
七、等分布局
等分布局是指一行被分為若干列，每一列的寬度是相同的值。兩列之間有若干的距離。
1、float+padding+background-clip
使用float讓元素在一行內顯示，使用padding來實現元素之間的距離，使用background-clip使元素padding部分不顯示背景。
2、float+margin+calc
使用calc()函數來計算元素的寬度，使用margin實現元素之間的間距
3、還可以增加結構來實現兼容，不推薦
4、table
元素被設置為table后，內容撐開寬度，兼容性的問題。還有table-cell元素無法設置margin,padding.
5、flex+~選擇器 很好用，就是有兼容性的問題，多用於移動端布局
6、grid 很好用，就是有兼容性的問題，多用於移動端布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>等分布局</title> <style> * { margin: 0; padding: 0; } body{ overflow: hidden; } .container { /* margin-left: -20px; 第1種方法 overflow: hidden; border: 1px solid greenyellow; */ /* overflow: hidden; 第2種方法 margin-right: -20px; border: 1px solid greenyellow; */ /* display: flex; 第5種方法 */ /* display: grid; 第6種方法 grid-template-columns: repeat(4,1fr); grid-gap: 20px; */ } .container div { height: 300px; /* float: left; 第1種方法 width: 25%; padding-left: 20px; box-sizing: border-box; background-clip: content-box; */ /* float: left; 第2種方法 width: calc(25% - 20px); 記得空格 margin-right: 20px; */ /* flex:1; 第5種方法 */ } /* .div1 ~ div{ 第5種方法 margin-left: 20px; } */ .div1 { background: greenyellow; } .div2 { background: palevioletred; } .div3 { background: orange; } .div4 { background: blueviolet; } </style> </head> <body> <div class="container"> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div3">div3</div> <div class="div4">div4</div> </div> </body> </html>
八、等高布局
1、display:table-cell
table布局天然就具有等高的特點，display設置為table-cell此元素會作為一個表格單元格來顯示，類似於<td>.
2、flex 彈性盒子布局，默認值就是自帶等高布局的特點。(flex-direction和align-item)
3、padding與margin相互抵消
它是假等高，設置父容器的overflow屬性為hidden,給每列設置比較大的底內邊距，然后用數值相似的負外邊距消除這個高度（用到的點有：background會填充padding,不會填充margin,margin有坍塌性，可以設置成負值。overflow：hidden;讓容器產生BFC，清浮動。同時截取內容適應填充框，將超出的部分隱藏）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>等高布局</title>
<style> *{ margin: 0; padding:0;
font-size: 12px;
} .container{
/* display: table; 第1種方法 */
/* display:flex; 第2種方法 */ overflow: hidden;
} .left,.right{ width: 200px;
/* display:table-cell; 第1種方法 */
/* padding-bottom: 999em; 第3種方法 margin-bottom: -999em; float: left; */
} .left{ background: greenyellow;
} .right{ background: palevioletred;
}
</style>
</head>
<body>
<div class="container">
<div class="left">測試文字</div>
<div class="right"> 咱們應當在一起，否則就太傷天害理啦。 你好哇，李銀河。請你不要吃我，我給你唱一支好聽的歌！一想到你，我這張丑臉上就泛起微笑</div>
</div>
</body>
</html>
九、全屏布局
全屏布局指的就是HTML頁面鋪滿整個瀏覽器窗口，且沒有滾動條，可以跟隨瀏覽器大小的變化而變化。它在實際的工作中經常用到，下面展示幾種方式進行全屏布局的實現。
1、float+clac()這一種方法
2、position+overflow來實現
3、inline-block+calc來實現
4、用absolute來實現
html:
<div class="parent">
<div class="top">top</div>
<div class="container">
<div class="left">left</div>
<div class="right">
<div class="inner">right</div>
</div>
</div>
<div class="footer">footer</div>
</div>
css1:
<style> *{ margin:0; padding:0;
} html,body,.parent{ height: 100%;
} .top,.footer{ height: 50px; background: grey;
} .container{ overflow: hidden; height: calc(100% - 100px); background: papayawhip;
} .left{ width: 100px; float: left; height: 100%; background: palevioletred;
} .right{ overflow: auto; height: 100%; background: greenyellow;
} .inner{ height: 10000px;
}
</style>
css2:
<style> *{ margin:0; padding:0;
} .top,.footer{ height: 50px; position: fixed;
/* 有position寬度就不能自適應等於所有后代元素的和，自適應的原因是因為下面的left和right的設置 */ left: 0; right: 0; background: rgb(161, 158, 158);
} .top{ top:0;
} .footer{ bottom: 0;
} .container{
/* height: 100%; */ background: papayawhip; position: fixed; left:0; right: 0; top:50px; bottom:50px; overflow: auto;
} .left{ width: 100px; background: palevioletred; height: 100%; position: fixed; left: 0; top:50px; bottom: 50px;
} .right{
/* height: 1oo%; */ height: 1000px; background: greenyellow; margin-left: 100px;
}
</style>
css3:
<style> * { padding: 0; margin: 0;
} body, html,.parent { height: 100%;
} .top, .footer { height: 50px; background: gray;
} .container { height: calc(100% - 100px); background: orange; font-size: 0;
} .left, .right { display: inline-block; vertical-align: top; font-size: 16px;
} .left { width: 100px; height: 100%; background: palevioletred;
} .right { width: calc(100% - 100px); height: 100%; overflow: auto; background: greenyellow;
} .inner { height: 1000px;
}
</style>
css4:
<style> * { padding: 0; margin: 0;
} body, html,.parent { height: 100%;
} .top,.footer,.container{ position: absolute; left: 0; right: 0;
} .top,.footer{ height: 50px; background: gray;
} .top{ top:0;
} .footer{ bottom: 0;
} .container{ top:50px; bottom:50px; background: orange;
} .left,.right{ position: absolute; top: 0; bottom: 0;
} .left{ width: 100px; background: palevioletred;
} .right{ left: 100px; right: 0; overflow: auto; background: greenyellow;
} .inner{ height: 1000px;
}
</style>
5、可以通過增加結構來提高兼容性利用float+absolute
html:
<div class="parent">
<div class="top">top</div>
<div class="content">
<div class="container">
<div class="left">left</div>
<div class="right">
<div class="inner">right</div>
</div>
</div>
</div>
<div class="footer">footer</div>
</div>
css:
<style> *{ margin:0; padding:0;
} html,body,.parent{ height: 100%;
} .top,.footer{ position: absolute; height: 50px; left: 0; right: 0; background: grey;
} .top{ top:0;
} .footer{ bottom: 0;
} .content{ height: 100%; overflow: hidden; background: blue;
} .container{ overflow: hidden; height: 100%; margin:50px 0; background: orange;
} .left{ width: 100px; float: left; height: 100%; background: palevioletred;
} .right{ overflow: auto; height: 100%; background: greenyellow;
} .inner{ height: 1000px;
}
</style>
