1. css中的盒子

1. 块级盒子(block-level box): 负责结构；
2. 内联盒子(inline box): 负责内容；
3. 标记盒子(marker box): display: list-item专门用来放置圆点、数字等项目符号；
4. 外在盒子: 外在盒子负责元素是可以在一行显示，还是换行显示；
5. 容器盒子: 负责宽高、内容的呈现；

• 举例: 按照display的属性值不同，基本会出现如下三种情况：
  • 值为block的元素实际是由外在的块级盒子和内在的块级容器盒子组成；
  • 值为inline-block的元素实际是由外在的内联盒子和内在的块级容器盒子组成；
  • 值为inline的元素实际是由外在的内联盒子和内在的内联级容器盒子组成；

2. width: auto

1. fill-available: 表示撑满可用空间;
2. fit-content: 表示宽度缩小到内容的宽度;
3. min-content: 表示内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度;
4. max-content: 表示内部元素宽度值最大的那个元素的宽度作为最终容器的宽度;

3.css 选择器

1. css选择器:
   • 类型选择符（Element Type Selectors p {color: red}）: 直接使用元素名称来选择所有该类型的元素
   • 类选择符（Class Selectors.highlight { background-color: yellow; }）: 以.开头，后面跟类名，用于选择具有指定类的元素
   • ID选择符（ID Selectors#header { font-size: 2em; }）: 以#开头，后面跟ID名，用于选择具有指定ID的元素（ID应该是唯一的）
   • 通用选择符（Universal Selector* { font-size: 2em; }）: 用*表示，可以选中所有元素
   • 属性选择符（Attribute Selectors[type="text"] { font-size: 2em; }）:用于选择具有特定属性或属性值的元素
2. css选择符:
   • 后代选择符（Descendant Selectorsdiv p { color: green; }）: 通过空格分隔，选择所有特定元素的后代元素;
   • 子选择符（Child Selectorsdiv > p { color: green; }）: 以>分隔，仅选择直接子元素;
   • 相邻兄弟选择符（Adjacent Sibling Selectorsdiv + p { color: green; }）: 以+分隔，选择紧接在另一个元素后的元素;
   • 一般兄弟选择符（General Sibling Selectorsdiv ~ p { color: green; }）: 以~分隔，选择所有指定元素之后的同级元素。
3. css伪类:
   • 伪类选择符（Pseudo-Classesa:hover { color: green; }）: 用于表示元素的特殊状态，如:hover, :active, :first-child等
4. css伪元素:
   • 伪元素选择符（Pseudo-Elementsa::after { color: green; }）:用于选择元素的某个部分或者创建抽象元素，如::before, ::after, ::first-letter等

4.min-width | min-height | max-width | max-height 的初始值

• min-width和min-height 的初始值为auto
• max-width 和 max-height 的初始值为none

5. content属性

• 若干图片原来使用src地址的，我们可以使用content属性把图片内容给置换掉；

6. # counter-*

• counter-increment属性用于将CSS Counters的值增加给定值。
• counter-reset 属性重置计数器的值
• counter-set CSS 属性将 CSS 计数器设置为给定值。它会操作现有计数器的值，并且只有在元素上没有给定名称的计数器时才会创建新计数器。

7. 内联元素的padding属性

• 内联元素的padding在垂直方向同样会影响布局,影响视觉表现，只是因为内联元素没有可视宽度和可视高度，垂直方向的行为表现完全受line-height和vertical-align的影响，所以在视觉上并没有改变和上一行以及下一行之间的间距。
• 内联元素的padding的百分比值无论是水平方向还是垂直方向都是相对于宽度计算的

8. 层叠效果

• 和其他元素发生重叠，但是不影响其他元素的布局效果，称为层叠效果
• 分类
  • 一类是纯视觉效果。不影响外部尺寸，如：box-shadow和outline
  • 另一类是会影响外部尺寸，如：inline元素的padding层叠
  • 区分方式：父容器设置overflow: auto，层叠区域超出父容器的时候是否出现滚动条，出现则会影响尺寸和布局，否则就是纯视觉效果。