CSS盒模型:
网页中所有的元素都是矩形的,可以看做是一个个盒子。
网页由多个盒子组成。
盒子:边框+内边距+内容区域+外边距组成。


网页就是多个盒子嵌套排列的结果。
内边距出现在内容区域的周围,当给元素加背景或背景图像时,该元素的背景色或背景图像也将出现在内边距中。
边框属性:
上边框:border-top
下边框:border-bottom
边框样式合写:例
border-top:宽度 样式 颜色
可以用一行CSS设置上下左右所有的边框的样式 border:10px dotted blue;
去图片边框的写法:border:0 none;
内边距属性:padding-top(上内边距 ) padding-right(右内边距) padding-bottom(下内边距)
padding-left(左内边距) padding(上内边距)
结合起来写法:padding:上右下左。
外边距:margin属性用于设置外边距。
结合用法:(margin:上右下左)。
块级元素水平居中代码: margin:0 auto


外边距合并:
当两个块级元素,上面的块级元素拥有下外边距,下面的块级元素拥有上外边距,两个盒子上下的距离会取两个边距的最大值,而不是进行加和处理。
嵌套块元素垂直外边距的合并:

网友评论