DIV CSS 佈局教程網

前幾天被朋友問到幾個CSS問題，講道理麼，接觸CSS是從大一開始的，也算有3年半了，總是覺得自己對css算是熟悉的了。然而還是被幾個問題弄的"一臉懵逼"... 然後又是剛入職新公司，事情不算多，於是拿起《CSS權威指南》進行"基礎學習"+"查漏補缺"，本篇文章主要是總結了些自己認為CSS中值的注意的幾個知識點(本文知識點僅限本書范圍內，若要講CSS全部樣式，那本獸還是選擇慢慢懵逼去~)。

選擇器

這裡要說明的是類選擇器的嵌套選擇與多類選擇器的差別，順便捎上了一級子元素的選擇

類選擇器基本寫法：

.your-class{/*...*/}

類選擇器的嵌套選擇寫法：

.first-class .second-class{/*...*/}

多類選擇器基本寫法：

.first-class.second-class{/*...*/}

一級子元素的選擇寫法：

.first-class > .second-class{/*...*/}

從代碼看它們之間的區別：

<style>
    .first-style.second-style{ color: blueviolet}
    .first-style .third-style{ font-style: italic}
    .first-style > .fourth-style{ font-weight: bold}
</style>    
<div class="first-style second-style">HELLO</div>
<div class="first-style third-style">hello</div>
<div class="first-style"><div class="second-style">HELLO</div></div>
<div class="first-style"><div class="third-style">hello</div></div>
<div class="first-style"><div><div class="third-style">Hello World</div></div></div>
<div class="first-style"><div class="fourth-style">Hello World</div></div>
<div class="first-style"><div><div class="fourth-style">Hello World</div></div></div>

得出結論：

· 類選擇器的嵌套選擇，選擇的是first-style類下的所有包含second-style類的子元素(不論幾級子元素)

· 一級子元素的選擇，選擇的是first-style下的一級子元素中包含second-style類的元素，再往裡層嵌套的元素不算

· 多類選擇器的選擇，選擇同時包含first-style和second-style類的元素

樣式優先級

樣式的優先級由選擇器本身的組件確定，我們將優先值表述為4個部分，如：0.0.0.0

注意：前一部分的優先級大於後一部分的優先級，請無視他們的值之間的大小。如：0.0.1.0 大於 0.0.0.12，規則以此類推。

選擇器的具體優先級如下：

· 對於選擇器中給定的各個ID屬性值，加 0.1.0.0;

· 對於選擇器中給定的各個類屬性值、屬性選擇或偽類，加 0.0.1.0;

· 對於選擇器中給定的各個元素和偽元素，加 0.0.0.1;

· 結合符和通配符選擇對優先級沒有任何貢獻。

用代碼說明優先級：

div{ color: black} /* 0.0.0.1 */
div p{ color:black} /* 0.0.0.2 */
.my-div{ color:black} /* 0.0.1.0 */
div.my-div{ color: black} /* 0.0.1.1 */
.my-div .my-p{ color: black} /* 0.0.2.0 */
.my-div p.my-p{ color: black} /* 0.0.2.1 */
div.my-div p.my-p{ color: black} /* 0.0.2.2 */
/*
... 以此類推
*/
#div-id{ color: black} /*0.1.0.0 */
/*
... 繼續類推
*/

那麼有人會注意到，在0.0.0.0的4個部分中，第一個始終沒使用到。它是怎麼用的呢？

一般來說，第一個0是為內聯樣式聲明保留的，它比其他聲明的特殊性都高。
如：

<div style="/*...*/"></div> <!--1.0.0.0 - ->

本節還存在"!important"問題

"!important"放在樣式聲明之後，即分號之前。並且它沒有特殊的優先級值。那麼它的優先如何處理呢？看以下代碼：

<style>
　　.impt{color: black !important}
</style>
<div class="impt" style="color:red">hello world</div>

得出結論：
"!important"聲明的重要性超出了所有其他聲明。

CSS正常流及元素

正常流

這裡指西方語言文本從左向右、從上向下顯示，也是我們熟悉的傳統HTML文檔的文本布局。要讓一個元素不在正常流中，唯一的方法就是使之成為浮動/定位元素。

非替換元素

如果元素內容包含在文檔中，則稱之為非替換元素。如：<p></p>

替換元素

指用作為其他內容占位符的一個元素。如：<img />、<input />

塊級元素

在正常流中，會在其框之前或之後生成"換行"，通過聲明"display:block"可以讓元素生成塊級框。

行內元素

這些元素不會在之前或之後生成"行分隔符"，它們是塊級元素的後代，通過"display:inline"可以讓元素生成一個行內框。

margin 外邊距

1.外邊距垂直合並

垂直相鄰的外邊距會進行合並。兩個外邊距中較小的一個會被較大的一個合並(你也可以理解為"重疊")。

具體效果看例子：

<style>
    .first-div{ margin-bottom:50px;}
    .second-div{ margin-top:20px;}
</style>
<div class="first-div">this is div-1</div>
<div class="second-div">this is div-2</div>

2.margin樣式順序

.your-class{ margin:<top> <right> <bottom> <left> }

順序可以這樣記：從12點鐘開始，順時針一圈。

縮寫規則：

· 如果缺少左外邊距的值，則使用右外邊距的值

· 如果缺少下外邊距的值，則使用上外邊距的值

· 如果缺少右外邊距的值，則使用上外邊距的值

縮寫代碼：

.first-margin{ margin: 50px;} /* 50px 50px 50px 50px */
.second-margin{ margin: 50px 20px ;} /* 50px 20px 50px 20px */
.third-margin{ margin: 50px 30px 10px;} /* 50px 30px 10px 30px */

3.margin應用於行內元素的效果

當margin應用於行內元素，則對水平面有影響，對垂直面無任何影響。

效果代碼：

<style>
　　.mar-strong{ margin:20px 0}
</style>
<div>
<strong class="mar-strong">hello world</strong> 

既然這裡提到margin與行內元素之間的關系，我們也順便看下padding與行內元素的關系吧。

當padding應用於行內元素，則對水平面有影響，對垂直面無影響(在沒有設置background的情況下)。

看例子：

<style>
　　.mar-strong{ padding:20px 0px; background: red}
</style>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<strong class="mar-strong">hello world</strong>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>

以上例子可以去掉padding或者background看看布局上有什麼影響來驗證。請慎重處理這三者之間的關系哦。

background-attachment

這裡稍微提下這個屬性。

background: scroll || fixed || inherit

初始值：scroll

看效果代碼：

<style>
　　.div-bg{ width: 100%; height: 3000px;}
　　.bg-attachment{ background-image: url(img/1.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center}
</style>
<div class="div-bg bg-attachment"></div>

從上面例子可以看到，當滾動頁面的時候，背景圖始終居中跟隨滾動。

浮動與清除

元素浮動

· CSS允許所有元素浮動

· 浮動元素周圍外邊距不會合並

<style>
    .div-float{float: left;margin: 50px}
</style>
<div class="div-float">HELLO WORLD</div>
<div  class="div-float">hello world</div>

· 浮動元素會生成一個塊級框，不論這個元素本身是什麼。

<style>
    .span{ margin: 50px}
    .span-float{ float: left;}    
</style>
<span class="span span-float">HELLO WORLD</span>
<span class="span span-float">hello world</span>

清除浮動

清除浮動可由clear屬性完成。

clear: left || right || both || none || inherit

初始值: none

這裡我們主要說明下left、right和both。分別是清除左邊浮動元素(左邊不讓你浮動)、清除右邊浮動元素(右邊不讓你浮動)和清除左右兩邊的浮動(兩邊都不讓存在浮動元素)。

<style>
    .div-mar{ width: 100px;padding: 50px}
    .div-red{ background: red}
    .div-yellow{ background: yellow}

    .div-float-left{ float: left}
    .div-float-right{ float: right}

    .div-clear-both{ clear: both}
    .div-clear-left{ clear: left}
    .div-clear-right{ clear: right}
</style>
<div class="div-mar div-red div-float-left">HELLO WORLD</div>
<div class="div-mar div-yellow div-float-left div-clear-right">Hello World</div>

可以對以上[class*="div-red"]元素進行左右浮動，再用[class*="div-yellow"]元素進行清除浮動。

元素定位

元素的定位可以通過使用position屬性。

positon: static || relative || absolute || fixed || inherit

初始值： static

static(靜態/正常定位)

正常生成元素框。

relative(相對定位)

元素偏移某個距離，元素仍保持其未定位之前的形狀。

absolute(絕對定位)

元素從文檔流完全刪除，並相對其包含塊定位。

fixed(固定定位)

元素框的表現類似於absolute，不過其包含塊是視窗本身。

元素relative/absolute/fixed定位的同時，會為其後代元素建立一個包含塊。

什麼是包含塊？

在HTML中，根元素就是html元素。

· "根元素"的包含塊由用戶代理建立

· 對於一個非根元素，如果其position值為relative或static，則包含塊由最近的塊級框、表單元格或行內塊祖先框的內容邊界構成

· 對於一個非根元素，如果其position值為absolute，包含塊設置為最近的position值不是static的祖先元素

"visibility:hidden"與"display:none"的區別

當我們設置一個元素visibility為hidden的時候，元素處於不可見狀態，但元素仍然會影響到文檔的布局(元素仍存在，只是看不見)。

當我們設置一個元素display為none的時候，元素不顯示，並從文檔流中刪除(元素不存在，可用於渲染優化)。 

"content" 生成內容

使用content屬性插入內容或屬性值。

<style>
    .div-content:before{ content: "[ "attr(value)" ] "}
    .div-content:after{content:" hello world"}
</style>
<div class="div-content" value="H">ello World</div>

附上在寫的時候突然想到的一個問題

在不同元素內的子元素使用z-index的時候受不受父(祖先)元素之間關系的影響？

<style>
    .div-out{width: 400px; height: 200px; background: black;border-bottom: 1px solid white; position: relative;}
    .div-index-1{ width: 200px; height: 100px; background: red; position: absolute; bottom: -50px; z-index: 1}
    .div-index-2{ width: 200px; height: 100px; background: yellow; position: absolute; top: -50px; left: 20px; z-index: 1}
</style>    
    <div class="div-out">
    <div class="div-index-1"></div>    
</div>
    <div class="div-out">
    <div class="div-index-2"></div>
</div>

得出結論：不受影響。

新手文章，有問題可交流討論，不喜勿噴~~~ 覺得本文還行的就小手點個贊給個鼓勵吧~