盒子模型概述
盒子模型的内容范围包括:margin、border、padding、content
内边距padding
1.在content外,边框内部
2.内边距属性
边框border
1.CSS边框
可以用于任何元素
2.边框的样式
border-style:定义10个不同的非继承样式,包括none
3.边框的单边样式
border-top-style
border-left-style
border-right-style
border-bottom-style
4.边框的宽度
border-width
5.边框单边宽度
border-top-width
border-left-width
border-right-width
border-bottom-width
6.边框的颜色
border-color
7.边框的单边颜色
border-top-color
border-left-color
border-right-color
border-bottom-color
8.CSS3边框
border-radius:圆角边框
box-shadow:边框阴影
border-image:边框图片
box-shadow: 10px 10px 5px #FF0000
1
后面四个参数的意思是:向右10px,向下10px,阴影清晰度是5px,颜色为红色
外边距margin
围绕在内容边框的区域,外边距默认为透明区域,结束任何长度单位、百分数值
外边距合并
合并就是叠加的概念
两个相邻的外边距会叠加在一起,并且两个距离为值多的一方,比如两个相邻的元素margin都是100px,那么这两个元素之间的距离不是200px,而是100px
原文链接:https://blog.csdn.net/biandous/article/details/53312819