宽高样式:

1. width和height属性:

1.1. 定义和用法

width和height 属性设置元素的宽度和高度。

2.1. 说明

1. 这个属性定义元素内容区的宽度，在内容区外面可以增加内边距、边框和外边距。
2. 行内元素会忽略这个属性。
3. 默认值：auto
4. 继承性：no
5. 版本：CSS1
6. JavaScript 语法:_object_.style.width="50px"

1.2. 可能的值

1. auto 默认值。浏览器可根据内容计算出实际的宽度。
2. [child::自动宽度]
3. 如20em 使用 px、cm、em等单位定义宽度。
4. % 定义基于包含块（父元素）宽度或高度的百分比宽度。
   1. 如%50
5. inherit 规定应该从父元素继承 width 属性的值。

1.3. 百分比高度的生效条件

child::

百分比高度的生效条件

• CSS
• 小结：
  • 普通流元素 → 依赖父级有确定尺寸；
  • 绝对定位元素 → 通常也能计算百分比高度。
• 对于处于普通文档流中的元素，设置height:%要想生效，其父级必须有一个可计算的高度（例如固定height/min-height，或由vh等确定）。如果父级高度由内容自然撑开（计算为auto），那么子元素的百分比高度计算值也会被视作auto，无法参与计算。
• 使用位置布局中的绝对定位（position:absolute/fixed）时，即使祖先元素的height为auto，定位元素的百分比高度也有明确的计算基准（其包含块由定位规则确定），因此可计算。

指向原始笔记的链接

2. max-width和min-width属性:

2.1. 定义:

决定了元素的最大宽度和最小宽度, 常搭配width:auto使用

2.2. 可能的取值:

1. 如20em 使用 px、cm、em等单位定义宽度。
2. % 定义基于包含块（父元素）宽度的百分比宽度。
   1. 如%50
3. inherit 规定应该从父元素继承 width 属性的值。

相关样式

• child::边框
• child::内边距
• child::外边距

实际应用

child::设置宽高比 child::width auto 与 width 100% 的区别