1、 border:边框的宽度 样式 颜色;
方向为:上右下左
连写时样式不能省略
2、内边距属性
边框与内容之间的距离
给标签设置内边距之后,标签占有的宽度和高度也会发生变化,设置内边距后会有背景颜色
3、外边距属性margin
标签和标签之间的距离就是外边距,没有背景颜色
外边距合并现象
默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的
关于margin-top问题:原因根据W3C盒子模型的规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
解决方式最常用的:给父盒子加border 或者给父盒子添加padding-top
4. box-sizing属性
这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
box-sizing取值
content-box(和不加相同)
元素的宽高 = 边框 + 内边距 + 内容宽高
border-box(进行自动调整 width 和 height 不变)
元素的宽高 = width/height的宽高
增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度