盒子模型.png
盒子模型
1.content:内容
2.padding:内容与边框
padding: 设置所有边距
padding-right: 设置右边距
padding-top: 设置上边距
padding-left: 设置左边距
padding-bottom: 设置底边距
3.border: 边框
border-style: 定义了10个不同的非继承样式，包括none
边框单边样式
border-top-style:
border-left-style:
border-right-style:
border-bottom-style:
border-width:
单边框宽度
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