前端之CSS——盒子模型和浮動
1、CSS盒子模型
HTML文檔中的每一個元素都被描繪成矩形盒子，這些矩形盒子經過一個模型來描述其佔用空間，這個模型稱爲盒子模型。css
盒子模型經過四個邊界來描述：margin（外邊距），border（邊框），padding（內填充），content（內容區域），如圖所示：html
須要注意：瀏覽器的調試窗口一般會有類似的模型可供開發調試使用。前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 200px; height: 200px; padding: 20px; /*border: 10px solid red;*/ /*margin: 300px;*/ } </style> </head> <body> <!--盒模型：在網頁中基本上都會顯示一些方方正正的盒子，這種盒子就被稱爲盒模型 重要的屬性：width,height,padding,border,margin width:指的是內容的寬度，而不是整個盒子真實的寬度 height:指的是內容的高度，而不是整個盒子真實的高度 作一個402*402的盒子，你應該如何去設計 --> <div> 中共黨媒《人民日報》海外版公衆號「俠客島」日前評論稱，隨著「斷交」的骨牌效應愈來愈明顯，你們都在猜，下一個跟臺「斷交 」的會是誰。然而與其猜謎語，不如務實點，其實「一中原則」正是臺灣「斷交潮」背後隱藏的密碼。只要有心，原本不難發現，可有人就是裝做「視而不見」。 </div> </body> </html>
一、content（內容區域）
盒子的內容，顯示文本和圖像。CSS中的width和height屬性直接做用的區域。python
width：指的是內容的寬度，而不是整個盒子真實的寬度。linux
height：指的是內容的高度，而不是整個盒子真實的高度。web
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型的計算</title> <style type="text/css"> /* 作一個402*402的盒子，你應該如何去設計 */ /*div{*/ /*width: 400px;*/ /*height: 400px;*/ /*border: 1px solid red;*/ /*}*/ /*div{*/ /*width: 200px;*/ /*height: 200px;*/ /*border: 1px solid red;*/ /*padding: 100px;*/ /*}*/ div{ width: 0; height: 0; border: 1px solid red; padding: 200px; } </style> </head> <body> <!--若是想保證盒子的真實寬度，加width應該減padding 減width應該加padding--> <div> 內容 </div> </body> </html>
二、padding（內填充）
padding即內邊距，padding的區域是有背景顏色的。且背景顏色和內容區域的顏色一致。segmentfault
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>padding</title> <style type="text/css"> .box{ width: 300px; height: 300px; padding: 20px; background-color: red; } </style> </head> <body> <!-- padding：就是內邊距，padding的區域是有背景顏色的。且背景顏色和內容區域顏色同樣。 也就是說background-color這個屬性將填充全部的border內容之內的區域。 --> <div class="box"> 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 </div> </body> </html>
能夠看到背景顏色設置後，padding區域的顏色和內容區域的顏色都是紅色。瀏覽器
也就是說，background-color這個屬性將填充全部的border內容之內的區域。前端工程師
內邊距的距離：邊框到內容之間的距離。ide
注意：
1.padding有四個方向，因此可以分別描述四個方向的padding。
2.padding描述方法分兩種：（1）小屬性；（2）綜合屬性（空格隔開）
小屬性設置——控制每一個方向的寬度
/* 小屬性設置 控制每一個方向上的寬度*/ padding-top: 30px; padding-right: 30px; padding-left: 30px; padding-bottom: 30px;
綜合屬性設置——用空格隔開，順時針方向設置
/* 綜合屬性，用空格隔開 順時針方向 上右下左*/ padding: 20px 30px 40px 50px;
當不設置四個值的時候狀況以下：
/*只設置了三個值：上 左右 下*/ padding: 20px 30px 40px; /*只設置兩個值：上下 左右*/ padding: 35px 45px; /*只設置一個值：上下左右*/ padding: 20px;
特別須要注意，當設置的是三個值的時候，第二個值設置的是左右兩邊的內邊距。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>padding</title> <style type="text/css"> .box{ width: 300px; height: 300px; /*padding: 20px;*/ background-color: red; /*border: 3px solid yellow;*/ /* 小屬性設置 控制每一個方向上的寬度*/ padding-top: 30px; padding-right: 30px; padding-left: 30px; padding-bottom: 30px; /* 綜合屬性，用空格隔開 順時針方向 上右下左*/ /*padding: 20px 30px 40px 50px;*/ /*只設置了三個值：上 左右 下*/ /*padding: 20px 30px 40px;*/ /*只設置兩個值：上下 左右*/ padding: 35px 45px; /*只設置一個值：上下左右*/ padding: 20px; } </style> </head> <body> <!-- padding：就是內邊距，padding的區域是有背景顏色的。且背景顏色和內容區域顏色同樣。 也就是說background-color這個屬性將填充全部的border內容之內的區域。 內邊距的距離：邊框到內容之間的距離。 padding有四個方向，因此說咱們能分別描述4個方向的padding。 方法有兩種：一、寫小屬性 二、寫綜合屬性 用空格隔開 --> <div class="box"> 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 </div> </body> </html>
注意：padding不支持負值
擴展：一些標籤默認是有padding的（e.g. ul）
在一般作站中，每每須要清除默認的padding，margin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標籤的默認padding</title> <style type="text/css"> *{ padding: 0; margin: 0; } </style> </head> <body> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </body> </html>
可是*效率不高，因此要使用並集選擇器來選中頁面中應有的標籤。已經有人將清除默認樣式表的代碼寫好了。（css-reset 代碼）
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
關於padding清除具體示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標籤的默認padding</title> <style type="text/css"> *{ padding: 0; margin: 0; } </style> </head> <body> <!-- 好比說一般作站的時候，要清除默認的padding,margin *效率不高，因此要使用並集選擇器來選中頁面中應有的標籤。 （不用背，由於有人已經給我們寫好了這些清除默認的樣式表） body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; } --> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </body> </html>
三、border（邊框）
border是邊框的意思，邊框有三要素：粗細、線性、顏色。
值 | 描述
none | 無邊框
dotted | 點狀虛線邊框
dashed | 矩形虛線邊框
solid | 實線邊框
三要素的特性：
border: 5px solid blue;
1.若是顏色不寫（blue），默認是黑色；
2.若是粗細不寫（5px），默認是不顯示的。
3.若是隻寫了線性樣式（solid），默認上右下左3px的寬度，默認是黑色。
注意：設置border樣式有兩種方法：按照三要素、按照方向。
1.以三要素設置border樣式
/*按照3要素*/ border-width: 5px; border-style: solid; border-color: red;
三要素還能夠像padding那樣的綜合屬性順時針設置
/*3要素進階*/ border-width: 5px 10px; /* 上下：5px 左右：10px */ border-style: solid dotted double dashed; /* 順時針：上:實線邊框 右:點狀虛線 下:雙線 左:矩狀虛線 */ border-color: red green yellow; /*上:紅 左右:綠 下:黃*/
2.按照方向設置border樣式
/*按照方向去分*/ /*上*/ border-top-width: 10px; border-top-color: red; border-top-style: solid; /*右*/ border-right-width: 10px; border-right-color: red; border-right-style: solid; /*下*/ border-bottom-width: 10px; border-bottom-color: red; border-bottom-style: solid; /*左*/ border-left-width: 10px; border-left-color: red; border-left-style: solid;
上面的寫法很是繁瑣，還有相似下面的簡單寫法：
border-left: 10px solid red;
3.設置border的樣式爲空
/*清除border*/ border: none; /*設置一邊的border沒有樣式*/ border-right: none; border-top: 0;
小練習：使用border製做小三角。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> <!--小三角箭頭指向上方--> div{ width: 0; height: 0; border-bottom: 20px solid red; border-left: 20px solid transparent; /* 透明 */ border-right: 20px solid transparent; } </style> </head> <body> <div> </div> </body> </html>
注意：用transparent把border設置爲透明色，用border邊角實現了小三角。
四、margin（外邊距）
margin： 外邊距，指的是元素與元素之間的距離。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width:300px; height: 300px; border: 1px solid red; background-color: green; /*margin:20px;*/ margin-top: 30px; margin-left: 50px; margin-bottom: 100px; } p{ border: 1px solid green; } </style> </head> <body> <!--margin：外邊距 指得是距離--> <div></div> <p>我是一個p標籤</p> </body> </html>
margin特性：
1）margin 的4個方向
2）margin會改變實際大小，背景色不會渲染到margin區域 這個區域會以空白顯示，可是也屬於盒子的一部分
3)margin是添自身的,若是哪一個想要改變本身的位置，就給誰添加margin html的部分標籤自帶margin padding p body ul
margin垂直方向塌陷問題及解決：
當兩個兄弟盒子設置垂直方向的margin時，以較大的margin值爲準，這種現象稱爲「塌陷」。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin的塌陷</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 300px; height: 200px; background-color: red; margin-bottom: 20px; } .box2{ width: 400px; height: 300px; background-color: green; margin-top: 50px; } </style> </head> <body> <div class="father"> <!--當給兩個兄弟盒子設置垂直方向上的margin， 那麼以較大的爲準，咱們稱這種現象叫塌陷 --> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
box1的margin-bottom：20px，box2的magin-top：50px;在瀏覽器上，上下盒子的實際距離是50px。
浮動的盒子垂直方向不會塌陷，能夠解決margin塌陷問題.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin的塌陷</title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ width: 400px; overflow: hidden; border: 1px solid green; } .box1{ width: 300px; height: 200px; background-color: red; margin-bottom: 20px; float: left; } .box2{ width: 400px; height: 300px; background-color: green; margin-top: 50px; float: left; } </style> </head> <body> <div class="father"> <!--當給兩個兄弟盒子設置垂直方向上的margin， 那麼以較大的爲準，咱們稱這種現象叫塌陷 浮動的盒子垂直方向不塌陷 --> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
須要注意的是，水平方向上標準流的盒子margin是不會塌陷的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin的塌陷</title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ width: 400px; overflow: hidden; border: 1px solid green; } .box1{ width: 300px; height: 200px; background-color: red; margin-bottom: 20px; float: left; } .box2{ width: 400px; height: 300px; background-color: green; margin-top: 50px; float: left; } span{ background-color: red; } span.a{ margin-right: 20px; } span.b{ margin-left: 20px; } </style> </head> <body> <div class="father"> <!--當給兩個兄弟盒子設置垂直方向上的margin， 那麼以較大的爲準，咱們稱這種現象叫塌陷 浮動的盒子垂直方向不塌陷 --> <div class="box1"></div> <div class="box2"></div> </div> <span class="a">內容</span> <span class="b">內容</span> </body> </html>
水平居中盒子介紹（margin:0 auto）
要將標準流下的盒子水平居中須要用到以下屬性：
/*水平居中盒子*/ margin: 0 auto; /*水平居中另外一種表示*/ margin-left: auto; margin-right: auto;
注意：
1.使用margin: 0 auto; 水平居中盒子，必需要有width，並且是必需要有明確的width。
2.只有標準流下的盒子才能使用margin: 0 auto; 這個屬性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin:0 auto</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 780px; height: 50px; background-color: red; /*水平居中盒子*/ margin: 0 auto; /*水平居中另外一種表示*/ /*margin-left: auto;*/ /*margin-right: auto;*/ /*文字居中的屬性*/ text-align: center; float: left; } </style> </head> <body> <div> <!-- 1.使用margin:0 auto; 水平居中盒子，必需要有width，並且是必需要有明確的width。 文字水平居中使用text-align:center 2.只有標準流下的盒子才能使用margin：0 auto;這個屬性。 當一個盒子浮動了，固定定位，絕對定位了，margin:0 auto;就不能用了 3.margin:0 auto;是居中盒子而不是居中文本，文字水平居中使用test-align; --> 文字 </div> </body> </html>
當一個盒子浮動了，固定定位，絕對定位了，margin: 0 auto; 就不能用了
3.margin: 0 auto; 是居中盒子而不是居中文本，文字水平居中使用test-align:center;
/*文字居中的屬性*/ text-align: center;
2、標準文檔流
一、什麼是標準文檔流？
宏觀得講，咱們的web頁面和ps等設計軟件有本質的區別。
web網頁的製做是一個"流"的概念,從上而下，像"織毛衣"；而設計軟件，想往哪裏畫東西，就去哪裏畫。
二、標準文檔流下的微觀現象
1.空白摺疊現象:多個空格和換行在網頁上只顯示爲一個空格（ ）
2.高矮不齊，底邊對齊:一行中多個元素大小不相同，但都會保證底邊是對齊的。
3.自動換行，一行寫不滿，換行寫。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> span{ font-size: 25px; } </style> </head> <body> <!--什麼是標準文檔流 宏觀得講，咱們的web頁面和ps等設計軟件有本質的區別。 web網頁的製做是一個"流"的概念,從上而下，像"織毛衣" 而設計軟件，想往哪裏畫東西，就去哪裏畫。 標準文檔流下有哪些微觀現象？ 1.空白摺疊現象:多個空格和換行在網頁上只顯示爲一個空格（ ） 2.高矮不齊，底邊對齊:一行中多個元素大小不相同，但都會保證底邊是對齊的。 3.自動換行，一行寫不滿，換行寫。 --> <div> 文字 文字文字文字文字<span>姚明</span>文字文字文字文字文字文字 <img src="./images/homesmall.png" alt=""> <img src="./images/homesmall2.png" alt=""> </div> </body> </html>
3、塊級元素、行內元素和行內塊級元素轉換關係
在HTML中有關於標籤元素的分類：塊級元素、行內元素和行內塊級元素
在css選擇器內，能夠經過display屬性對塊級元素、行內元素、行內塊元素進行轉換，從而調整顯示效果。
display的功能：1.控制HTML元素的顯示和隱藏 2.塊級元素與行內元素的轉換。
一、display:inline 轉化爲行內元素
<style type="text/css"> .box1{ display: inline; /* 經過inline將塊級元素轉化爲行內元素 */ width: 200px; height: 40px; border: 1px solid red; } <body> <div class="box1">內容</div> <div class="box1">內容</div> </body>
上述代碼中，經過display:inline將div這種塊級元素轉化爲了行內元素，div內的內容在一行內顯示。
二、display:block 轉化爲塊級元素
<style type="text/css"> span{ background-color: yellow; width: 100px; /* 給行內元素設置高度寬度是不起做用的 */ height: 40px; display: block; /* block將行內元素轉化爲塊級元素 */ } <body> <span>alex</span> <span>alex</span> </body>
上述代碼中，<span>是行內元素，行內元素的特色就是元素的高度、寬度及邊距不可設置，display:block轉化爲塊級元素後，span內的內容分行顯示，且高度、寬度設置生效。
三、display：inline-block 轉化爲行內塊級元素
<style type="text/css"> .box1{ display: inline-block; /* 經過inline-block將塊級元素轉化爲行內塊級元素 */ width: 200px; height: 40px; border: 1px solid red; } </style> <body> <div class="box1">內容</div> <div class="box1">內容</div> <div class="box2">內容</div> </body>
上述代碼，把<div>這個塊級元素轉化爲了行內塊級元素。box1的元素都在一行上；元素的高度、寬度等均可設置。
四、display:none 隱藏當前的標籤
img{ width: 300px; height: 300px; display:none; /* 隱藏當前的標籤 不佔位置 */ }
display：none隱藏標籤不佔位置。在此須要注意和visibility:hidden進行區分。
img{ /* 行內塊級元素，能夠設置高度和寬度，也都在一行內展現 */ width: 300px; height: 300px; /*display: none; /* 隱藏當前的標籤 不佔位置 */ */ visibility:hidden; /* 隱藏當前的標籤 佔位置 */ }
轉化關係代碼示例以下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>塊級和行內元素</title> <style type="text/css"> .box1{ display: inline; /* 經過inline將塊級元素轉化爲行內元素 */ width: 200px; height: 40px; border: 1px solid red; } .box2{ margin-top: 20px; width: 200px; height: 40px; border: 1px solid green; } span{ background-color: yellow; width: 100px; /* 給行內元素設置高度寬度是不起做用的 */ height: 40px; display: block; /* block將行內元素轉化爲塊級元素 */ } img{ /* 行內塊級元素，能夠設置高度和寬度，也都在一行內展現 */ width: 300px; height: 300px; display: none; /* 隱藏當前的標籤 不佔位置 */ visibility:hidden; /* 隱藏當前的標籤 佔位置 */ } .box1{ display: inline-block; /* 經過inline-block將塊級元素轉化爲行內塊級元素 */ width: 200px; height: 40px; border: 1px solid red; } </style> </head> <body> <div class="box1">內容</div> <div class="box1">內容</div> <div class="box2">內容</div> <span>alex</span> <span>alex</span> <!--form表單中input textarea select都是行內塊級元素--> <img src="./images/homesmall.png" alt=""> <img src="./images/homesmall2.png" alt=""> </body> </html>
須要注意：form表單中input textarea select都是行內塊級元素。
<a>、<span>都是轉換特別頻繁的標籤。
4、浮動（float）
回顧以前的知識：
1.block元素一般被現實爲獨立的一塊，獨佔一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素能夠設置width、height、margin、padding屬性；
2.inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效。
3.常見的塊級元素有 div、form、table、p、pre、h1～h五、dl、ol、ul 等。
常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等。
4.所謂的文檔流，指的是元素排版佈局過程當中，元素會自動從左往右，從上往下的流式排列。
一、浮動是什麼？
脫離文檔流，也就是將元素從普通的佈局排版中拿走，其餘盒子在定位的時候，會當作脫離文檔流的元素不存在而進行定位。
二、浮動的影響和效果？
浮動可使得元素按指定方向排列，直到遇到父元素的邊界或另外一個浮動元素中止。
效果：兩個元素並排，且兩個元素都可以設置寬度和高度。以下：float:left; float:right;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 300px; height: 300px; background-color: red; float:left } .box2{ width: 400px; height: 400px; background-color: green; float:right; } </style> </head> <body> <!-- 浮動是css裏面佈局最多的一個屬性 效果：兩個元素並排了，而且兩個元素都可以設置寬度和高度。 浮動想學好：必定要知道它的四個特性 1.浮動的元素脫標 2.浮動的元素互相貼靠 3.浮動的元素有"字圍"效果 4.緊湊的效果 --> <div class="box1"></div> <div class="box2"></div> </body> </html>
三、浮動的四個特性
文檔流：可見元素在文檔中排列位置，元素排版佈局過程當中，元素會自動從左往右，從上往下的流式排列。
1.浮動會使元素脫離文檔流
2.浮動會使元素提高層級
3.浮動可使塊元素在一行排列，不設置寬高的時候，可使元素適應內容
4.浮動可使行內元素支持寬高
特性一：浮動元素脫標（脫離文檔流）
脫標——脫離標準文檔流。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動元素脫標</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 200px; height: 200px; background-color: red; float:left; } .box2{ width: 400px; height: 400px; background-color: yellow; } </style> </head> <body> <!-- 脫標：脫離了標準文檔流。 小紅的盒子浮動了，脫離了標準流，此時小黃這個給盒子就是標準文檔流中第一個盒子。因此 就渲染到了的左上方。浮動元素"飄起來了"。 --> <div class="box1">小紅</div> <div class="box2">小黃</div> </body> </html>
小紅的盒子浮動了，脫離了標準流，此時小黃這個給盒子就是標準文檔流中第一個盒子。因此就渲染到了的左上方。浮動元素"飄起來了"。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動元素脫標</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 400px; height: 400px; background-color: yellow; } span{ background-color: green; float: left; /* 靠邊 */ width: 300px; /* 浮動使得行內元素支持寬高 */ height: 50px; } </style> </head> <body> <!-- 脫標：脫離了標準文檔流。 小紅的盒子浮動了，脫離了標準流，此時小黃這個給盒子就是標準文檔流中第一個盒子。因此 就渲染到了的左上方。浮動元素飄起來了。 --> <div class="box1">小紅</div> <div class="box2">小黃</div> <!-- span標籤不須要轉成塊級元素，也可以設置寬高。 全部的標籤一旦設置浮動，可以並排，都不區分行內、塊狀元素。 --> <span>span標籤</span> <span>span標籤</span> </body> </html>
在上例看到，設置脫標float:left後，<span>標籤不須要轉成塊級元素，也可以設置寬高。
注意：全部標籤一旦設置浮動，就可以並排；且都不區分行內、塊狀元素，可以設置寬高。
特性二：浮動元素互相貼靠
float屬性值：
1、left：左浮動 左側爲起始，從左向右排列 2、right：右浮動 右側爲起始，從右向左排列 三、none ：不浮動，默認不浮動
左浮動實現貼邊驗證示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動元素互相貼靠</title> <style type="text/css"> span{ background-color: red; float: left; /* 左浮動實現貼邊 */ } </style> </head> <body> <span>文字</span> <span>文字</span> </body> </html>
上例代碼中，<span>是行內元素，這兩個文字顯示在同一行，可是文字間會有間隙。設置浮動後元素牢牢貼靠。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動元素互相貼靠</title> <style type="text/css"> .box1{ width: 100px; height: 400px; background-color: red; float: left; } .box2{ width: 150px; height: 200px; background-color: yellow; float: left; } .box3{ width: 300px; height: 300px; background-color: green; float: left; } </style> </head> <body> <!-- 若是父元素有足夠的空間，那麼三哥緊靠着二哥，二哥緊靠着一哥，一哥靠着邊。 若是沒有足夠的空間，那麼就會靠着一哥，若是沒有足夠的空間靠着1哥，它會本身往邊靠。 --> <div class="box1">一哥</div> <div class="box2">二哥</div> <div class="box3">三哥</div> </body> </html>
若是父元素有足夠的空間，那麼三哥緊靠着二哥，二哥緊靠着一哥，一哥靠着邊。
若是沒有足夠的空間（縮小瀏覽器），那麼就會靠着一哥；若是沒有足夠的空間靠着1哥，它會本身往邊靠。
特性三：浮動元素字圍效果
字圍效果：當div浮動，p不浮動；div擋住了p，div的層級提升，可是p中的文字不會被遮蓋，此時就造成了字圍效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動自圍</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ float: left; } p{ background-color: #666666; } </style> </head> <body> <!--所謂字圍效果： 當div浮動，p不浮動 div擋住了p，div的層級提升，可是p中的文字不會被遮蓋，此時就造成了字圍效果。 關於浮動咱們強調一點，浮動這個元素，咱們初期必定要遵循一個原則： 永遠不是一個盒子單獨浮動，要浮動就要一塊兒浮動。 --> <div> <img src="./images/homesmall.png" alt=""> </div> <p> 123過程很跌宕，火箭很遺憾，爭議很激烈。但最後，一個系列賽仍是返璞歸真， 就是杜蘭特是這個系列賽裏最高級別的天賦，西部就這一張貓。無論裁判給 不給，無論誰防，他能隔着人扔進去。打牌就這麼殘酷，你有2，他有貓。 不用再糾結那27個連續三分不進。人在逆境裏，只能相信本身一直相信的東西 和最常 使用的方式，只能使用能使用的方式。 沒有保羅的中距離，沒轍了。就像好多人昨天說凱爾特人幹嗎投那麼多三分， 由於騎士夾擊內線了啊，你就是拿他給你的，你拿不到，沒有辦法。 </p> </body> </html>
關於浮動強調一點：
浮動元素，咱們初期必定要遵循一個原則——永遠不是一個盒子單獨浮動，要浮動就要一塊兒浮動。
特性四：浮動元素緊湊（收縮）效果
所謂收縮：一個浮動元素若是沒有設置width，那麼自動收縮爲文字的寬度（這點和行內元素很像）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動緊湊</title> <style type="text/css"> div{ float: left; background-color: red; } </style> </head> <body> <!--所謂收縮：一個浮動元素，若是沒有設置width,那麼自動收縮爲文字的寬度 （這點和行內元素很像） --> <!--塊狀元素--> <div> alex </div> </body> </html>
能夠看到<div>這個塊級元素，浮動後，背景顏色和文字寬度一致。
到目前爲止，咱們瞭解了浮動的四個特性：
1.浮動的元素脫標；2.浮動的元素互相貼靠；3.浮動的元素有「字圍」效果；4.收縮的效果。
若是想製做整個網頁，就是經過浮動來實現並排。
5、清除浮動（float）
浮動產生的問題：
父元素不設置高度，子元素設置浮動以後，不會撐開父元素的高度,那麼此時父盒子沒有高度了。若是在次父盒子下面還有一個標準流的盒子，那麼就會影響頁面的佈局。因此咱們要解決浮動帶來的頁面佈局錯亂問題------清除浮動。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮動</title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ width: 1126px; /*子元素浮動，父盒子通常不設置高度*/ /*height: 300px;*/ } .box1{ width: 200px; height: 500px; float: left; background-color: red; } .box2{ width: 300px; height: 200px; float: left; background-color: green; } .box3{ width: 400px; height: 100px; float: left; background-color: blue; } .father2{ /*出現這種問題，咱們要清除浮動帶來的影響*/ width: 1126px; height: 600px; background-color: purple; } </style> </head> <body> <div class="father"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <div class="father2"></div> </body> </html>
因爲子元素浮動，父元素通常不設置浮動，所以次級父元素father2就頂上來了，致使了頁面佈局錯亂。
一、清除浮動——給父盒子設置高度
給父盒子設置高度，能解決浮動問題，但這種方式不靈活。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 400px; /*給父盒子設置高度，能解決浮動問題，但這種方式不靈活，若是哪天公司產品忽然要改，要求父盒子高度變大， 並且不止一個地方，那麼前端工程師不可能去找源碼去手動修改 */ /*固定導航欄*/ height: 40px; } ul{ list-style: none; /* 去除ul默認樣式 */ } div ul li{ float: left; width: 100px; height: 40px; background-color: red; } .box{ width: 200px; height: 100px; background-color: yellow; } </style> </head> <body> <div> <ul> <li>python</li> <li>web</li> <li>linux</li> </ul> </div> <div class="box"> </div> </body> </html>
在上例中，給父盒子<div>或<ul>設置高度確實能夠解決浮動問題。但這種方式不靈活，若是哪天公司產品忽然要改，要求父盒子高度變大，並且不止一個地方，那麼前端工程師不可能去找源碼去手動修改。
二、清除浮動——內牆法（clear: both）
在浮動元素最後加一個空的塊元素，且塊元素不浮動，設置其屬性爲clear：both，以此來清除別人對個人浮動影響。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 400px; } ul{ list-style: none; /* 去除ul默認樣式 */ } div ul li{ float: left; width: 100px; height: 40px; background-color: red; } .box{ width: 200px; height: 100px; background-color: yellow; } .clear{ clear: both; } </style> </head> <body> <div> <ul> <li>python</li> <li>web</li> <li>linux</li> <!--給浮動元素最後面加一個空的div，而且該元素不浮動， 而後設置clear: both 清除別人對個人浮動影響--> <div class="clear"></div> <!--內牆法--> <!--問題：平白無故加了一個div元素，結構冗餘--> </ul> </div> <div class="box"> </div> </body> </html>
該方法平白無故添加了一個div元素，結構冗餘，所以這個方法並不經常使用。
三、清除浮動——僞元素清除法（經常使用）
在浮動元素的父級塊內設置浮動清除類。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>僞元素清除法（經常使用）</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 400px; } ul{ list-style: none; /* 去除ul默認樣式 */ } div ul li{ float: left; width: 100px; height: 40px; background-color: red; } .box{ width: 200px; height: 100px; background-color: yellow; } /*僞元素選擇器——在...以後添加內容*/ .clearfix:after{ /*必需要寫下面這三句話*/ /*content: '';*/ /*clear: both;*/ /*display: block;*/ /*新浪網清除浮動僞元素方法*/ content: '.'; /* content設置'.'內容後會佔用一行內容區域 */ clear: both; display: block; visibility: hidden; /* 隱藏content內容"." */ height: 0; /* 將div.clearfix內容的高度設沒 */ } </style> </head> <body> <div class="clearfix"> <ul> <li>python</li> <li>web</li> <li>linux</li> </div> <div class="box"> </div> </body> </html>
注意在這裏使用的是僞元素選擇器：.clearfix:after在...以後添加內容。清除浮動下面這三句是重點：
.clearfix:after{ /*必需要寫下面這三句話*/ content: ''; clear: both; display: block; }
學習分析新浪網清除浮動的僞元素寫法：(最終寫法，也是最經常使用的消除方法)
.clearfix:after{ /*新浪網清除浮動僞元素方法*/ content: '.'; /* content設置'.'內容後會佔用一行內容區域 */ clear: both; display: block; visibility: hidden; /* 隱藏content內容"." */ height: 0; /* 將div.clea */ }
四、清除浮動——overflow:hidden
這是一種很是方便的方法，給浮動元素的父盒子添加overflow:hidden屬性。
.box{ width: 400px; overflow: hidden; }
能夠看到寫法很是簡單，給父盒子添加屬性便可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>overflow:hidden</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 400px; overflow: hidden; } ul{ list-style: none; /* 去除ul默認樣式 */ } .box ul li{ float: left; width: 100px; height: 40px; background-color: red; } .box2{ width: 200px; height: 100px; background-color: yellow; } </style> </head> <body> <div class="box"> <ul> <li>python</li> <li>web</li> <li>linux</li> </ul> </div> <div class="box2"> </div> </body> </html>
五、overflow介紹
overflow屬性規定當內容溢出元素框時發生的事情。
這個屬性定義溢出元素內容區的內容會如何處理。若是值爲 scroll，不管是否須要，用戶代理都會提供一種滾動機制。所以，有可能即便元素框中能夠放下全部內容也會出現滾動條。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>overflow</title> <style type="text/css"> div{ width: 300px; height: 300px; border: 1px solid red; overflow: scroll; /* 內容變多時出現滾動條 */ } </style> </head> <body> <div> 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 </div> </body> </html>
visible：默認值。內容不會被修剪，會呈如今元素框以外。
hidden：內容會被修剪，而且其他內容是不可見的。
scroll：內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto：若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit：規定應該從父元素繼承 overflow 屬性的值。
6、父子盒子的位置調整
父子兩個盒子，子盒子在父盒子內，若是想自由調整子盒子在父盒子裏的位置。要善於使用父盒子padding設置，而不是使用子盒子的margin。
一、設置子盒子的margin來調製盒子位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ width: 300px; height: 300px; background-color: blue; /*border: 1px solid red;*/ } .xiongda{ width: 100px; height: 100px; background-color: orange; margin-left: 30px; margin-top: 30px; } </style> </head> <body> <!--由於父親沒有border,那麼兒子margin實際上踹的是"流"，踹的是行 因此父親一塊兒掉下來了 --> <div class="father"> <div class="xiongda"> </div> </div> </body> </html>
由於父親沒有border,那麼兒子margin實際上踹的是"流"，踹的是行；因此父親一塊兒掉下來了。
在給父盒子設置border後，掉下來的問題解決，能夠用margin正常調整位置。
二、設置父盒子padding來調製子盒子的位置
一樣是使用上面的代碼，對父盒子的樣式進行修改：
.father{ width: 270px; height: 270px; background-color: blue; padding-top: 30px; padding-left: 30px; /*border: 1px solid red;*/ }
注意：經過設置padding-top和padding-left來移動盒子位置時，要注意在width和height上減去相應的值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ width: 270px; height: 270px; background-color: blue; padding-top: 30px; padding-left: 30px; /*border: 1px solid red;*/ } .xiongda{ width: 100px; height: 100px; background-color: orange; /*margin-left: 30px;*/ /*margin-top: 30px;*/ } </style> </head> <body> <!--由於父親沒有border,那麼兒子margin實際上踹的是"流"，踹的是行 因此父親一塊兒掉下來了 --> <div class="father"> <div class="xiongda"> </div> </div> </body> </html>
相關文章
- 1. 前端之CSS——盒子模型和浮動
- 2. web前端css之盒子模型，浮動，定位
- 3. CSS之盒子模型的浮動
- 4. CSS盒子模型和浮動
- 5. 前端 CSS 盒子模型
- 6. 【前端】CSS盒子模型
- 7. Web前端學習筆記——CSS盒子模型、浮動
- 8. 前端系列之CSS（盒子模型）
- 9. CSS之——盒子模型、盒子的定位與浮動
- 10. CSS 盒子模型、RestCSS、浮動、定位
- 更多相關文章...
- • ionic 浮動框 - ionic 教程
- • W3C CSS 活動 - W3C 教程
- • 委託模式
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端之CSS——盒子模型和浮動
- 2. web前端css之盒子模型，浮動，定位
- 3. CSS之盒子模型的浮動
- 4. CSS盒子模型和浮動
- 5. 前端 CSS 盒子模型
- 6. 【前端】CSS盒子模型
- 7. Web前端學習筆記——CSS盒子模型、浮動
- 8. 前端系列之CSS（盒子模型）
- 9. CSS之——盒子模型、盒子的定位與浮動
- 10. CSS 盒子模型、RestCSS、浮動、定位