界面布局

1.企業(yè)開發(fā)中什么時候使用標(biāo)準(zhǔn)流什么時候使用浮動流？
垂直方向使用標(biāo)準(zhǔn)流，水平方向使用浮動流。
2.拿到一個很復(fù)雜的界面如何入手？
從上至下布局、從外到內(nèi)布局、水平方向可以先劃分為一左一右再對左邊或者右邊進(jìn)行進(jìn)一步的布局。
3.在標(biāo)準(zhǔn)流中內(nèi)容的高度可以撐起父元素的高度，但是在浮動流中浮動的元素是不可以撐起父元素的高度的。

清除浮動的方式

1. 清除浮動方式一：給前面一個父元素設(shè)置高度。

1.1）注意點(diǎn)：在企業(yè)開發(fā)中，我們能不寫高度就不寫高度，所以這種方式用得很少。

2. 清除浮動的第二種方式：給后面的盒子添加clear屬性。

2.1）clear屬性取值:
none: 默認(rèn)取值, 按照浮動元素的排序規(guī)則來排序(左浮動找左浮動, 右浮動找右浮動)
left: 不要找前面的左浮動元素
right: 不要找前面的右浮動元素
both: 不要找前面的左浮動元素和右浮動元素
2.2）注意點(diǎn):
當(dāng)我們給某個元素添加clear屬性之后, 那么這個屬性的margin屬性就會失效。

3. 清除浮動的第三種方式：隔墻法

3.1）外墻法
3.1.1）在兩個盒子中間添加一個額外的塊級元素
3.1.2）給這個額外添加的塊級元素設(shè)置clear: both;屬性
3.1.3）注意點(diǎn):
外墻法它可以讓第二個盒子使用margin-top屬性，外墻法不可以讓第一個盒子使用margin-bottom屬性。
3.1.4）通過給額外盒子設(shè)置height高度來實(shí)現(xiàn)margin的效果。


3.2）內(nèi)墻法
3.2.1）在第一個盒子中所有子元素最后添加一個額外的塊級元素
3.2.2）給這個額外添加的塊級元素設(shè)置clear: both;屬性
3.2.3）注意點(diǎn):
內(nèi)墻法它可以讓第二個盒子使用margin-top屬性
內(nèi)墻法它可以讓第一個盒子使用margin-bottom屬性。
3.3）外墻法和內(nèi)墻法區(qū)別?
外墻法不能撐起第一個盒子的高度, 而內(nèi)墻法可以撐起第一個盒子的高度。
3.4）在企業(yè)開發(fā)中不常用隔墻法來清除浮動。

4.清除浮動的第四種方式

4.1）利用偽元素選擇器清除浮動。本質(zhì)上就是內(nèi)墻法, 只不過是直接通過CSS代碼添加了內(nèi)墻, 其它特性和內(nèi)墻法都一樣
4.2）注意點(diǎn):
IE6中不支持這種方式, 為了兼容IE6必須給前面的盒子添加*zoom:1;屬性

5.清除浮動的第五種方式

5.1）overflow: hidden;作用
5.1.1）可以將超出標(biāo)簽范圍的內(nèi)容裁剪掉
5.1.2）清除浮動

5.1.3）可以通過overflow: hidden;讓里面的盒子設(shè)置margin-top之后, 外面的盒子不被頂下來

偽元素選擇器

1.什么是偽元素選擇器?
偽元素選擇器作用就是給指定標(biāo)簽的內(nèi)容前面添加一個子元素或者給指定標(biāo)簽的內(nèi)容后面添加一個子元素
2.格式:
2.1）給指定標(biāo)簽的內(nèi)容前面添加一個子元素
標(biāo)簽名稱::before{
屬性名稱:值;
}
2.2）給指定標(biāo)簽的內(nèi)容后面添加一個子元素
標(biāo)簽名稱::after{
屬性名稱:值;
}