前端-阶段01-CSS-Day07 | 昕昕-未来不是梦

type

status

date

slug

summary

1 盒子模型 box model

1.1 盒子模型的组成

① 盒子模型的相关概念

内容（content）： 内容是元素的核心区域，元素中的文本内容和后代元素都显示在内容上。

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

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

外边距（margin）： 在元素边界之外，是与相邻元素的距离。

② 影响盒子大小的因素

1.2 盒子中的内容区域

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

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

注意：最大最小宽高一般不与固定宽高一同设置！

③ 元素的默认宽高

行内元素：

行内块元素：

块级元素：

1.3 盒子的内边距 padding

① 相关 CSS 属性

CSS 属性名	功能	属性值
padding-left	左内边距	长度
padding-right	右内边距	长度
padding-top	上内边距	长度
padding-bottom	下内边距	长度
padding	上下左右内边距	多个长度空格分隔

② padding 设置规则

padding 值设置的规则：

padding 复合属性的设置规则：

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

1.4 边框 border

CSS 属性名	功能	属性值
border-style	边框风格	none：无风格。 solid：实线。 dashed：虚线。 dotted：点线。 double：双实线。
border-color	边框颜色	颜色，默认值是文字颜色
border-width	边框宽度	长度，默认值是3px
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.5 外边距 margin

① 相关 css 属性

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

② margin 设置规则

margin 值设置的规则：

margin 复合属性的设置规则：

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

③ margin 塌陷

什么是 margin 塌陷？

如何解决 margin 塌陷？

④ margin 合并

什么是 margin 合并？

如何解决 margin 合并？

1.6 内容溢出

CSS 属性名	功能	属性值
overflow	设置溢出内容的显示方式	visible：显示，默认值。 hidden：隐藏。 scroll：滚动条。 auto：自动。
overflow-x	x轴方向溢出内容的显示方式	同上
overflow-y	y轴方向溢出内容的显示方式	同上