2.4 CSS盒模型

CSS 盒模型规定了处理元素内容、内边距、边框 和 外边距 的方式。

最内部分是元素内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距。

2.4.1常用单位

1. px
2. %相对于父元素
3. vh相对于视口高度，1vh=1%
4. vw相对于视口宽度，1vw=1%
5. vmax选择vw和vh中较小的一个值
6. vmin选择vw和vh中较大的一个值
7. em相对于父元素字体大小倍数
8. rem相对于html字体大小的倍数
9. svh

动态视口单位(*CSS 2023新增)

如果想让一个元素占满全屏高度，可以将高度 height 设置为 100vh，这样你就有了一个随着视口的改变而改变大小的全屏元素，但在移动端事实并非如此，地址栏与工具栏的影响，导致你设置的全屏元素要高于真实的屏幕可见高度。

• 视口单位分为：
  大视口lv*(地址栏与工具栏的收回状态)
  小视口sv*(地址栏与工具栏的展开状态)
  动态视口dv*

大视口的具体单位： lvw、lvh、lvi、lvb、lvmin、lvmax
小视口的具体单位： svw、svh、svi、svb、svmin、svmax
动态视口的具体单位： dvw、dvh、dvi、dvb、dvmin、dvmax

TIP

1. dvw、dvh、dvmin、dvmax 对应 vw、vh、vmax、vmin
2. viViewport Inline代表文档的内联方向。在水平书写方向上，这对应于视口的宽度，而在垂直书写方向上，这表示视口的高度。记住 inline 方向的简单方法是记住它与文本的方向相同
3. vbViewport block 代表文档的块方向。这与 vi 水平书写方向相反，这将对应于视口高度，而在垂直文档中，这将表示视口的宽度

2.4.2元素的尺寸:

height:设置元素的高度。

width:设置元素的宽度。

max-height:设置元素的最大高度。

max-width 设置元素的最大宽度。

min-height 设置元素的最小高度。

min-width 设置元素的最小宽度。

TIP

当属性值用百分比时是相对于父元素的尺寸来说的。 最大最小宽高等动态控制详见专题：移动端适配-媒体查询

aspect-ratio 设置元素的纵横比。

box-sizing：

content-box（默认值）仅包括内容的宽高
border-box 内容的宽高+padding+border
inherit 继承父元素的属性值

padding:元素的内边距:

padding-top上内边距。
padding-right右内边距。
padding-bottom下内边距。
padding-left左内边距。
padding 属性接受长度值或百分比值，但不允许使用负值。

padding * 同时设定四个边距
padding ** 分别设定上下、左右边距
padding *** 分别设定上、左右、下边距
padding **** 分别设定上、右、下、左边距

border:元素的边框，是围绕元素内容和内边距的一条或多条线。
依次设置border-width（宽度），样式（border-style），颜色（border-color）。
border-style可选值solid 实线/dotted 点状边框/double双线

margin:元素的外边距,围绕在元素边框的空白区域是外边距。

margin-top 上外边距。
margin-right 右内边距。
margin-bottom 下外边距。
margin-left 左外边距。
margin 属性接受长度值或百分比值，允许使用负值。

margin * 同时设定四个外边距
margin ** 分别设定上下、左右外边距
margin *** 分别设定上、左右、下外边距
margin **** 分别设定上、右、下、左外边距

overflow 如果内容溢出了元素内容区域，是否对内容的边缘进行裁剪。
overflow-x 如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。
overflow-y 如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。

visible 不裁剪内容，可能会显示在内容框之外。
hidden 裁剪内容 - 不提供滚动机制。
scroll 裁剪内容 - 提供滚动机制。
auto 如果溢出框，则应该提供滚动机制。

WARNING

• 外边距的合并

外边距合并指的是，当两个块元素垂直外边距相遇时，它们将形成一个外边距，
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

• 行内元素没有上下外边距，没有上内边距。

• 对于两个嵌套关系的块元素，假如父元素没有上内边距和边框，则父元素的上外边距和儿子的上外边距发生合并，解决方案

1. 给父元素加overflow:hidden
2. 给父元素加内边距或上边框。

• 内外边距：绝大多数情况可以混用，建议优先使用width>padding>margin

• margin和padding设置百分比的时候，是指相对于最近的块级父元素width（非总宽度）的百分比的计算,利用此方法可以根据宽度动态设置高度。