前端学习：CSS核心属性--盒子模型知识点

CSS核心属性–盒子模型知识点

盒子模型

盒子：即为容器，任何一个标签都可以称之为一个盒子，只不过是盒子的显示形式，大小不一样仅此而已。
盒子模型：用来设置盒子的大小，占位，间距的问题，盒子模型有四个部分组成的，分别是：
content：内容区域
padding：内边框区域，即内容和边框之间
border：边框区域
margin：外边距区域

内容区域

内容区域即为显示区域，一般情况是指宽度高度，但是有一些元素（文本修饰类型）是不是傻子宽度高度。
如：div、p、ul、ol、dl、dt、dd、h1-h6 能设置宽度高度

padding 内边距区域

取值：
padding：v1 v2 v3 v4；
分别实现四个方向的内边距，即上，右，下，左。

如果是设置一个方向即：
padding-方位词
padding-top：上内边距
padding-bottom：下内边距
padding-right：右内边距
padding-left：左内边距

注意：

• 添加了内边距之后盒子会变大，内边距谁撑开盒子的大小，会占据位置。
• 背景颜色会蔓延到内边距区域。

margin 外边距区域

取值：
margin：v1 v2 v3 v4；
分别实现四个方向的外边距，即上，右，下，左。

如果是设置一个方向即：
margin-方位词
margin-top：上外边距
margin-bottom：下外边距
margin-right：右外边距
margin-left：左外边距

注意：

• 添加了外边距之后盒子会变大，外边距谁撑开盒子的大小，会占据位置。
• 背景颜色不会蔓延到外边距区域。

间距的特殊情况

• 可以取值为0 。
• margin可以取值为负数 。
• padding不能取值为负数 。
• margin:0 auto; ==元素设置水平居中显示，前提是容器是有宽度的。