边框线border
border 边框：元素边框的样式
单样式:
- border-width 大小
- border-style 样式
- border-color 颜色
复合样式:大小 类型 颜色
- border :width style color
边框类型 ： border-style
- solid 实线
- dashed 虚线 （有兼容问题）
- dotted 点线 （有兼容问题）
- double 双边框
边框类型：
- border-top 左边框
- border-right 右边框
- border-bottom 下边框
- border-left 左边框
去除边框: border:none ;
=>padding会改变盒子大小
color颜色:的多种值
十六进制 （ #00ff99 ）
rgb（ 0-255,0-255,0-255 ） -三个值 r-red红 g-green绿 b-blue蓝
rgba( 0-255,0-255,0-25,0-1 ) 四个值 r-red红 g-green绿 b-blue蓝 a-透明度
margin 外边距
单样式:
- margin-top :顶部外距离
- margin-right :右边外距离
- margin-bottom :底部外距离
- margin-left :左边外距离
复合样式：
- 四个值： margin :上 右 下 左
- 三个值： margin :上 左右 下
- 二个值： margin :上下 左右
- 一个值： margin : 四个方向相同的值；
- 盒子水平居中：
margin: auto || margin:top auto || margin:top auto bottom
padding 内边距
单样式:
- padding-top :顶部内距离
- padding-right :右边内距离
- padding-bottom :底部内距离
- padding-left :左边内距离
复合样式：
扫描二维码关注公众号，回复：
4208020 查看本文章
- 四个值： padding :上 右 下 左
- 三个值： padding :上 左右 下
- 二个值： padding :上下 左右
- 一个值： padding : 四个方向相同的值；
=>padding会改变盒子大小
盒子模型计算公式
盒子宽度 = 左border+左padding+width+右padding +右border
盒子高度 = 上border+上padding+height+下padding+下border