【CSS】＜Cascading Style Sheets＞CSS盒子模型

目录

一、盒模型（Box Model）概述：

二、盒模型（Box Model）组成：

1.内容区（Content）：

2.内边距（Padding）：

 Padding样式：​

 3.边框（Border）：

边框样式： 

4.外边距：

外边距样式：

三、盒模型（Box Model）布局：

1.盒模型的水平布局：

2.盒模型的垂直布局：

3.外边距折叠：

嵌套块元素垂直外边距的合并：

4.行内元素盒模型：

display设置元素显示类型：

visability设置元素显示类型：

四、盒子大小：

---

一、盒模型（Box Model）概述：

        在CSS将页面中的所有元素都设置为一个矩形的盒子，将元素设置为盒子之后，CSS网页布局就是对盒子位置的摆放。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

        看透网页布局的本质： 把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

---

二、盒模型（Box Model）组成：

        所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。 

1.内容区（Content）：

        元素中的所有子元素和文本内容都在内容区中排列。内容区的大小由width和height两个属性来设置。      

• width：设置内容区的宽度。
• heidgt：设置内容区的高度。

2.内边距（Padding）：

CSS padding（填充） | 菜鸟教程 (runoob.com)https://www.runoob.com/css/css-padding.html        内容区和边框之间的距离是内边距，内边距的设置会影响到盒子的大小，背景色会延伸到内边距上（属于盒子内部）。

盒子子的大小：内容区  + 内边距 + 边框 

 Padding样式：

 3.边框（Border）：

CSS Border(边框) | 菜鸟教程 (runoob.com)https://www.runoob.com/css/css-border.html        边框属于盒子的边缘，边框属于盒子内部，边框的大小会影响整个盒子的大小。要设置边框，需要设置边框的三个所有样式：

• 边框宽度（border-width）
• 边框颜色（border-color）
• 边框样式（border-style）

边框样式： 

4.外边距：

CSS margin(外边距) | 菜鸟教程 (runoob.com)https://www.runoob.com/css/css-margin.html        外边距不会影响盒子可见框大小（不会影响盒子本身大小），但是外边距会影响盒子的位置。margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

外边距样式：

---

三、盒模型（Box Model）布局：

1.盒模型的水平布局：

        在水平方向上，一个元素在其父元素中的水平方向位置由以下几个元素决定：

• margin-left
• border-left
• padding-left
• width
• padding-right
• border-right
• margin-right

        父元素的宽度值必须等于所有子元素上述所有属性值之和，浏览器在解析时，会自动调整元素属性的值，使其满足条件。

        可以通过设置auto值，来使浏览器在动态调整时，可以调整指定的属性：

• width（width的默认值就是auto）
• margin-left
• margin-right

        如果将一个宽度设置为auto，则宽度会被调整至最大。三个值都是auto，则width的值被动态调整到最大，其它都是0，所以一般设置margin为auto，指定width的值！！！

2.盒模型的垂直布局：

        默认情况下，父元素的高度被内容撑开！如果父元素设置了指定高度，子元素高度超过父元素高度，则会出现子元素内容溢出！

        使用overflow来处理元素溢出问题。CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

CSS 布局 Overflow | 菜鸟教程 (runoob.com)https://www.runoob.com/css/css-overflow.html属性值：

3.外边距折叠：

        当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。解决方案： 避免就好了。

嵌套块元素垂直外边距的合并：

        对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的绝对值较大者，即使父元素的上外边距为0，也会发生合并。

        父子元素相邻外边距，子元素的外边距会传递给父元素。

解决方案：

• 可以为父元素定义1像素的上边框或上内边距。
• 可以为父元素添加overflow:hidden。

4.行内元素盒模型：

• 行内元素不支持设置宽度和高度，只能由内容大小撑开！
• 行内元素可以设置padding，但垂直方向padding不会影响页面布局。
• 行内元素可以设置border，垂直方向border不会影响页面布局。
• 行内元素可以设置margin，垂直方向margin不会影响页面布局。

display设置元素显示类型：

CSS display 属性 | 菜鸟教程 (runoob.com)https://www.runoob.com/cssref/pr-class-display.html属性值：

 行内块元素：既可以设置宽高，又不会独占一行！

visability设置元素显示类型：

CSS visibility 属性 | 菜鸟教程 (runoob.com)https://www.runoob.com/cssref/pr-class-visibility.html属性值：

•  visible：默认值，元素在页面种正常显示。
• hidden：元素在页面种隐藏，不显示，但依然占据页面位置。

---

四、盒子大小：

默认情况下，盒子可见框大小由内容区、内边距、边框共同决定！

• box-sizing：用来设置盒子尺寸的计算方式（设置width和height的作用）
  • content-box：默认值，宽度和高度用来设置内容区的大小
  • border-box：宽度和高度用来设置整个盒子可见框大小。width和height指的是内容区和内边距的边框的总大小。

CSS3 box-sizing 属性 | 菜鸟教程 (runoob.com)https://www.runoob.com/cssref/css3-pr-box-sizing.html属性值：