css盒子
1.盒子模型的內容包括：content，padding，border，margin
2.盒子模型分類：
標準盒：正常盒，怪異盒
伸縮盒：新，舊
內邊距：padding
1.內邊距在content外，邊框內
padding 設置所有邊距
padding-bottom 設置底邊距
padding-left 設置左邊距
padding-right 設置右邊距
padding-top 設置上邊距
添加內邊距的時候，只需要設置padding，不需要改變content大小，padding會自動撐開。
邊框：border
border-width 邊框寬度
border-style 邊框樣式
border-color 邊框顏色
border-radius 設置圓角邊框
box-shadow 設置對象陰影
border-image 邊框背景圖片
外邊距：margin
1.圍繞在內容邊框的區域就是外邊距，外邊距默認為透明區域
2.外邊距接受任何長度單位，百分數值
margin 設置所有邊距
margin-bottom 設置底邊距
margin-left 設置左邊距
margin-right 設置右邊距
margin-top 設置上邊距
註意：外邊距合並
3.標準盒子模型
<div class="a">
<div class="b">
</div>
</div>
4.怪異盒子模型
box-sizing：border-box； 固定了盒子的大小，只在盒子內部改變值。
5.css伸縮盒子(舊)
-1.css3引入了一種新的布局模式-Flexbox布局，即伸縮布局盒模型(Flexible Box)，用來提供一個更加有效的方式制定，調整和分布一個容器裏項目布局，
即使它們的大小是未知或者動態的。
-2.Flexbox布局可以輕松的實現屏幕和瀏覽器窗口大小發生變化時，保持元素的相對位置和大小不變。
-3.屬性
box-orient 伸縮盒對象的子元素的排列方式
box-pack 水平居中
box-align 垂直居中
box-flex 伸縮盒對象的子元素如何分配其剩余空間
box-direction 伸縮盒對象的子元素的排列順序是否反轉
例子如下：
html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="styleCss.css" type="text/css"> </head> <body> <div class="container"> <div class="one">d1</div> <div class="two">d2</div> <div class="three">d3</div> </div> </body> </html> css .one{ width: 100px; height: 100px; background-color: blue; -webkit-box-flex: 1; } .two{ width: 100px; height: 100px; background-color: pink; -webkit-box-flex: 1; } .three{ width: 100px; height: 100px; background-color: green; -webkit-box-flex: 1; } .container{ width: 600px; height: 600px; background-color: dimgrey; display: -webkit-box; /*變成盒子*/ -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-box-align: center; -webkit-box-direction: reverse; }
6.css伸縮盒模型（新）
屬性
flex 復合屬性，設置伸縮盒對象的子元素如何分配空間
flex-grow 彈性盒的擴展比率，按比例平均分配
flex-flow 復合屬性，設置伸縮盒對象的子元素排列方式
flex-direction 伸縮盒對象的子元素在父容器中的位置
flex-wrap 設置伸縮盒對象的子元素超出父容器時是否換行
3個div 每個寬度200px，父容器為300px，超出了300px，但是三個div每個都會變成100px，這時需要設置flex-flow：wrap；（即超過部分換行，div會變成3行顯示）
order 設置伸縮盒對象的子元素出現的順序
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .one{ width: 100px; height: 100px; background-color: blue; -webkit-flex-grow: 1; /*第一個div 第三個顯示*/ -webkit-order: 3; } .two{ width: 100px; height: 100px; background-color: pink; -webkit-flex-grow: 1; /*第二個div 第一個顯示*/ -webkit-order: 1; } .three{ width: 100px; height: 100px; background-color: green; -webkit-flex-grow: 1; /*第三個div 第二個顯示*/ -webkit-order: 2; } .container{ width: 600px; height: 600px; background-color: dimgrey; /*變成盒子*/ display: -webkit-flex; -webkit-flex-direction: column; /*超出父容器時換行*/ -webkit-flex-flow: wrap; } </style> </head> <body> <div class="container"> <div class="one">d1</div> <div class="two">d2</div> <div class="three">d3</div> </div> </body> </html>
css盒子