day044CSS相關屬性之盒子模型、float浮動、overflow溢位屬性、position定位
阿新 • • 發佈：2018-12-18
本節內容：CSS相關屬性2
1、CSS盒子模型 2、float浮動 3、overflo溢位屬性 4、position（定位）一、CSS盒子模型
1、margin：外邊距，控制元素間的距離，整個模型實際佔的大小； 2、border：邊框，文字的邊框，在內邊距和外邊距之間； 3、padding：內邊距，內容到邊框的距離； 4、content：內容，盒子的內容，顯示文字和影象。
1、margin外邊距的寫法
1、普通寫法：
.margin-test{ # 選擇器選擇這個 margin-top:5px; margin-right:10px; margin-bottom:15px; margin-left:20px; } 一般瀏覽器會預設給加上一個margin， 所以我們一般寫CSS樣式的時候，都會先寫一個body的上下左右的margin都設定為0.2、如果將上下兩個標籤都設定了margin是什麼效果
3、推薦使用簡寫：
順序：上右下左 .margin-test { margin: 5px 10px 15px 20px; }4、常見居中：
.mycenter { margin: 0 auto; #上下0畫素，左右自適應，居中的效果 } 如果你寫的是三個：margin: 10px 20px 10px;意思是上為10，左右為20，下為102、padding內填充
1、推薦使用簡寫：
順序：上右下左 .padding-test { padding: 5px 10px 15px 20px; } 補充padding的常用簡寫方式： 提供一個，用於四邊； 提供兩個，第一個用於上－下，第二個用於左－右； 如果提供三個，第一個用於上，第二個用於左－右，第三個用於下； 提供四個引數值，將按上－右－下－左的順序作用於四邊；二、float浮動
脫離了標準文件流，1、寫法
.div1{ float: left; } 三種取值 left：向左浮動 right：向右浮動none：預設值，不浮動 先後順序，一般按html寫的順序排，也可以自己寫左右
效果：
2、標籤浮起後，出現的副作用
浮動元素會生成一個塊級框，而不論它本身是何種元素。 若父標籤也沒有，設定任何高度 將無法撐起自己的父標籤，會被下面的標籤頂上來，然後浮起的標籤，蓋在便籤上fe:浮起的副作用（浮起標籤和下面的標籤重疊）
解決辦法：
3、浮動元素特點介紹：
浮動元素會生成一個塊級框，而不論它本身是何種元素。 浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。 由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。 css浮動參考示例4、clear清除浮動
為什麼要用清除浮動： 把一個塊級標籤變成一個類似內斂標籤的感覺，不好操控，容易混亂， 所以一般都用浮動來進行佈局。 clear屬性規定元素的哪一側不允許其他浮動元素。
clear屬性只會對自身起作用，而不會影響其他元素。
1、清除浮動的三種方式
浮動的副作用（父標籤塌陷問題），所以要清除浮動 主要有三種方式： 1、固定高度 就是我們剛才的示例，在父標籤裡面加一個其他的標籤 2、偽元素清除法 css來解決 3、overflow:hidden（用溢位屬性解決）fe1:第一種
fe2:第二種，偽元素清除法（使用較多）：
.clearfix:after { content: ""; display: block; clear: both;} CSSCopy
四、overflow溢位屬性 （先看下面的例子）
設定方向 overflow（水平和垂直均設定） overflow-x（設定水平方向，只出現x軸的滾動條） overflow-y（設定垂直方向，只出現y軸的滾動條）
1、防止溢位，文字不顯示或者超出文字框
fe1:運用overflow示例，做圓形頭像
運用overflow，做圓形頭像 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>圓形的頭像示例</title> <style> * { margin: 0; padding: 0; } .header-img { width: 150px; #如果這個高度和寬度比圖片的畫素小怎麼辦，圖片顯示不全啊，因為使用者上傳的頭像沒準多大畫素的，就需要設定下面哈格.header-mg>img，裡面寫上max-width:100%了 height: 150px; border: 3px solid white; border-radius: 50%; #圓形的邊框 overflow: hidden; #溢位的內容隱藏 } .header-img>img { max-width: 100%; #相當於將圖片的大小設定為父級標籤的大小來顯示了，因為使用者上傳的頭像的畫素我們是不知道的，就讓它按照父級標籤的大小來，就能放下整個頭像了，就不會出現頭像顯示不全的問題了 #直接寫width:100%就行，上面寫max-width的意思是如果圖片大於咱們設定的標籤高寬的時候，就按照父級標籤的大小來，比父級標籤的高寬小的時候，就不需要按照父級標籤的大小來了，瞭解一下就行了 } </style> </head> <body> <div class="header-img"> <img src=" https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt=""> </div> </body> </html> HTMLCopy
五、position定位
小範圍的佈局一般都是定位做的，大範圍的佈局一般都是用float來做的1、幾種基本的相關定位
1、static（無定位，咱就不說了，主要看相對和絕對定位） 2、relative（相對定位）： 相對定位是相對於該元素在文件流中的原始位置，即以自己原始位置左上角為參照物。 元素還佔據著原來文件流的空間，不會出現父級標籤塌陷的問題。 移動方向： 往右移動：right:100px 都是按照元素自己的左上角進行計算的 3、absolute（絕對定位） 設定為絕對定位的元素框從文件流完全刪除，也會有父級標籤塌陷的問題 不佔位置，2、fixed（固定）：回到頂部的示例
不管頁面怎麼動，都在整個螢幕的某個位置 物件脫離正常文件流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現滾動條時，物件不會隨著滾動。 注意點： 一個元素若設定了 position:absolute | fixed; 則該元素就不能設定float。 這 是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。 但是 relative 卻可以。因為它原本所佔的空間仍然佔據文件流。fe:定位程式碼示例
定位程式碼示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>返回頂部示例</title> <style> * { margin: 0; } .d1 { height: 1000px; } .scrollTop { padding: 10px; text-align: center; #水平居中 position: fixed; right: 10px; #距離視窗右邊框的距離 bottom: 20px; #距離視窗下邊框的距離 /*height：20px； line-height：20；當line-height等於height的值的時候，就能實現一個文字居中的效果 */ } </style> </head> <body> <div class="d1">111</div> <div class="scrollTop">返回頂部</div> </body> </html> HTMLCopy3、z-index（確定層疊關係，就是誰在前面）
結論： 1、z-index 值表示誰壓著誰，數值大的壓蓋住數值小的， 2、只有定位了的元素，才能有z-index,也就是說，不管相對定位，絕對定位，固定定位， 都可以使用z-index，而浮動元素float不能使用z-index 3、z-index值沒有單位，就是一個正整數，預設的z-index值為0如果大家都沒有z-index值， 或者z-index值一樣，那麼誰寫在HTML後面，誰在上面壓著別人，定位了元素，永遠壓住沒有定位的元素。 4、從父現象：父親慫了，兒子再牛逼也沒用fe:position的示例，用來定義模態對話方塊
position的示例，用來定義模態對話方塊 #自定義的一個模態對話方塊示例程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>自定義模態框</title> <style> .cover { #rgba的最後一個引數就是透明度的意思，所以如果我們這樣寫，就不需要寫下面那個opcity了，但是這個只表示的背景顏色的透明度，opcity是標籤的透明度及標籤的內容(包括裡面的文字)及標籤下面的子標籤的透明度 position: fixed; top: 0; right: 0; top\right\bottom\left都設定為0，意思就是全屏，這個標籤把全屏都覆蓋了 bottom: 0; left: 0; z-index: 998; #opcity:0.4; #設定元素的透明度 } .modal { position: fixed; width: 600px; height: 400px; left: 50%; #設定了left：50%和top：50%，你就會發現，你這個標籤的左上角相對於頁面的左面是50%，上面是50%，所以我們還要移動視窗，往左移動標籤寬度的一半，往上移動高度的一半就行了。就是下面的margin設定 top: 50%; margin: -200px 0 0 -300px; #左下右上，別忘了，往左移動要負值，往上移動要負值，因為它的移動是按照自己標籤的左上角來移動的。 z-index: 1000; } </style> </head> <body> <div class="cover"></div> <div class="modal"></div> </body> </html> HTMLCopy六、綜合示例
1、頂部導航選單
頂部導航選單 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>li標籤的float示例</title> <style> /*清除瀏覽器預設外邊距和內填充*/ * { margin: 0; padding: 0; } a { text-decoration: none; /*去除a標籤預設的下劃線*/ } .nav { height: 40px; width: 100%; position: fixed; top: 0; } ul { list-style-type: none; /*刪除列表預設的圓點樣式*/ margin: 0; /*刪除列表預設的外邊距*/ padding: 0; /*刪除列表預設的內填充*/ } /*li元素向左浮動*/ li { float: left; } li > a { display: block; /*讓連結顯示為塊級標籤*/ padding: 0 15px; /*設定左右各15畫素的填充*/ color: #b0b0b0; /*設定字型顏色*/ line-height: 40px; /*設定行高*/ } /*滑鼠移上去顏色變白*/ li > a:hover { color: #fff; } /*清除浮動 解決父級塌陷問題*/ .clearfix:after { content: ""; display: block; clear: both; } </style> </head> <body> <!-- 頂部導航欄 開始 --> <div class="nav"> <ul class="clearfix"> <li><a href="">玉米商城</a></li> <li><a href="">MIUI</a></li> <li><a href="">ioT</a></li> <li><a href="">雲服務</a></li> <li><a href="">水滴</a></li> <li><a href="">金融</a></li> <li><a href="">優品</a></li> </ul> </div> <!-- 頂部導航欄 結束 --> </body> </html> HTMLCopy2、小米商城的示例，
按照紅框--黃框--子框--藍框來看整個佈局：
產品經理需求–>UI（視覺、互動等各種UI）將這些頁面做成圖片（包括裡面的文字大小圖片大小等都給你準備好，標的很清楚）–>
前端工程師（通過前端程式碼來實現UI的頁面）–>後端工程師（寫提供資料、處理資料的邏輯）–>DBA管理資料