国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

解剖CSS布局原理

李文鵬 / 718人閱讀

摘要：前言本文將帶你重新認識布局，帶你解剖布局原理，前提是你要有基礎本文將解除你在布局方面的疑惑。以下將對布局元素和文檔流進行詳細講解。而且還能保持文檔流，這是其他元素做不到的。

前言

本文將帶你重新認識CSS布局，帶你解剖布局原理，前提是你要有基礎！本文將解除你在布局方面的疑惑。認識每個布局元素，了解他們的特性，你才知道為什么會是這樣的結果。本文內容純屬個人理解，不代表官方。

此文主要為理論部分，實際例子可以看我另外一篇文章 PC端CSS布局匯總

學習CSS布局前你需要了解這些

首先了解下盒子模型

上圖是一個盒子模型，每個html標簽都會轉化成一個盒子模型，每個盒子都有自己的position、margin、border、padding、width、height，這些屬性決定著盒子的大小和位置。盒子的大小由border、padding、width、height共同決定。盒子的位置是我們接下來要探討的問題。

瀏覽器審查元素都能看到每一個標簽的盒子模型。看盒子模型有些要注意的

圖中的數值都是px單位的，其他單位都會換算成px。填橫線-的表示默認值，有可能是0，也有可能是auto；

圖中的藍色區域820 x 26表示寬度 x 高度，是最終計算出來的實際寬高，而不是css里設置的width和height。如果設置了box-sizing:border-box，系統會自動減去padding和border的大小，計算后的顯示在藍色區域，這個區域是實際可用空間。

圖中的position表示top、bottom、left、right的值，定位元素才有這項。

html的標簽結構是屬于樹形結構，轉化成盒子模型就變成一個套一個，最外層是document，再往里一層是，里面放置兩個盒子head和body，以此類推。CSS布局就是在探究盒子在父容器（上一級盒子）里的放置位置。

盒子的放置位置與盒子大小、盒子之間的間距有關，也就是盒子模型上的那幾個屬性有關。每種標簽對盒子模型的處理方式有些差異，我把這些盒子歸為這幾類：內聯元素、塊級元素、內聯塊元素、表格元素、彈性盒子元素、浮動元素、定位元素。這些元素我統稱他們為布局元素。

盒子的放置位置還與盒子的排列方式有關，是從左到右排呢？還是從右到左排呢？是否允許重疊？盒子的排列方式就是所謂的文檔流，文檔流一般分為三種：常規文檔流、BFC、脫離文檔流。

以下將對布局元素和文檔流進行詳細講解。

布局元素

CSS把這些布局元素分為三大類，分別用display、float、position來聲明。其中display用來聲明：內聯元素、塊級元素、內聯塊元素、表格元素、彈性盒子元素。float用來聲明浮動元素。position用來聲明定位元素。這三大類可以混合使用，其中display為必須項，你不設置它也有默認值。

1. 內聯（行內）元素 
display: inline;

寬高大小由子元素決定，不能手動修改寬高，子元素一般放置文本元素，與其他內聯元素并排在同一行

內聯元素不能改變寬高，導致有些屬性無效，比如：width系列、height系列、margin-top、margin-bottom、padding-top、padding-bottom、line-height。

常用的內聯標簽：、、、、

使用內聯元素你可能會遇到這種情況，


    內聯元素
    內聯元素

內聯元素之間有空白區域

空白區域的形成是因為之間有回車，在html中，空格、制表符、回車都屬于空白符，多個空白符都會視為一個空格，空格的大小由父級

的font-size決定。
注意：只有內聯(內聯塊)與內聯(內聯塊)之間的空白符才會形成一個空格，文本元素(除空白符)也是屬于內聯元素。

解決空白區域的方案有以下四種

給

設置font-size: 0;，在上把font-size設置回去

將空白符注釋掉

把span排列在同一行，并緊貼在一起

使用浮動float，有些場合不允許使用浮動，這條就不適用

2. 塊級(區塊)元素 
display: block;

默認高度等于子元素高度，寬充滿父級元素，塊級元素之間縱向排列

常用的塊級標簽：

、

to

、

、

    ~
  • 、
    ~

    塊級元素之間如果不浮動或定位，永遠是縱向排列，不管寬度多少。

    塊級元素寬高默認為auto,有自適應伸縮的特性。例如：

    浮動元素
    

    塊級元素

    塊級元素的文檔流不被破壞的情況下，寬度為auto時會永遠充滿容器寬度，遇到有東西擋住，文本流會自動往后移，但實際區域沒變，只是被遮住了?？梢越柚@個特性做圖文排版，或者做自適應寬度布局。注意：塊級元素一旦脫離的文檔流，這個特性將會失效

    塊級元素還有另一大特性，文檔流不被破壞的情況下，外邊距margin會自動填充橫向剩余部分

    塊級元素

    橙色部分表示margin，margin默認是0，卻能充滿剩余部分，這就解釋了為什么塊級元素永遠是縱向排列。如果margin的值設置為auto，它就會左右平分掉，形成了區塊橫向居中的現象。

    塊級元素處理盒子模型較為靈活，通常優先使用塊級元素布局，塊級元素無法實現的情況才采用其他元素布局，它擅長于處理自身與父元素和兄弟元素之間的布局，不擅長對子元素布局

    3. 內聯塊元素 
    display: inline-block;

    與內聯元素一樣，默認寬高由子元素決定，但它可以設置寬高、邊距。內聯塊之間橫向排列

    內聯塊元素是內聯元素與塊級元素的結合體，擁有內聯元素的特和塊級元素的靈活性，但它沒有塊級元素的特性。它也會有元素間出現空白區域的問題，解決方案一樣。

    內聯塊元素有自己的一大特性，就是它可以將自身(包括子元素)當成一個文本元素去操作，像操作文本一樣去操作一塊區域，如下例子：

    
    
    
    
    

    .parent {
    width: 400px;
    height: 80px;
    font-size: 0;            /* 防止空白區域 */
    text-align: center;
    text-indent: -40px;      /* 文本縮進 */
    letter-spacing: 30px;    /* 文字之間的間距 */
    background: #ccc;
}
.box {
    display: inline-block;
    width: 100px;
    height: 80px;
    background: #fcc;
    font-size: 16px;
}

    給文本設置居中，設置文本向左縮進40px，文字間距30px。這些都是對文字的設置，但內聯塊卻生效了，兩個內聯塊被看成兩個單詞，所以間距才會生效。

    有了這個特性，就能完成一些很細微的布局操作，在實際開發中也是挺常用的，通常被當成一個容器結合其他元素一起使用。

    4. 表格元素 
    display: table;      /*對應*/
display: table-cell; /*對應<del id="yiw20"></del>
    <fieldset id="yiw20"></fieldset>
      */

      與標簽
      系列一樣，的寬度會充滿
      ,而，
    • <strike id="yiw20"><input id="yiw20"></input></strike>
      寬度會平分
      內容超出寬度默認會撐開。當然你也可以設置讓它不撐開。
      

      使用CSS定義可以將普通的標簽變成表格元素，tr不能設置width，所以一般不使用tr，也就是CSS中的table-row，所以通常使用table和td，不需要tr，td也是可以平分table寬度的，結構關系一定要是父子關系。
      

      
    
      1111
      
    
      2222
      
    
      3333
      

      

      .parent {
    display: table;
    width: 200px;
    height: 40px;
    background: #ccc;
}
.child {
    display: table-cell;
}
.child1 { background: #0cc; }
.child2 { background: #c0c; }
.child3 { background: #cc0; }
      

      

      子元素并沒有設置寬高，卻能填充高度，平分寬度，這就是表格元素的一大特性。用過table布局的人應該都清楚，如果td內容太多，寬度會自動撐開，占用周圍的td寬度，table-cell也一樣，不過不想讓它自動撐開，就在table層設置
      

      table-layout: fixed;

      

      表格元素比較擅長于做居中布局，因為table-cell元素支持vertical-align和text-align這兩個屬性，對子元素進行橫向縱向居中，把子類設置為inline-block就可以區域居中，而且不需要知道子類寬高。
      

      表格元素也可以讓自身橫向居中，設置方式跟塊級元素一樣，設置margin: 0 auto，不同的是表格元素不需要知道寬度。
      
5. 彈性盒子元素

      彈性盒子是CSS3引入布局方式，它將更加有效的對一個容器中的元素進行排列、對齊和分配空白空間。本文章的講解不涉及彈性盒子元素，因為其他布局能做的，彈性盒子元素絕大部分都能做，只是兼容性較差，不適用于PC端，有人已經做了詳細講解，推薦看這篇文章 阮一峰Flex布局教程
      
6. 浮動元素

      float: none;   /* 取消浮動 */
float: left;   /* 左浮動 */
float: right;  /* 右浮動 */
      

      float不為none的屬于浮動元素
      

      浮動元素強制讓元素向左或向右貼近，如果同一個方向有多個元素，則會橫向排列，并緊貼在一起，若空間不夠，則會換行，如下圖所示。
      

      

      浮動元素會讓元素脫離文檔流，其他元素將無視浮動元素，把浮動元素的位置給占了，如下例子
      

      
    
      浮動元素
          
    
      浮動元素
      

      

      塊級元素
      

      .child{
    float: left;
    width: 100px;
    height: 40px;
}
.child1 {background: #fcc;}
.child2 {background: #ccf;}

.box{
    height: 60px;
    background: #ccc;
}
      

      

      脫離文檔流的元素的層級會比較高，會疊在上面。
      

      浮動元素脫離文檔脫離的不夠徹底，屬于部分脫離，可以將它拉回文檔流，讓.box位于.child下面。有兩種方式：
      

      第一種是使用清除浮動clear，有的人可能會在.box上寫clear: both來清除浮動，這樣是可以達到效果，但會引起一個問題，margin-top無效。應該在.box之前插入一個空元素，使用一個空元素專門用來清除浮動，這個空元素可以使用CSS偽元素代替。所以清除浮動的代碼應該是這樣
      

      .parent:after {
    content: "";
    display: table;
    clear: both;
}
      

      第二種方式是將浮動元素的父元素轉化為BFC，BFC是什么后面會講解，現在先看看實現代碼
      

      .parent {
    overflow: hidden;
}
      

      一般使用最多的是第一種，因為在空元素設置不會受到任何影響。在PC端清除浮動較為常用，一般會把清除浮動的代碼放在.clearfix上，頁面上需要清除浮動再使用這個class，或者sass繼承。
      

      浮動元素在PC端非常受歡迎，它可以將塊級元素橫向排列。書寫簡單，只要一個float: left就好
      

      浮動元素最大的特點是它可以讓一個元素多帶帶居左或居右，而不影響其他元素。而且還能保持文檔流，這是其他元素做不到的。
      
7. 定位元素

      position: static;    /* 取消定位 */
position: relative;  /* 相對定位 */
position: absolute;  /* 絕對定位 */
position: fixed;     /* 固定定位 */
      

      position不為static的屬于定位元素。定位元素分為三種：相對定位、絕對定位、固定定位。三種都有top、bottom、left、right、z-index屬性，都是基于某個參照物進行定位，不同的是定位參照物不同和文檔流不同，以下是各自的特點和用法。
      

      相對定位屬于常規文檔流的，與塊級元素一樣的排列，它的定位參照物是自身，設置left就會向右移，設置bottom會向上移，right和top同理，它不像margin，它位移只對自身有影響，不會影響其他元素，所以可能會導致覆蓋其他元素的現象。相對定位可以用來設置定位參照物，方便絕對定位操作。
      

      絕對定位是脫離文檔流的，而且脫離得很徹底，跟浮動元素不一樣，它無法拉回文檔流，它也屬于BFC。它的定位參照物不固定，如果父元素是個定位元素，就優先使用父元素作為定位參照物，不是定位元素就往上一級找，直到檢測到定位元素，如果到達還是沒有，就以瀏覽器第一視口作為定位參照物。
      

      

      瀏覽器視口指藍色區域區域，瀏覽器第一視口指滾動條置頂狀態下的視口。
      

      固定定位跟絕對定位一樣，唯一的差別是固定定位的定位參照物固定是瀏覽器視口。
      

      絕對定位和固定定位有個特性，設置left和right，會鎖定這兩點之間的空間。如果沒設置width或width: auto，就會填充這個空間。如果設置了width，margin為auto就會生效，會在鎖定空間內居中。這個特性在縱向的height、top、bottom會有同樣的效果。
      
文檔流
常規文檔流

      從左到右一個一個盒子以指定間距排列，排不下就跳到下一行繼續排列。此文檔流的特性將在BFC進行對比詳解。
      
BFC

      BFC全稱塊級格式化上下文(Block Formatting Context)，屬于常規文檔流的改進版，在此文檔流下的盒子將是一個獨立的盒子，什么意思？難道常規文檔流還能共享盒子不成？還真是了。其實我們用的最多的是BFC，如果你不了解BFC，實際開發中可能會一不小心用了常規文檔流，出現了某些的現象會覺得是bug，其實那是文檔流的特性。接下來列舉幾個常規文檔流現象：
      

      1. 邊距折疊
      

      box1
      

      box2
      

      .box1 {
    height: 60px;
    background: #fcc;
    margin-bottom: 10px;
}
.box2 {
    height: 60px;
    background: #ccf;
    margin-top: 20px;
}
      

      

      大多時候，我們要的是30px的間距，但實際卻是20px，那是因為邊距被折疊了，只會取最大的邊距。這種的情況解決方案是把他們放在不同的BFC內，這個這樣改
      

      
    
      box1
      

      

      box2
      

      .wrap {
    overflow: hidden;
}
.box1 {
    height: 60px;
    background: #fcc;
    margin-bottom: 10px;
}
.box2 {
    height: 60px;
    background: #ccf;
    margin-top: 20px;
}
      

      BFC是獨立的盒子，自身的margin不會與其他盒子融合，所以外邊距只會疊加，不會折疊。
      

      2. 邊距側漏
      

      常規文檔流里的塊級元素會有這樣的問題
      

      
    
      box
      

      

      .parent {
    height: 60px;
    background: #ccf;
}
.box {
    margin-top: 20px;
}
      

      這段代碼應該是把文字把往下移20像素，結果應該是這樣的
      

      然而并不是，其實結果是這樣
      

      塊級元素的第一個子元素的margin-top會穿過父元素的屏障，漏出去了，變成是父元素的margin-top。你可能會想到給父元素加一層屏障，設置border-top，但這樣會無故多出一個邊框的空間。最好的方式是把父元素轉化為BFC，這樣這樣改
      

      .parent {
    height: 60px;
    background: #ccf;
    overflow: hidden;
}
      

      BFC內部元素怎么折騰怎么改都不會影響父容器。
      

      BFC除了糾正常規文檔流的問題外，還有一些對浮動元素的糾正。
      

      3. 清除浮動
      

      
    
      浮動元素
          
    
      浮動元素
      

      

      塊級元素
      

      .child{
    float: left;
    width: 100px;
    height: 40px;
}
.child1 {background: #fcc;}
.child2 {background: #ccf;}

.box{
    height: 60px;
    background: #ccc;
}
      

      還是拿之前浮動元素的例子來講，當時沒講為什么BFC可以清除浮動，現在來講下原理。細心的同學應該可以發現，.child有設置寬高，可身為父元素的.parent卻沒有高度，所以才導致.box無視浮動元素占了它的位置。如果.parent能得到子元素的高度就符合了常規文檔流，就達到清除浮動浮動的效果。給.parent設置為BFC就能做到
      

      .parent {
    overflow: hidden;
}
      

      因為BFC的子元素怎么變化都不會影響父容器，子元素做了浮動，那是子元素的事，你所占有的寬高還是會把父容器撐開。
      

      4. 防止文字環繞
      

      有些場合并不想讓它文字環繞，如下代碼
      

      

      這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本這是一段文本
      

      .float {
    width: 50px;
    height: 50px;
    float: left;
    background: #fcc;
}
.text {
    height: 100px;
    background: #ccf;
}
      

      

      把.text設置為BFC可以防止文字環繞
      

      .text {
    height: 100px;
    background: #ccf;
    overfloat: hidden;
}
      

      

      以上是BFC常見的運用場合，可能有些人沒遇到這些場合，因為你們正無形中在使用BFC，上面的例子都是用overflow:hidden設置BFC，其實設置方式有很多，滿足以下條件的任何一條都是BFC
      


      
float不為none

      

      
position 的值不為 static 或者 relative

      

      
display 的值為 table-cell , table-caption , inline-block , flex , 或者 inline-flex 中的其中一個
      

      
overflow 的值不為 visible

      


      除了BFC外其他都是常規文檔流。
      
脫離文檔流

      脫離文檔流是基于BFC進行改造去除一些常規文檔流的東西。脫離文檔流又分為兩種：部分脫離和完全脫離。
      

      部分脫離是對常規文檔流的排列順序進行改造，不再只是從左到右排列，還可以從右到左，也可以一左一右，為了不影響常規文檔流的排列，默認會脫離文檔流，但還是會受父容器束縛。屬于部分分離的是float:left和float:right。
      

      完全脫離是完全放棄常規文檔流，不受任何束縛，根據left、right、top、bottom去定位。屬于完全脫離的是position:absolute和position:fixed。
                 
               
                                           
                       
                 
            
                     
             
               
      
                   
       文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
      
                 
                   
      轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111916.html
      
               
      
                      
               
              
              
      
                
      相關文章
      
                
        
                             
                                                                                                    
      • 
                                                
        
                          
        PC端CSS布局匯總
        
                                                     
        摘要：因為端和移動端布局差異較大，所以我將兩端布局分開講，本文章將針對端的布局進行講解，以下代碼只寫關鍵代碼。為了提高網頁性能，考慮到，表格元素盡量少用，有其他選擇的情況盡量用其他布局。

前言
此文章是 解剖CSS布局原理 的續集，之前那篇文章講的都是理論，本文章講具體的實例，根據自己對布局的理解與開發經驗分為以下幾類。
因為PC端和移動端布局差異較大，所以我將兩端布局分開講，本文章將針對P...
        
                                                   
                          
        
                                
        
                                    zhangxiangliang
                                    
                                    評論0 
                                    收藏0 
                                
        
                          
        
                      
        
                    
        •  
                                                                                       
      • 
                                                
        
                          
        2017-09-24 前端日報
        
                                                     
        摘要：前端日報精選未來布局之星更快地構建使用預解析以及深入的虛擬原理原來與是這樣阻塞解析和渲染的怎樣把網站升級到中文視頻從談函數式與響應式編程葉俊星系列三之煙花效果實現掘金的故事解剖表情動圖的構成設計系列傳統遞歸和尾調用的實現前端架構經

2017-09-24 前端日報
精選
未來布局之星Grid更快地構建DOM: 使用預解析, async, defer 以及 preload_JavaScri...
        
                                                   
                          
        
                                
        
                                    yuanzhanghu
                                    
                                    評論0 
                                    收藏0 
                                
        
                          
        
                      
        
                    
        •  
                                                                                       
      • 
                                                
        
                          
        Android livedata 源碼解剖
        
                                                     
        摘要：方法中，，當為，并且不等于上一次的值，會增加的計數。鎖住當前沒有人在處理任務處理完畢之后將置為首先，采用同步機制，通過有沒有人在處理任務。說在前面
本次推出 Android  Architecture Components 系列文章，目前寫好了四篇，主要是關于 lifecycle，livedata 的使用和源碼分析，其余的 Navigation， Paging library，Room，Wo...
        
                                                   
                          
        
                                
        
                                    GHOST_349178
                                    
                                    評論0 
                                    收藏0 
                                
        
                          
        
                      
        
                    
        •  
                                                                                       
      • 
                                                
        
                          
        web安全三，XSS攻擊
        
                                                     
        摘要：我把這個領域的東西寫成了一個系列，以后還會繼續完善下去安全一同源策略與跨域安全二攻擊安全三攻擊

上文說完了CSRF攻擊，本文繼續研究它的兄弟XSS攻擊。
什么是XSS攻擊
XSS攻擊全名（Cross-Site-Script）跨域腳本攻擊，為了跟CSS（Cascading-Style-Sheet）區分開來，所以縮寫是XSS。
XSS攻擊的原理
上一節說道的CSRF攻擊是利用的是偽請求，這...
        
                                                   
                          
        
                                
        
                                    jlanglang
                                    
                                    評論0 
                                    收藏0 
                                
        
                          
        
                      
        
                    
        •  
                                                                                       
      • 
                                                
        
                          
        web安全三，XSS攻擊
        
                                                     
        摘要：我把這個領域的東西寫成了一個系列，以后還會繼續完善下去安全一同源策略與跨域安全二攻擊安全三攻擊

上文說完了CSRF攻擊，本文繼續研究它的兄弟XSS攻擊。
什么是XSS攻擊
XSS攻擊全名（Cross-Site-Script）跨域腳本攻擊，為了跟CSS（Cascading-Style-Sheet）區分開來，所以縮寫是XSS。
XSS攻擊的原理
上一節說道的CSRF攻擊是利用的是偽請求，這...
        
                                                   
                          
        
                                
        
                                    JiaXinYi
                                    
                                    評論0 
                                    收藏0 
                                
        
                          
        
                      
        
                    
        •  
                                                                           
                
      
              
      
              
               
      
                  
                  
      發表評論
      
                   
               
      
              
      
                
      
                  
      0條評論
         
                
       
                      
      
              
      
           
           
      
              
       
                

                   
              
  
      
                  
      最新活動
       
           
                             
              

      


      
                                
                    
      
           
      
        
       
    
    
     
      
      
    
      
    
    
      
    
       
       
      
         
      閱讀需要支付1元查看
        
         
           
       
      
      
  
    
    







      
        
      
            
      
              
              
            
      
             
        
      
    
      





    

<