css-盒子模型

如图为CSDN播客撰写页面的盒子模型：

右键-检查-Computed中查看该模型图

盒子边框：border

如图：

代码：

属性：
border-width：边框的粗细，单位是px。
border-style：边框的样式
样式属性：none：无（默认值）
solid：单实线
dashed： 虚线
dotted：点线
border-color： 边框的颜色

综合写法：border：边框的粗细 边框的样式 边框的颜色；

也可以给边框的一个边或某几个边定义样式
方法是需要加上方位词（top，left，bottom，right），比如上边框（其他同理）：
border-top-style；
border-top-width；
border-top-color；
border-top：宽度 样式 颜色；

内边距：padding

指边框与内容之间的距离。

运行效果：

padding也有方位词属性：

padding-top：上内边距；
padding-left：左内边距；
padding-right：右内边距；
padding-bottom：下内边距；

当padding跟具体数值时，不同个数的值代表意义不一样；

复合写法：
(注意书写顺序)
一个值： padding：10px；
表示上下左右内边距为10px。

两个值：padding：5px 10px；
表示上下内边距为5px，左右内边距为10px。

三个值：padding：5px 10px 15px；
表示上内边距为5px，左右内边距为10px，下内边距为15px。

四和值：padding：5px 10px 15px 20px；
表示上内边距为5px，右内边距为10px，下内边距为15px，左内边距为20px。

盒子尺寸计算:

内边距会撑大盒子所以
盒子的宽度=设定的宽度+padding左右值+边框左右值；
盒子的高度=设定的高度+padding上下值+边框上下值；
如果盒子不设置宽度则paddin左右值不会撑开盒子。

外边距：margin

指盒子与盒子之间的距离。

可以和padding对比记忆：
都是四个方位词
margin-top:上外边距
margin-left:左外边距
margin-right:右外边距
margin-bottom:下外边距

margin的复合写法和padding相同。

给左边的盒子设置margin-right：50px；

运行结果：

让一个有高度有宽度的盒子水平居中：margin：0 auto；或者margin：auto；