一、盒模型
包含元素内容、内边框、边框、外边框
1、元素的内容
width和height
2、内边框：
边框到内容之间的距离
1.简写：padding：10px；
四个方向统一效果
padding：5px 10px；
上下 左右
padding：5px 10px 15px；
上 左右 下
padding：5px 10px 15px 20px；
上 右 下 左
2.单边设置：
padding-top：5px；
padding-right：10px；
padding-bottom：15px；
padding-left：20；
3、边框
1.简写方式：
border：width style color；
width：边框的粗细
style：边框的样式
实线：solid
虚线：datted dashed
2.单边设置
border-方向：width style color；
方向：top right bottom left
上 右 下 左
3.边框倒角
简写：border-radius：10px----------10%
单角设置：
border-top-left-radius：5px； 左上角
border-top-right-radius：5px； 右上角
border-bottom-left-radius：5px； 左下角
border-bottom-left-radius：5px； 右下角
4、外边距
位于元素边框以外的距离
1.简写：margin：10px；
四个方向统一效果
margin：5px 10px；
上下 左右
margin：5px 10px 15px；
上 左右 下
margin：5px 10px 15px 20px；
上 右 下 左
2.单边设置：
margin-top：5px；
margin-right：10px；
margin-bottom：15px；
margin-left：20；
外边距合并
当垂直外边距相遇时，会形成一个外边距，以较大的为准
取值为auto时
当块级元素（设置固定宽度）设置左右外边距为auto时，当前元素会在父元素中水平居中
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
