盒子模型.png
盒子模型
1.content:內(nèi)容
2.padding:內(nèi)容與邊框
padding: 設(shè)置所有邊距
padding-right: 設(shè)置右邊距
padding-top: 設(shè)置上邊距
padding-left: 設(shè)置左邊距
padding-bottom: 設(shè)置底邊距
3.border: 邊框
border-style: 定義了10個不同的非繼承樣式倒淫，包括none
邊框單邊樣式
border-top-style:
border-left-style:
border-right-style:
border-bottom-style:
border-width:
單邊框?qū)挾? border-top-width:
border-left-width:
border-right-width:
border-bottom-width:
border-color:
單邊框顏色
border-top-color:
border-left-color:
border-right-color:
border-bottom-color:
CSS3邊框：
border-radius: 圓角邊框
box-shadow: 邊框陰影
border-image: 邊框圖片
4.margin: 上下左右 外邊距 盒子間縫隙
Margin-top
Margin-right
Margin-bottom
Margin-left
content的 width height
使用：
{
Margin-top：
Margin-right：
Margin-bottom：
Margin-left：
}
或{
margin：30px,50px,20px,50px;上右下左
border:樣式室抽、厚度纫谅、顏色用狱，空格分隔
}
盒子模型有display屬性跳座，通過display屬性改變HTML元素的默認顯示類型
display值很多鸯乃，常用的：block/inline/none