理解CSS（二）｜ 青训营笔记

给我一杯泰绿魔法药水
76 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的第3天

层叠

优先级

浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。它基本上是一个衡量选择器具体选择哪些区域的尺度：

  • 一个元素选择器不是很具体 — 会选择页面上该类型的所有元素 — 所以它的优先级就会低一些。
  • 一个类选择器稍微具体点 — 它会选择该页面中有特定 class 属性值的元素 — 所以它的优先级就要高一点。

一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：

  1. 千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是 1000。
  2. 百位： 选择器中包含 ID 选择器则该位得一分。
  3. 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
  4. 个位：选择器中包含元素、伪元素选择器则该位得一分。

image.png

继承

在默认情况下，一些 css 属性继承当前元素的父元素上设置的值，有些则不继承。

文字属性一般继承，盒模型不可继承，width之类的

Css每一个属性都有一个初始值，都没有继承到就会使用初始值

  • Background-color的初始值Transparent

  • margin-left的初始值为0

  • 可以使用initial关键词显式重置为初始值

    • Background-color:initial

浏览器渲染css过程

描述每一个元素寻找特定css属性都要经过这么一个过程

计算值和使用值的区别（重点）

计算值：立马可以转换出来的（继承到父级的计算值）

使用值：关于实际布局的时候计算的

image.png

布局Layout

  • 确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

常规流 overflow

在普通流中, 元素按照其在 HTML 中的先后位置至上而下布局, 在这个过程中, 行内元素水平排列, 直到当行被占满然后换行; 块级元素则会被渲染为完整的一个新行.

除非另外指定, 否则所有元素默认都是普通流定位, 也可以说, 普通流中元素的位置由该元素在 HTML 文档中的位置决定.

盒模型 content-box

一个被定义成块级的（block）盒子会表现出以下行为：

  • 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
  • 每个盒子都会换行
  • width 和 height 属性可以发挥作用
  • 内边距（padding）, 外边距（margin）和 边框（border）会将其他元素从当前盒子周围“推开”

除非特殊指定，诸如标题 (<h1>等) 和段落 (<p>) 默认情况下都是块级的盒子。

如果一个盒子对外显示为 inline，那么他的行为如下：

  • 盒子不会产生换行。
  • width 和 height 属性将不起作用。
  • 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
  • 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

用做链接的 <a> 元素、 <span>、 <em> 以及 <strong> 都是默认处于 inline 状态的。

我们通过对盒子display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。

一个元素使用 display: inline-block，实现我们需要的块级的部分效果：

  • 设置width 和height 属性会生效。
  • padding, margin, 以及border 会推开其他元素。

但是，它不会跳转到新行，如果显式添加 width 和 height 属性，它只会变得比其内容更大。

width

  • 指定content-box宽度
  • 取值为长度、百分数、auto
  • auto由浏览器根据其他属性确定
  • 百分数相对于容器的content box宽度

height

  • 同上
  • 容器有指定高度时，百分数才生效

padding

  • 指定元素四个方向的内边距：上右下左

border

  • 样式、粗细、颜色
  • 三种属性、四个方向
  • 四条边框颜色不同时，是斜切的

margin-collapse

外边距折叠

如果一个具有上边距的元素排在在一个具有下边距的元素之下时，他们之间的间距不会是这两个外边距的和，即外边距会发生折叠，简单来说就是，间距与两个外边距中的较大者一样大。

border-box

box-sizing:border-box属性，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里

盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整

overflow控制溢出多行文本

  • visible
  • hidden
  • scroll

块级vs行级

image.png

行级排版上下文

  • Inline Formatting Context（IFC）

  • 只包含行级盒子的容器汇创建一个IFC

  • IFC内的排版规则

    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动（float）元素

在 IFC 佈局裡並沒有寛度與高度，而且在 內聯元素(inline)中沒有 margin-top 與 margin-button 屬性，如果要設定高時可以使用 CSS 中 line-height (行高) 。

  • 內聯元素(inline) 參與 IFC 佈局規則

块级排版上下文

  • BFC内的排版规则

    • 盒子从上到下摆放
    • 垂直margin合并
    • BFC内盒子的margin不会与外面的合并
    • BFC不会和浮动元素重叠

FlexBox

  • 一种新的排版上下文

  • 它可以控制子级盒子的：

    • 摆放的流向（→ ← ↑ ↓）
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许拆行
avatar
文章
阅读
粉丝