Mydoc

外观

CSS属性计算过程和视觉格式化模型 ​

CSS属性计算过程 ​

CSS属性的计算过程包括以下几个关键步骤：

  1. 确定声明值：浏览器会从所有相关的CSS规则中收集属性声明,当重复声明时，会使用最后一个声明的值。
  2. 层叠：当多个规则应用于一个元素且存在相同的属性时，CSS会使用层叠规则来确定哪个规则更优先。
    • 0.！important声明的特异性最高，为无穷大。
    • 1.对于每个元素，其内联样式的特异性为 1,0,0,0。
    • 2.对于每个ID选择器，特异性为 0,1,0,0。
    • 3.对于每个类选择器，属性选择器或伪类 0,0,1,0。
    • 4.对于每个元素选择器或伪元素 0,0,0,1。
    • 5.子选择器，相邻选择器，通配符和继承的样式对特异性没有影响。
    • 6.在相同优先级的情况下，后出现的规则会覆盖先出现的规则。
  3. 继承：某些属性会从父元素继承到子元素，如果子元素未指定值，则可能继承父元素的值。
    • 可以继承的属性（字体设置、颜色、行高、文本对齐）
    • color：用于设置文本颜色。
    • font-family：用于设置字体。
    • font-size：用于设置字体大小。
    • font-style：用于设置字体样式（如斜体）。
    • font-weight：用于设置字体粗细。
    • line-height：用于设置行高。
    • text-align：用于设置文本对齐方式。
    • text-indent：用于设置文本缩进。
    • letter-spacing：用于设置字符间距。
    • word-spacing：用于设置单词间距。
    • 不可继承的属性 宽度、高度、边距、填充、边框等不可继承
  4. 使用默认值：如果未能确定属性的值，则使用浏览器默认样式表中定义的默认值。（样式表分为作者样式表与浏览器样式表）
text
1. 后代选择器(div p{})：它会选择所有位于A元素内部的B元素，无论这些B元素处于A内部的哪一层。
2. 子选择器(div>p{})：它只会选择作为A元素子元素的B元素，不包括孙元素、曾孙元素等。
3. 相邻兄弟选择器(div+p{})：它只会选择紧接在A元素后的第一个B元素，而且二者有相同的父元素。
4. 通用兄弟选择器(div~p{})：它会选择在A元素之后的所有B元素，而且二者有相同的父元素。
5. 属性选择器(div[class ="box"]{})：它会选择所有具有class属性且属性值为box的div元素。
6. 伪类选择器(div:hover{})：它会选择鼠标悬停在div元素上的情况。
7. 伪元素选择器(div::before{})：它会在div元素内部的最前面添加一个子元素。
8. 组合选择器(div,p{})：它会选择所有div元素和所有p元素。
9. :nth-child() 选择器匹配属于父元素的特定子元素的元素。(p:nth-child(2){})
10.not() 选择器，选取非指定元素。(p:not(.red){}),选取所有 class 不等于 "red" 的 <p> 元素。
1. 后代选择器(div p{})：它会选择所有位于A元素内部的B元素，无论这些B元素处于A内部的哪一层。
2. 子选择器(div>p{})：它只会选择作为A元素子元素的B元素，不包括孙元素、曾孙元素等。
3. 相邻兄弟选择器(div+p{})：它只会选择紧接在A元素后的第一个B元素，而且二者有相同的父元素。
4. 通用兄弟选择器(div~p{})：它会选择在A元素之后的所有B元素，而且二者有相同的父元素。
5. 属性选择器(div[class ="box"]{})：它会选择所有具有class属性且属性值为box的div元素。
6. 伪类选择器(div:hover{})：它会选择鼠标悬停在div元素上的情况。
7. 伪元素选择器(div::before{})：它会在div元素内部的最前面添加一个子元素。
8. 组合选择器(div,p{})：它会选择所有div元素和所有p元素。
9. :nth-child() 选择器匹配属于父元素的特定子元素的元素。(p:nth-child(2){})
10.not() 选择器，选取非指定元素。(p:not(.red){}),选取所有 class 不等于 "red" 的 <p> 元素。

视觉格式化模型 ​

CSS的视觉格式化模型（Visual Formatting Model）是用于处理文档并在视觉媒介上显示文档的机制。 它决定了如何将文档的结构转化为视觉表示的过程，包括如何处理元素的布局、尺寸、定位以及渲染

  • 盒模型：元素被视为具有margin（外边距）、border（边框）、padding（内边距）和content（内容）的盒子。
  • 格式化上下文：元素的布局受到其格式化上下文的影响，主要有块级格式化上下文（BFC,垂直排列）和内联格式化上下文（IFC,水平排列填满换行）。
  • 定位方案：包括静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。
  • 浮动：允许元素脱离正常的文档流，并向左或向右浮动，。
  • 层叠上下文：决定页面上元素的堆叠顺序。