标准盒模型

标准盒模型

分类：content padding border margin 分别对应内容部分、内边距部分、边框部分和外边距部分

元素的大小计算：

元素的宽：width + 左右border + 左右padding

元素的高：height + 上下border + 上下padding

1、content

指的是内容，包括盒子的内容部分

content = height + width

2、border

第一种写法

border: 10px solid green;

可以同时设置四个边框的大小，分别对应宽度、属性和颜色；

第二种写法

border-top: 10px solid yellow;
​
border-right: 10px solid red;
​
border-bottom: 10px solid pink;
​
border-left: 10px solid green;

分别对应上、右、下、左，分别设置四个边框；

第三种写法

border: 10px solid green;
​
border-bottom: 10px solid pink;

遵循就近原则，代码按照从上到下的顺序运行，后面的代码会覆盖掉前面的代码；

上述写法最终效果