标准盒模型
分类: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;
遵循就近原则,代码按照从上到下的顺序运行,后面的代码会覆盖掉前面的代码;
上述写法最终效果