CSS熱門知識點總結

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> CSS熱門知識點總結

CSS熱門知識點總結

編輯：CSS特效代碼

1.清除浮動

老生常談的話題，面試經常問的問題
解決方法有很多種，這裡講幾種

1.1 子元素加clear

<div class="news">
    <p>Some Text</p>
    <br class="clear">
</div>

.news{
    background: gray;
    border: solid 1px black;
}
.news p{
    float: right;
}
.clear{
    clear: both;
}

這種方法可以擴展出很多種不同的方法，如JS動態添加，設置一個公共的類然後添加，或者直接就是一段內聯style的html代碼，但是原理都是用到了clear這個屬性

1.2 父元素BFC化

HTML文檔流是盒子模型的，BFC就是組織盒子模型的形式，當元素的類型如標簽(p和span)不一樣的時候，其表現出來的樣子是不一樣的。
所以BFC就是讓這個元素看起來像盒子的一種代稱，BFC全稱 Box Formatting Context。CSS2.1還有IFC,即Inline Formatting Context。

BFC布局規則：

內部的Box會在垂直方向，一個接一個地放置
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此
BFC的區域不會與float box重疊
BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此
計算BFC的高度時，浮動元素也參與計算

產生BFC的條件：當然普通的塊級元素默認呈現塊級的樣子，但是通過CSS我們可以可以讓某些元素呈現BFC的形態（塊級形態）

根元素(html元素)
float不為none的元素(包括left,right,inherit三個，因為float只有四個值)
position為absolute或fixed
display為inline-block,table-cell,table-caption,flex,inline-flex
overflow不為visible(包括hidden,scroll,auto,inherit四個值)

如下面的為在父元素加float屬性使其BFC化

<div class="news">
    <p>Some Text</p>
    <br class="clear">
</div>

.news{
    background: gray;
    border: solid 1px black;
}
.news p{
    float: right;
}
.clear{
    clear: both;
}

2.透明度

2.1 opacity

熟悉CSS3的應該很清楚，不就是opacity嘛。但是在那個沒有支持opacity的年代又是怎麼做的呢。

opacity屬性設置元素的不透明級別。不會被繼承，值為0.0(完全透明)到1.0(完全不透明)。
不會繼承父元素的屬性，但是可以設置inherit來繼承父元素的值

p{
    opacity: 0.5;
    filter: alpha(opacity=50); /*IE*/
    color: #000;
}

2.2 RGBA

RGB擴展透明度的一種格式，a代表alpha透明度。

p{
    background-color: rgba(0,0,0,0.8);
    color: #fff;
}

2.3 PNG圖片的問題

png圖片的最大優勢是支持alpha透明度，但是IE6不直接支持PNG透明度，PNG透明度自IE7才支持。
好的是現在已經逐漸淘汰了IE6，

3.擁有布局的問題

默認擁有布局的元素：

body/html
table/tr/td
img
hr
input/select/textarea/button
iframe/embed/object/applet/marquee

所以其實div和span是沒有布局的。

設置以下CSS屬性會讓元素獲得布局。

float: left/right
display: inline-block
width/height
zoom: 任何值（只有IE）

IE7中以下屬性也觸發布局(下面三個屬性只有IE7+才支持)

overflow: hidden/scroll/auto
min-width: 任何值
max-width: 除none之外的任何值

4.條件注釋

lt <
lte <=
gt >
gte >=

條件注釋寫法如下，這裡的是XHTML寫法，所以後面會以/>結尾，HTML5寫法最好是沒有反斜槓

<!-- [if IE 6]>
    <link rel="stylesheet" type="text/css" href="/css/ie6.css" />
<![endif]-->

<!-- [if !IE 6]>
    <link rel="stylesheet" type="text/css" href="/css/ie6.css" />
<![endif]-->

<!-- [if gte IE 6]>
    <link rel="stylesheet" type="text/css" href="/css/ie6.css" />
<![endif]-->

5.IE常見的BUG及其解決方法

下面這些BUG都是很有代表性的，在我做的項目中下面的bug基本都遇到了。-_-!!這運氣真不是一般好。
當然現在說起IE6兼容很多人可能會嗤之以鼻，但是我覺得在天朝大國這個連學校都在用著XP的地方，身為一名合格的前端，IE6兼容必須要過關。

5.1 雙外邊距浮動BUG

在元素有外邊距且浮動的時候

div.someone{
    float: left;
    margin-left: 20px;
}

解決方法
對float的元素設置display:inline

div.someone{
    float: left;
    margin-left: 20px;
    display: inline;
}

5.2 3像素文本偏移bug

當文本與一個浮動元素相鄰時這個bug有可能出現

div.myFloat{
    float: left;
    width:200px;
}
p{
    margin-left:200px;
}

解決方法(IE6以上)

p{
    height: 1%; /*擁有布局*/
    margin-left: 0;
}
.myFloat{
    margin-left: -3px; /*重要的一句，等於左邊的浮動元素的寬度縮小了3px*/
}

5.3 IE6的重復字符bug

當一系列浮動元素排列在一排，如果最後的元素重復出現則是這個bug。
ps：通常是代碼有添加注釋的情況

解決方法

運用負外邊距
清除注釋

5.4 IE6的“躲貓貓”bug

當一個浮動元素後面跟著一些非浮動元素，然後是一個清理元素，所有這些元素包含在一個設置了背景顏色或圖像的父元素中。如果清理元素碰到了浮動元素，那麼中間的非浮動元素看起來像消失了，只有在刷新頁面的時候才出現。