position/display/float/z-index第一課時 · git-shaoyouqing

``` 來了，我們的2020新課時來了，OMG！！！ ``` # position、display、float、z-inde ## 1、position >position是定位的一個非常重要的屬性，不具有繼承性 1、`static`:正常的文本流，默認值，沒有定位 2、`absolute`:相對于static以外的第一個父元素進行定位（也就是最近的一個），定位后的空間被回收，會脫離文本流 3、`relative`:相對于自己正常位置進行定位，定位后的空間沒有被回收，不會脫離文本流 4、`fixed`:相對于瀏覽器窗口的絕對定位。最牛逼的一個定位,一般用于右側的導航條、客服或者需要一致固定在屏幕的，它相對于瀏覽器進行定位，會脫離文本流 5、`inherit`:從父元素繼承position值 ``` absolute:示例: *{ margin:0; padding:?0; ????} .div1?{ width:?500px; height:?500px; position:?absolute; border:?1pxsolidred; top:?200px; left:?200px; ????} .div2?{ width:?500px; height:?500px; position:?absolute; border:?1pxsolidred; left:?200px; top:?200px; ????} .div3?{ width:?500px; height:?500px; border:?1pxsolidred; position:?relative; top:?200px; left:?200px; ????} ``` ``` relative:示例: div?{ font-size:?15px; color:?#fff; ??} .test1?{ width:?500px; height:?500px; background:?#123; } .test2?{ width:?400px; height:?400px; background:?#234; position:?relative; left:?50px; top:?50px; } .test3?{ width:?300px; height:?300px; background:?#345; position:?absolute; right:?-20px; top:?-20px; } <div class = "test1"> test1 <div class = "test2"> test2 <div class ="test3">test3</div> </div> </div> ``` ``` fixed示例： *?{ padding:?0; margin:?0; ????} div?{ font-size:?15px; color:?#fff; ????} .test1?{ width:?500px; height:?500px; background:?#123; ????} .test2?{ width:?400px; height:?400px; background:?#234; position:?fixed; right:?20px; top:?20px; ????} .test3?{ width:?300px; height:?300px; background:?#345; position:?absolute; left:?-40px; top:?40px; ????} <div class = "test1"> test1 <div class = "test2"> test2 <div class ="test3">test3</div> </div> </div> ``` ## 2、display display屬性規定元素生成框的類型，默認值是inline ，沒有繼承性。 >`inline`:行內元素,沒有寬高和行高，被里面的文字撐大的，取決于font-size，元素不會獨占一行，多個相鄰的元素會排列到一行，直到排不下，才會換新的一行，width和height屬性無效。水平的padding和margin可以邊距產生效果，但是垂直的padding和margin不會產生邊距效果 `block`：總是在新的一行開始，前后都默認有換行，寬度默認是其父元素的100%，高度需要設置高、行高、頂和低邊距 `inline-block`:行內塊，在chorme和Opera可以支持，但是IE會觸發layout，通過對vertical-align去修改對齊方式 `flex`:彈性布局拓展： `list-item`:為元素生成塊型盒，其效果和ul中出現項目列表符號一樣。 `inherit`:規定應該從父元素繼承display屬性的值 `table-column`:此元素作為一個單元格列顯示，類似`col` `table-cell`:此元素作為表格單元顯示，類似于`td`和`th` `table-row`:此元素作為一個表格行顯示,類似`tr` `table-header-group`:此元素作為一個或多個行的分組顯示,類似于`thead` `table-footer-group`:此元素作為一個或多個行的分組顯示，類似于`tfoot` `table-column-group`:此元素作為一個或多個列的分組來顯示,類似于`colgroup` `table`:此元素作為塊級表格來顯示，類似于`table`，表格前后有換行符 `inline-table`:此元素作為內聯表格來顯示，類似于`table`,表格前后沒有換行符 ``` 塊級元素：div, p, form, ul, li, ol, dl, address, table, menu, hr 行內元素：span, strong, em, br, a, i, small, b, label，h1 行內塊： button, input, textarea, img, select ``` ## 3、float >元素水平方向的移動，只是左右移動，不能上下移動，直到碰到邊框才會換行，類似于行內塊的換行方式 `none`:默認值，元素不浮動，并且顯示在文本出現的位置 `left`:元素向左浮動 `right`:元素向右浮動 `inherit`：繼承父級float屬性 ## 4、z-index `auto`: 默認值，為1 `number`:數字，按照堆疊順序。 `inherit`:規定應該從父元素繼承 z-index 屬性的值。 >z-index無效時和處理方法 >* 無效的情況: 1、問題標簽無position(不含static) 2、問題標注含有浮動（float）屬性 3、問題標簽的祖先標簽的z-index值比較小 >* 解決辦法有三個： 1、position:relative改為 position:absolute 2、浮動元素添加position屬性（relative和absolute、fixed等） 3、去除浮動（輔助） 4、問題標簽的祖先標簽的z-index值調大 ![](images/display_float_position.png) ## 補充1 ：清除浮動 * 為什么需要清楚浮動？？清楚浮動主要時處理父元素因為子元素浮動引起的內部高度為0的問題。 ![](https://img.kancloud.cn/28/a3/28a300eca6a86ecfc07416043fac46d4_720x540.png) 清楚浮動有五種方法： * 1 額外標簽法（在最后一個額外標簽加一個標簽，clear:both）不推薦 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .fahter{ width: 400px; border: 1px solid deeppink; } .big{ width: 200px; height: 200px; background: darkorange; float: left; } .small{ width: 120px; height: 120px; background: darkmagenta; float: left; } .footer{ width: 900px; height: 100px; background: darkslateblue; } .clear{ clear:both; } </style> </head> <body> <div class="fahter"> <div class="big">big</div> <div class="small">small</div> <div class="clear">額外標簽法</div> </div> <div class="footer"></div> </body> </html> ``` 效果圖： ![](https://img.kancloud.cn/aa/8d/aa8dfd7165fe012e5eff8adbc9649865_1484x542.png) 優點：通俗易懂，方便，瀏覽器兼容性好缺點：添加無意義標簽，語義化差 * 2 父級添加overflow屬性（父元素添加overflow:hidden）（不推薦）通過觸發BFC方式來清除浮動 ``` .fahter{ width: 400px; border: 1px solid deeppink; overflow: hidden; } ``` 優點：代碼簡潔缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢出的元素 * 3 使用after偽元素清除浮動（推薦使用） ``` .clearfix:after{/*偽元素是行內元素正常瀏覽器清除浮動方法*/ content: ""; display: block; height: 0; clear:both; visibility: hidden; } .clearfix{ *zoom: 1;/*ie6清除浮動的方式 *號只有IE6-IE7執行，其他瀏覽器不執行*/ } <body> <div class="fahter clearfix"> <div class="big">big</div> <div class="small">small</div>  </div> <div class="footer"></div> </body> ``` 優點：符合閉合浮動思想，結構語義化正確缺點：ie6-7不支持偽元素：after，使用zoom:1觸發hasLayout. * 4、使用雙偽元素清除浮動推薦使用有相鄰元素就可以直接用相鄰元素也是可以的 ``` .clearfix:after,.clearfix:before{ content: ""; display: table; } .clearfix:after{ clear: both; } .clearfix{ *zoom: 1; } <div class="fahter clearfix"> <div class="big">big</div> <div class="small">small</div> </div> <div class="footer"></div> ``` 優點：代碼更簡潔缺點：用zoom:1觸發hasLayout. * 4 給父容器添加浮動不推薦使用 ``` .fahter{ width: 400px; border: 1px solid deeppink; float:left; (或者right) } ``` 優點：操作簡單缺點：影響布局， > 什么時BFC ？ Block Formatting Context ，是布局過程中生成的塊級盒子的區域，也是浮動元素與其他元素交互限定區域，是一個獨立的單元，你進不來，我出不去。 >觸發BFC的條件，通常是這四種 1. float不為none 2. position為fixed和absolute的元素 3. overflow不為visible的元素 4. display為inline-block、table-cell、table-caption，flex，inline-flex的元素 >有的時候我們需要去觸發BFC來處理問題，哪有什么可以解決的呢？ 1. 浮動元素的父元素高度塌陷 2. 兩欄自適應布局 3. 外邊距垂直方向重合處理地址：https://blog.csdn.net/weixin_43687095/article/details/104292827