1左右布局
以下是html部分扛芽，一個(gè)父元素，兩個(gè)子元素捞慌，要將子元素左右兩欄布局淤堵。
<div class="parent clearfix">
?????? <div class="left">111</div>
????? <div class="right">22</div>
</div>
最常見的方法是在css里設(shè)置浮動(dòng)寝衫，在html里父元素加上clearfix 類清除浮動(dòng)，css代碼如下
.clearfix::after{
? ? content: '';
? ? display: block;
? ? clear: both;
}
.left,right{
?float: left;
設(shè)置position絕對(duì)定位拐邪，為父元素設(shè)置position: relative; 為子元素設(shè)置position: absolute; css代碼如下
.parent{
position: relative;
}
.left{
position: absolute;
left: 0;
top: 0;
}
.right{
position: absolute;
left: 0;
top: 0;
}
2.左中右布局
左中右布局主要方法也是浮動(dòng)或者絕對(duì)定位慰毅，不過可以分情況選擇其一使用甚至結(jié)合使用。
特定情況下使用浮動(dòng)還是絕對(duì)定位
使用浮動(dòng)時(shí)：不需要計(jì)算特別精確的位置扎阶，不過不易操控汹胃，浮動(dòng)元素的寬度需要注意，是根據(jù)其內(nèi)容決定的东臀，否則會(huì)換行展示着饥，適用于導(dǎo)航欄等地方。
使用絕對(duì)定位：需要計(jì)算元素的具體位置惰赋，不過更加準(zhǔn)確宰掉，易于操控。
當(dāng)某些元素的位置要根據(jù)父元素的大小自適應(yīng)赁濒，內(nèi)容寬度無法確定時(shí)轨奄，建議使用浮動(dòng)。
3.水平居中
(1)通過margin: 0 auto; text-align: center實(shí)現(xiàn)CSS水平居中拒炎。父元素必須指定寬高挪拟。
?? 此居中的方法前提為居中塊級(jí)元素寬度必須固定才可設(shè)置auto自動(dòng)計(jì)算左右補(bǔ)白
(2)通過display:flex實(shí)現(xiàn)CSS水平居中。
(3)通過position:absolute實(shí)現(xiàn)CSS水平居中击你。
通過設(shè)置子元素為絕對(duì)定位元素還有l(wèi)eft和margin-left的值可以達(dá)到居中效果使設(shè)置
(4)通過display:inline-block和text-align:center實(shí)現(xiàn)CSS水平居中玉组。
text-align? 屬性規(guī)定元素中的文本的水平對(duì)齊方式。display:inline-block設(shè)置塊級(jí)元素為行內(nèi)塊級(jí)元素時(shí)便可實(shí)現(xiàn)水平居中
4.其他小技巧
?利用：before偽類垂直居中的問題
:nth-child() 偽類選擇器?
讓你匹配到父元素的任一子元素
nth-child(odd)父元素下的奇數(shù)子元素丁侄，等同于nth-child(2n-1)
nth-child(even)父元素下的偶數(shù)子元素 同樣區(qū)分子元素類型 ? 等同于nth-child(2n)
