一個盒子我們會分成幾個部分：
內(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兩個屬性可以設(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è)置元素的上功舀、右萍倡、下、左四個方向的內(nèi)邊距辟汰。
padding:10px 20px 30px;
設(shè)置元素的上列敲、左右、下四個方向的內(nèi)邊距帖汞。
padding:10px 20px;
設(shè)置元素的上下戴而、左右四個方向的內(nèi)邊距。
padding:10px
設(shè)置元素上下左右四個方向的內(nèi)邊距翩蘸。
同時在css中還提供了padding-top所意、padding-right、padding-left催首、padding-bottom分別用來指定四個方向的內(nèi)邊距扶踊。.box1{ width: 200px; height: 200px; background-color: red; /*設(shè)置邊框*/ border: 10px black solid; padding: 100px 100px 100px 100px; } /*創(chuàng)建一個子元素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分別指定上左右下四個邊框的方向杂抽。
邊框的多種樣式
--none 沒有邊框
--dotted 點線
--dashed 虛線
--solid 實線
--double 雙線
--groove 槽線
--ridge 脊線
--inset 凹邊
--outset 凸邊
-
外邊距
外邊距是元素邊框與周圍元素相距的空間诈唬。
使用margin屬性可以設(shè)置外邊距。
使用margin-top/right/left/bottom為元素設(shè)置四個方向缩麸。
使用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)容超出了樣式的寬度和高度使杭朱，就會發(fā)生一些奇怪的事情阅仔，瀏覽器會讓內(nèi)容溢出盒子。
可以通過overflow來控制內(nèi)容溢出的情況弧械。
可選值：
*--visible:默認(rèn)值
--scroll:添加滾動條
--auto:根據(jù)需要添加滾動條
--hidden:隱藏超出盒子的內(nèi)容
文檔流
文檔流指的是文檔中可實現(xiàn)的對象在排列時所占用的位置八酒，
將窗體自上而下分為一行行，并在每行中按從左至右的順序排放元素刃唐，即為文檔流羞迷。
也就是說在文檔流中元素默認(rèn)會緊貼到上一個元素的右邊，如果右邊不足以放下元素画饥，元素則會另起一行衔瓮，在新的一行中繼續(xù)從左至右擺放。
這樣一來每一個塊元素都會另起一行抖甘，那么我們?nèi)绻朐谖臋n流中進(jìn)行布局就會變得比較麻煩热鞍。
浮動
所謂浮動指的就是使元素脫離原來的文本流，在父元素中浮動起來衔彻。--none: 不浮動
--left:向左浮動
--right: 向右浮動
clear: 清除浮動<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動</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)素浮動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>內(nèi)聯(lián)素的浮動</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> -
簡單布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>簡單布局</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> -
相對定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相對定位</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">我是一個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: 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">我是一個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>
