一個(gè)盒子我們會(huì)分成幾個(gè)部分：
內(nèi)邊區(qū)(content)
內(nèi)邊距(padding)
邊框(border)
外邊距(margin)內(nèi)容區(qū)
內(nèi)容區(qū)指的是盒子中放置內(nèi)容的區(qū)域，也就是元素中的文本內(nèi)容，子元素都是存在于內(nèi)容區(qū)中的。
如果沒有為元素設(shè)置內(nèi)邊距和邊框，則內(nèi)容區(qū)大小默認(rèn)和盒子大小是一致的。
通過width和height兩個(gè)屬性可以設(shè)置內(nèi)容區(qū)的大小。
width和height屬性只適用于塊元素。-
內(nèi)邊距
內(nèi)邊距指的是元素內(nèi)容區(qū)與邊框以內(nèi)的空間。
默認(rèn)情況下width和height不包含padding的大小。
使用padding屬性來設(shè)置元素的內(nèi)邊距
padding:10px 20px 30px 40px
設(shè)置元素的上、右、下、左四個(gè)方向的內(nèi)邊距。
padding:10px 20px 30px;
設(shè)置元素的上、左右、下四個(gè)方向的內(nèi)邊距。
padding:10px 20px;
設(shè)置元素的上下、左右四個(gè)方向的內(nèi)邊距。
padding:10px
設(shè)置元素上下左右四個(gè)方向的內(nèi)邊距。
同時(shí)在css中還提供了padding-top、padding-right、padding-left、padding-bottom分別用來指定四個(gè)方向的內(nèi)邊距。.box1{ width: 200px; height: 200px; background-color: red; /*設(shè)置邊框*/ border: 10px black solid; padding: 100px 100px 100px 100px; } /*創(chuàng)建一個(gè)子元素box2占滿box1*/ .box2{ width: 100%; height: 80%; background-color: yellow; } 邊框
可以在元素周圍創(chuàng)建邊框，邊框是元素可見框的最外部。
可以使用border屬性來設(shè)置盒子的邊框。
和padding一樣，默認(rèn)width和height并包括邊框的高度。
border：1px red solid
分別指定了邊框的寬度、顏色、樣式。
使用border-top/left/right/bottom分別指定上左右下四個(gè)邊框的方向。
邊框的多種樣式
--none 沒有邊框
--dotted 點(diǎn)線
--dashed 虛線
--solid 實(shí)線
--double 雙線
--groove 槽線
--ridge 脊線
--inset 凹邊
--outset 凸邊
-
外邊距
外邊距是元素邊框與周圍元素相距的空間。
使用margin屬性可以設(shè)置外邊距。
使用margin-top/right/left/bottom為元素設(shè)置四個(gè)方向。
使用margin：0 auto 可以使元素居中。.box1{ width: 200px; height: 200px; background-color: #bfa; border: 10px solid red; margin:10px 20px 30px 40px; } .box2{ width: 200px; height: 200px; background-color: yellow; } -
display
通過display來修改元素的性質(zhì)。
--block:設(shè)置元素為塊元素
--inline：設(shè)置元素為行內(nèi)元素
--inline-block:設(shè)置元素為行內(nèi)塊元素
--none: 隱藏元素
visibility
visibility屬性主要用于元素是否可見
-visible:可見的
-hidden: 隱藏的
overflow
當(dāng)相關(guān)標(biāo)簽里面的內(nèi)容超出了樣式的寬度和高度使，就會(huì)發(fā)生一些奇怪的事情，瀏覽器會(huì)讓內(nèi)容溢出盒子。
可以通過overflow來控制內(nèi)容溢出的情況。
可選值：
*--visible:默認(rèn)值
--scroll:添加滾動(dòng)條
--auto:根據(jù)需要添加滾動(dòng)條
--hidden:隱藏超出盒子的內(nèi)容
文檔流
文檔流指的是文檔中可實(shí)現(xiàn)的對(duì)象在排列時(shí)所占用的位置，
將窗體自上而下分為一行行，并在每行中按從左至右的順序排放元素，即為文檔流。
也就是說在文檔流中元素默認(rèn)會(huì)緊貼到上一個(gè)元素的右邊，如果右邊不足以放下元素，元素則會(huì)另起一行，在新的一行中繼續(xù)從左至右擺放。
這樣一來每一個(gè)塊元素都會(huì)另起一行，那么我們?nèi)绻朐谖臋n流中進(jìn)行布局就會(huì)變得比較麻煩。
浮動(dòng)
所謂浮動(dòng)指的就是使元素脫離原來的文本流，在父元素中浮動(dòng)起來。--none: 不浮動(dòng)
--left:向左浮動(dòng)
--right: 向右浮動(dòng)
clear: 清除浮動(dòng)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動(dòng)</title> <style type="text/css"> .box1{ width: 600px; height: 200px; background-color: red; float: left; } .box2{ width: 200px; height: 200px; background-color: yellow; float: left; } .box3{ width: 200px; height: 200px; background-color: green; float: left; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html> -
內(nèi)聯(lián)素浮動(dòng)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>內(nèi)聯(lián)素的浮動(dòng)</title> <style type="text/css"> .box1{ background-color: #bfa; } .s1{ float: left; width: 100px; height: 100px; background-color: yellow; } </style> </head> <body> <div class="box1">a</div> <span class="s1">hello</span> </body> </html> -
簡(jiǎn)單布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>簡(jiǎn)單布局</title> <style type="text/css"> *{ margin: 0; padding: 0; } .header{ width: 1000px; height: 150px; background-color: yellowgreen; margin: 0 auto; } .content{ width: 1000px; height: 400px; background-color: orange; margin: 10px auto; } .left{ width: 200px; height: 100%; background-color: skyblue; float: left; } .center{ width: 580px; height: 100%; background-color: yellow; float: left; margin: 0 10px; } .right{ width: 200px; height: 100%; background-color: pink; float: left; } .footer{ width: 1000px; height: 150px; background-color: silver; margin: 0 auto; } </style> </head> <body> <div class="header"></div> <div class="content"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> <div class="footer"></div> </body> </html> -
相對(duì)定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相對(duì)定位</title> <style type="text/css"> .box1{ height: 200px; background-color: red; position: relative; } .box2{ width: 200px; height: 200px; background-color: yellow; position: relative; left: 100px; top: 200px; } .box3{ width: 200px; height: 200px; background-color: yellowgreen; } .s1{ position: relative; width: 200px; height: 200px; background-color: yellow; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <span class="s1">我是一個(gè)span</span> </body> </html> -
絕對(duì)定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>絕對(duì)定位</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: yellow; position: absolute; } .box3{ width: 300px; height: 300px; background-color: yellowgreen; } .box4{ width: 300px; height: 300px; background-color: orange; } .s1{ width: 100px; height: 100px; background-color: yellow; position: absolute; } </style> </head> <body> <div class="box1"></div> <div class="box5"> <div class="box4"> <div class="box2"></div> </div> </div> <div class="box3"></div> <span class="s1">我是一個(gè)span</span> </body> </html> -
固定定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定定位</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: yellow; position: fixed; left: 0px; top: 0px; } .box3{ width: 200px; height: 200px; background-color: yellowgreen; } </style> </head> <body style="height: 5000px;"> <div class="box1"></div> <div class="box4" style="width: 300px; height: 300px; background- color: orange; position: relative;"> <div class="box2"></div> </div> <div class="box3"></div> </body>
