(七).盒子模型，样式继承，元素默认样式

1 盒子模型深入讲解

1.1 盒子模型的组成

① 盒子模型的相关概念

1. 每个元素都可以比作成一个盒子，页面布局就是盒子的排列和堆砌
2. 盒子模研究的概念： 内容、内边距、边框、外边距

内容（content）： 内容区域是元素中最主要的区域，元素中的文本内容以及后代元素都显示在内容区域。

内边距（padding）： 是内容与元素边界（边框）的距离。

边框（border）： 在元素的边界上。

外边距（margin）： 是元素与父元素或其他兄弟元素的距离。

② 影响盒子大小的因素

1. 元素的总宽总高 = 内容宽高 + 内边距 + 边框宽度
2. 外边距主要影响元素（盒子）的位置

1.2 盒子中的内容区域

① 设置内容区域的宽高的 CSS 属性

CSS 属性名	功能	属性值
width	固定宽度	长度
max-width	最大宽度	长度
min-width	最小宽度	长度
height	固定高度	长度
max-height	最大高度	长度
min-height	最小高度	长度

② 设置内容宽高的规则

1. 设置最小最大宽高更多地用于限制默认计算的宽高
2. 最小最大宽高一般不与固定宽高一起设置

③ 元素的默认宽度

行内元素和行内块元素：

默认宽度和高度都是被里面的内容撑开

块级元素

默认高度被内容撑开
默认宽度根据父元素内容的宽度进行计算

块级元素的默认宽度的计算规则：

元素的默认总宽度 = 父元素内容宽度 - 该元素的左右外边距
元素的默认内容宽度 = 父元素内容宽度 - 该元素的左右外边距 - 该元素的左右边框 - 该元素的左右内边距

1.3 盒子的内边距 padding

① 相关 CSS 属性

CSS 属性名	功能	属性值
padding-left	左内边距	长度
padding-right	右内边距	长度
padding-top	上内边距	长度
padding-bottom	下内边距	长度
padding	复合属性

② padding 设置规则

padding 复合属性的设置规则：

/* 所有方向的内边距 */
padding: 20px;
 
/* 上下  左右  */
padding: 30px 15px;
 
/* 上 左右 下 */
padding: 15px 20px 10px;
 
/* 上 右 下 左 */
padding: 10px 20px 30px 40px;

padding 值设置的规则：

1. 使用百分比设置内边距，不论任何方向的内边距参照的都是父元素内容的宽度
2. 内边距的值不能是负值（⭐️）

不同显示模式的元素设置内边距：

1. 块级元素、行内块元素可以完美设置各个方向的内边距。
2. 行内元素可以完美设置左右内边距，上下内边距设置不完美。

1.4 边框 border

CSS 属性名	功能	属性值
border-style	边框风格	none：没有边框。 solid：实线。 dashed：虚线。 dotted：点线。 double：双实线。 hidden：边框隐藏
border-color	边框颜色	颜色
border-width	边框宽度	长度（不能用百分比）
border	复合属性
border-left-style border-left-color border-left-width border-left border-right-style border-right-color border-right-width border-right border-top-style border-top-color border-top-width border-top border-bottom-style border-bottom-color border-bottom-width border-bottom	具体不作介绍

边框有默认宽度(1.5px)和颜色，只是没有样式

1.5 外边距 margin

① 相关 css 属性

CSS 属性名	功能	属性值
margin-left	左外边距	长度
margin-right	右外边距	长度
margin-top	上外边距	长度
margin-bottom	下外边距	长度
margin	复合外边距	长度

设置上外边距和左外边距，影响的是本元素的位置

设置下外边距和右外边距，影响的是兄弟元素的位置

② margin 设置规则

margin 复合属性的设置规则：

1个值： 4个方向一起设置
2个值： 上下 左右
3个值： 上 左右 下
4个值： 上 右 下 左

margin 值设置的规则：

1. 使用百分比设置外边距，不论任何方向的外边距参照的都是父元素内容的宽度
2. 外边距可以设置负值 （⭐️）
3. 块级元素的左右外边距同时设置为 auto，该元素在父元素中水平居中

不同显示模式的元素设置外边距：

1. 块级元素、行内块元素可以完美设置各个方向外边距
2. 行内元素只能设置左右外边距，上下外边距设置无效

③ margin 塌陷

什么是 margin 塌陷？

1、 第一个子元素的上外边距和最后一个子元素的下外边距，会塌陷到父元素上
2、 只有块级元素的上下外边距才会发生塌陷。

如何解决 margin 塌陷？

1. 方案一： 给父元素设置边框
2. 方案二： 给父元素设置内边距
3. 方案三： 给父元素设置 overflow:hidden;
 
我理解就是就是将子元素与父元素各自的外边距分开

④ margin 合并

什么是 margin 合并？

1. 上面兄弟元素的下外边距与下面兄弟元素的上外边距会合并，两者之间页面展示的距离取较大的外边距
2. 只有块级元素的上下外边距才会发生合并

如何解决 margin 合并？

不需要解决！

1.6 内容溢出

CSS 属性名	功能	属性值
overflow	设置溢出内容的显示方式	visible：显示，默认值。 hidden：隐藏。 auto：如果溢出显示滚动条。 scroll：不论是否溢出都显示滚动条。
overflow-x	水平方向溢出内容的显示方式	同上
overflow-y	垂直方向溢出内容的显示方式	同上

auto 和 scroll 的区别：

1. auto：如果内容不溢出没有滚动条，内容溢出有滚动条
2. scroll：不论是否溢出都显示滚动条。

1.7 隐藏元素

display 属性：

display: none;

彻底隐藏元素，不占据任何位置！

visibility 属性：

visibility: hidden;

元素虽隐藏但是仍然占据位置！

2 样式继承和默认样式

2.1 样式继承

1. 后代元素可以继承祖先元素上设置的样式
2. 那些样式可以继承？
   字体样式： font-size font-family font-weight font-style font
   文字颜色： color
   文本样式： text-align text-indent text-decoration line-height letter-spacing word-spacing
   注意： vertical-align 该样式不可以被继承

2.2 默认（自带）样式

body: 自带8px的外边距
h1~h6：自动上下外边距、粗体字、字体大小
p：自带上下外边距
ul、ol：自带左内边距、上下外边距
a: 自带下划线、文字颜色、鼠标光标
....

2.3 继承的样式、默认（自带）的样式、直接设置的样式

直接设置的样式 > 默认（自带）的样式 > 继承的样式