CSS進(jìn)階指南

SolomonXie 發(fā)布于2019-08-29 14:18 / 1828人閱讀

摘要：二正文脫離文檔流脫離文檔流的元素都是塊級元素。參考資料什么是文檔流指語言文本從左到右，從上到下顯示，這是傳統(tǒng)文檔的文本布局。定位不脫離文檔流，設(shè)置沒有作用，對敏感。允許指定負(fù)的外邊距值。

一前言

要想掌握CSS部分的內(nèi)容其實(shí)并不容易，盡管你已經(jīng)閱讀過相當(dāng)多的關(guān)于CSS的書籍，但是還是免不了去網(wǎng)上搜索相關(guān)的知識擴(kuò)大你對CSS內(nèi)容的掌握。在網(wǎng)絡(luò)上查找最好的地方當(dāng)然是CSS官網(wǎng)文檔，不過英文版的官方文檔將很大一部分人拒之門外，而中文版的博客上五花八門的只是零散又不權(quán)威，很容易將人帶入歧途，浪費(fèi)時(shí)間。筆者寫這篇文章，摘錄博客上總結(jié)的CSS知識，同時(shí)參考CSS官方文檔，盡力保證其正確性。希望能節(jié)省開發(fā)者查閱的時(shí)間，提高效率。如有錯誤的地方，還請大家指出～一起學(xué)習(xí)，共同進(jìn)步。

二正文 1.DOM脫離文檔流

脫離文檔流的元素都是塊級元素。
參考資料：
【1】https://www.cnblogs.com/chuaW...
（1）什么是文檔流
指語言文本從左到右，從上到下顯示，這是傳統(tǒng)HTML文檔的文本布局。
脫離文檔流即是元素打亂了這個(gè)排列，或是從排版中拿走。

（2）什么情況下會脫離文檔流
浮動(float)、絕對定位(absolute)、固定定位(fixed)三種方式定位會脫離文檔流。

(3)浮動
浮動元素會脫離文檔流并向左/向右浮動，直到碰到父元素或者另一個(gè)浮動元素。
float 屬性定義元素在哪個(gè)方向浮動。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個(gè)塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定一個(gè)明確的寬度；否則，它們會盡可能地窄。
浮動元素脫離文檔流：
1.沒有實(shí)際高度,浮動會導(dǎo)致父元素高度坍塌
2.位置屬性（left/top/right/bottom）是沒有用的
需要注意：
浮動有點(diǎn)像玩俄羅斯方塊。向左浮動，方塊從右往左滑過來，如果某一行空間不夠（基于父容器的寬度），那么這個(gè)塊會沿著最右邊的塊的下邊沿水平劃過來，最后看卡到哪里就停止。

left4在第一行l(wèi)eft3后面寬度不夠，換行成第二行。在left2后面寬度不夠，只能在left1后面。right1自然是從第二行開始查找位置，很幸運(yùn)第二行現(xiàn)在唯一的元素#left4右面空間足夠，放置即可。right2在第二行中沒有足夠的位置，換行成第三行，找到空余位置插入。

（4）定位
關(guān)于定位的詳細(xì)講解請看這里：https://segmentfault.com/a/11...

//css中給元素設(shè)置position屬性
el{
    position: absolute | fixed | relative | static | inherit
}

詳解：

position的值為absolute、fixed的元素脫離文檔流，static、relative沒有脫離文檔流。

 1.static定位不脫離文檔流，設(shè)置left/top/right/bottom沒有作用，對margin/padding敏感。
 2.對于外邊距margin:塊級元素的垂直相鄰?fù)膺吘鄷喜?
   而行內(nèi)元素實(shí)際上不占上下外邊距。行內(nèi)元素的的左右外邊距不會合并；
 3.浮動元素的外邊距也不會合并。允許指定負(fù)的外邊距值。(這里可以參考BFC部分)

對于浮動與定位的位置優(yōu)先級：
　　

(fixed == absolute) > float > relative > static。理解為同時(shí)設(shè)置了position:absolute和float:right。忽略float:right。

堆疊優(yōu)先級：

定位元素z-index>=0時(shí)為(fixed == absolute == relative)  > static，z-index < 0時(shí)(fixed == absolute == relative)  < static。理解為兄弟元素一個(gè)設(shè)置了position：relative,另一個(gè)設(shè)置了position:static，當(dāng)relative元素z-index為>=0時(shí)，無論static元素設(shè)置多少都在relative下面。如果relative設(shè)置z-index<0,則論static取什么值relative都會在static下面。

　　定位元素z-index>=0時(shí)(fixed == absolute == relative)  > float，z-index < 0時(shí)(fixed == absolute == relative)  < float。理解為兄弟元素一個(gè)設(shè)置了position：relative,另一個(gè)設(shè)置了float:left，當(dāng)relative元素z-index為>=0時(shí)，無論float元素設(shè)置多少都在relative下面。如果relative設(shè)置z-index<0,則無論float的z-index設(shè)置多少relative都會在float下面。

　　float > static始終成立。因?yàn)閦-index只有在定位元素上才起作用，定位元素包括fixed、absolute、relative。

　　fixed == absolute == relative，比較堆疊順序直接比較z-index大小即可。

2.垂直邊距合并

參考資料：http://www.w3school.com.cn/cs...
當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

2.什么情況下會發(fā)垂直邊距合并？
1）只針對塊級元素
2）正常文檔流

注意：合并行為只適用于外邊距，如果元素有內(nèi)邊距和邊框，它們絕對不會合并。

情況1:同一層級垂直方向上盒子的相遇

請注意，兩個(gè) div 之間的外邊距是 20px，而不是 30px（20px + 10px）。

（注意：圖片中的“內(nèi)容區(qū)域”應(yīng)該是包括content和padding）
demo1

情況2：存在嵌套關(guān)系
　父子節(jié)點(diǎn)都是沒有脫離文檔的兩種定位（static、relative）的外邊距（margin）會合并，顯示效果以最大的那個(gè)外邊距為準(zhǔn)。

沒有給父元素設(shè)置內(nèi)邊距或者有效的邊框的情況下：







  
  

注釋：請注意，如果不設(shè)置 div 的內(nèi)邊距和邊框，那么內(nèi)部 div 的上外邊距將與外部 div 的上外邊距合并（疊加）。
為父元素例子中的middle元素增加一個(gè)border-top或者padding-top即可

邊距合并實(shí)際例子：



  
      
      
      
  
  
    
          
            
              
                middlenormal
              big
             container

normal和big都沒有脫離文檔流，發(fā)生嵌套時(shí)，最終確認(rèn)上邊距為50px.

在包含塊上設(shè)置邊框或者內(nèi)邊距，會使其子元素的外邊距包含在包含塊內(nèi)。《CSS權(quán)威指南》（第三版）
解決這種情況下邊距合并：



  
      
      
      
  
  
    
          
            
              
                middlenormal
              big
             container

注意：#big{ padding-top:5px;} 這里normal上邊框距離big上邊框的值應(yīng)該是:margin-top(normal) + padding-top(big)

demo2

margin講解
父元素的第一個(gè)子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己“領(lǐng)導(dǎo)”(父元素，祖先元素)的麻煩。只要給領(lǐng)導(dǎo)設(shè)置個(gè)有效的 border或者padding就可以有效的管制這個(gè)目無領(lǐng)導(dǎo)的margin防止它越級，假傳圣旨，把自己的margin當(dāng)領(lǐng)導(dǎo)的margin執(zhí)行。

對于垂直外邊距合并的解決方案上面已經(jīng)解釋了，為父元素例子中的middle元素增加一個(gè)border-top或者padding-top即可解決這個(gè)問題。

情況3.外邊距與自身發(fā)生合并

假設(shè)有一個(gè)空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發(fā)生合并：

如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會發(fā)生合并：

這就是一系列的段落元素占用空間非常小的原因，因?yàn)樗鼈兊乃型膺吘喽己喜⒌揭黄穑纬闪艘粋€(gè)小的外邊距。

3.absolute定位結(jié)果

分兩種情況來考慮：

第一種，元素的某條邊沒有設(shè)置定位屬性（left/top/right/bottom）的時(shí)候，這一邊就會將absolute塊（包括外邊距）按流式布局（正常布局）來排列，當(dāng)然這個(gè)流式布局就會受到內(nèi)邊距padding的影響了。



  
      
      
      
  
  
    
          
            
              
                middlenormal
              big
             container

第二種，元素的某條邊設(shè)置了定位屬性（left/top/right/bottom）的時(shí)候，這一邊就會被作為脫離文檔流的邊來處理，會相對于 static 定位以外的第一個(gè)父元素（的邊框）進(jìn)行定位，如果這時(shí)候設(shè)置了外邊距，那么這一邊相對于基準(zhǔn)元素的偏移=定位值（left/top/right/bottom）+ 外邊距。



  
      
      
      
  
  
    
          
            
              
                middlenormal
              big
             container

注意:middle設(shè)置了left:0

同時(shí)，作為脫離文檔流來處理的邊是基于那個(gè)基準(zhǔn)元素的邊框來定位的，當(dāng)然不受那個(gè)元素內(nèi)邊距padding的影響。

2.文檔流與文本流是怎么回事？
相關(guān)問答：https://www.zhihu.com/questio...

3.BFC

BFC(Block Formatting Contexts)直譯為”塊級格式化上下文”。Block Formatting Contexts就是頁面上的一個(gè)隔離的渲染區(qū)域，容器里面的子元素不會在布局上影響到外面的元素,反之也是如此。

BFC形成
float 的值不為 none
position 的值不為 static 或 relative
display屬性為inline-boxs、table-cells、table-captions的不是塊盒的塊容器(除非這個(gè)值已經(jīng)被傳播到視口),
overflow不為visible的塊盒才會為它的內(nèi)容創(chuàng)建新的BFC。
body元素

BFC渲染規(guī)則（6條）
內(nèi)部的Box會在垂直方向，一個(gè)接一個(gè)地放置。
Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會發(fā)生重疊
每個(gè)元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
BFC的區(qū)域不會與float box重疊，常用來清除浮動和布局。
BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
計(jì)算BFC的高度時(shí)，浮動元素也參與計(jì)算

4.IFC

IFC(Inline Formatting Contexts)直譯為”內(nèi)聯(lián)格式化上下文”，IFC的line box（線框）高度由其包含行內(nèi)元素中最高的實(shí)際高度計(jì)算而來（不受到豎直方向的padding/margin影響)

IFC渲染規(guī)則
框會從包含塊的頂部開始，一個(gè)接一個(gè)地水平擺放。
擺放這些框的時(shí)候，它們在水平方向上的外邊距、邊框、內(nèi)邊距所占用的空間都會被考慮在內(nèi)。在垂直方向上，這些框可能會以不同形式來對齊：它們可能會把底部或頂部對齊，也可能把其內(nèi)部的文本基線對齊。能把在一行上的框都完全包含進(jìn)去的一個(gè)矩形區(qū)域，被稱為該行的行框。水平的margin、padding、border有效，垂直無效。不能指定寬高。
行框的寬度是由包含塊和存在的浮動來決定。

IFC ‘line-height’ 與 ‘vertical-align’ 屬性
計(jì)算行框里的各行內(nèi)級框的高度。對于置換元素、行內(nèi)塊元素、行內(nèi)表格元素來說，這是邊界框的高度，對于行內(nèi)框來說，這是其 ‘line-height’。
行內(nèi)級元素根據(jù)其 ‘vertical-align’ 屬性垂直對齊。在這些框使用 ‘top’ 或 ‘bottom’ 對齊的情況下，user-agent必須以最小化行框的高為目標(biāo)對齊這些框。若這些框夠高，則存在多個(gè)解而 CSS 2.1 不定義行框基線的位置。
行框的高是最頂端框的頂邊到最底端框的底邊的距離。

5.浮動與清除浮動

參考：
(1) w3School
(2)《CSS權(quán)威指南》(第三版)

5-1 浮動

5-2 清除浮動的最佳實(shí)踐方案：

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

6.margin:auto與width的計(jì)算

主要講了margin與width結(jié)合處理大小為auto的問題，并詳細(xì)介紹width的計(jì)算原則。
將這個(gè)問題之前先放一張盒模型示意圖：

現(xiàn)在有一個(gè)寬度為400px的包含塊，針對如圖所示：

情況一：margin-left margin-right width的值都是auto
表現(xiàn)：width盡可能的大，width的值為100%；margin-left margin-right均為0

情況二：margin-left margin-right width的值都是100
表現(xiàn)：margin-right 被強(qiáng)制設(shè)置成200

情況三：margin-left margin-right 的值是auto;width已知為200px
表現(xiàn)：居中顯示

情況四：margin-left:-100, margin-right:100 width的值是auto
表現(xiàn)：width被計(jì)算為400px

情況五：margin-left:100,width:100,margin-right的值都是auto
表現(xiàn)：margin-right被計(jì)算為200px

三后記

參考資料：

云服務(wù)器 GPU云服務(wù)器 css權(quán)威指南進(jìn)階技巧 -進(jìn)階進(jìn)階

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113049.html

發(fā)表評論

登陸后可評論

0條評論

SolomonXie

男|高級講師

我要關(guān)注我要私信

TA的文章

青果云雙11活動：11.11上云鉅惠盛典,青果云鉅惠攻略即刻上線

閱讀 1051·2021-11-18 13:23
Linux內(nèi)核TIPC模塊披露嚴(yán)重RCE漏洞或?qū)⒂绊懯褂谜哒麄€(gè)系統(tǒng)

閱讀 757·2021-11-08 13:16
程序員“修煉成神”的必經(jīng)之路——數(shù)據(jù)結(jié)構(gòu)（第2章線性表）

閱讀 870·2021-10-11 10:58
云虛擬主機(jī)怎么用-虛擬主機(jī)可以使用云數(shù)據(jù)庫嗎？

閱讀 3519·2021-09-22 15:26
阿里云和騰訊云輕量應(yīng)用服務(wù)器推薦，2核4G8M首年低至74元

閱讀 1748·2021-09-08 10:42
【項(xiàng)目實(shí)戰(zhàn)】如何設(shè)計(jì)一個(gè)小型的200多人的公司網(wǎng)絡(luò)

閱讀 1825·2021-09-04 16:45
【Jquery】添加loading過渡遮罩

閱讀 1744·2019-08-30 15:54
寫一個(gè)90分的list組件

閱讀 2576·2019-08-30 13:45

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

CSS進(jìn)階指南

相關(guān)文章

**web前端工程師進(jìn)階指南**

**web前端工程師進(jìn)階指南**

前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

那些年，我的前端/Java后端書單

那些年，我的前端/Java后端書單

發(fā)表評論

0條評論

SolomonXie

男|高級講師

TA的文章

青果云雙11活動：11.11上云鉅惠盛典,青果云鉅惠攻略即刻上線

Linux內(nèi)核TIPC模塊披露嚴(yán)重RCE漏洞或?qū)⒂绊懯褂谜哒麄€(gè)系統(tǒng)

程序員“修煉成神”的必經(jīng)之路——數(shù)據(jù)結(jié)構(gòu)（第2章線性表）

云虛擬主機(jī)怎么用-虛擬主機(jī)可以使用云數(shù)據(jù)庫嗎？

阿里云和騰訊云輕量應(yīng)用服務(wù)器推薦，2核4G8M首年低至74元

【項(xiàng)目實(shí)戰(zhàn)】如何設(shè)計(jì)一個(gè)小型的200多人的公司網(wǎng)絡(luò)

【Jquery】添加loading過渡遮罩

寫一個(gè)90分的list組件

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

CSS進(jìn)階指南

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！