理解CSS（下）

内卷的晨曦
90 阅读10分钟

选择器的特异度（Specificity）

image.png

继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值

显式继承

image.png

初始值

  • CSS中，每个属性都有一个初始值
    • background-color的初始值为transparent
    • margin-left的初始值为0
  • 可以使用initial关键字显示重置为初始值
    • background-color:initial

CSS求值过程

image.png

布局 （Layout）是什么？

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

布局相关技术：

  • 常规流
    • 块级
    • 行级
    • 表格布局
    • Grid网格布局
    • flex弹性布局
  • 浮动
  • 定位

image.png

width

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

height

  • 指定content box高度
  • 取值为长度、百分数、auto
  • auto取值由内容计算而来
  • 百分数相对于容器的content box宽度
  • 容器有指定的高度时，百分数才生效

image.png

padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度

image.png

border

  • 指定容器边框样式、粗细和颜色
  • border-width:属性可以设置盒子模型的边框宽度，设置四个方向的宽度。
  • border-style:是一个 CSS 简写属性，用来设定元素所有边框的样式。关键字用于描述边框样式。
    • none:和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。
    • hidden:和关键字 none 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，hidden 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示。
    • dotted:显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。
    • dashed:显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。
    • solid:显示为一条实线。
    • double:显示为一条双实线，宽度是 border-width 。
    • groove:显示为有雕刻效果的边框，样式与 ridge 相反。
    • ridge:显示为有浮雕效果的边框，样式与 groove 相反。
    • inset:显示为有陷入效果的边框，样式与 outset 相反。当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 groove 的样式。
    • outset:显示为有突出效果的边框，样式与 inset 相反。当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 ridge 的样式。
  • border-color
    • color:使用 <color> 来表示四个边框的颜色，仅用于单值语法。
    • horizontal:使用 <color> 来表示水平（左边框和右边框）边框的颜色，仅用于双值语法。
    • vertical:使用 <color> 来表示垂直（上边框和下边框）边框的颜色，仅用于双值或三值语法。
    • top:使用 <color> 来表示上边框的颜色，仅用于三值或四值语法。
    • bottom:使用 <color> 来表示下边框的颜色，仅用于三值或四值语法。
    • right:使用 <color> 来表示右边框的颜色，仅用于四值语法。
    • left:使用 <color> 来表示左边框的颜色，仅用于四值语法。
    • inherit:这是一个关键词，用于指示四边的颜色值均继承自父元素的计算值。

该CSS属性可以用于生成各种各样的三角形

margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度 实现容器的水平居中：margin:auto

overflow

overflow 是 CSS 的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。

  • visible:内容不能被裁减并且可能渲染到边距盒（padding）的外部。
  • hidden:如果需要，内容将被裁减以适应边距（padding）盒。不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）。内容可以以编程的方式滚动（例如，通过设置 scrollLeft 等属性的值或 scrollTo() 方法）, 因此该元素仍然是一个滚动的容器。
  • clip:类似于 hidden，内容将以元素的边距（padding）盒进行裁剪。clip 和 hidden 之间的区别是 clip 关键字禁止所有滚动，包括以编程方式的滚动。该盒子不是一个滚动的容器，并且不会启动新的格式化上下文。如果你希望开启一个新的格式化上下文，你可以使用 display: flow-root 来这样做。
  • scroll:如果需要，内容将被裁减以适应边距（padding）盒。无论是否实际裁剪了任何内容，浏览器总是显示滚动条，以防止滚动条在内容改变时出现或者消失。打印机可能会打印溢出的内容。
  • auto:取决于用户代理。如果内容适应边距（padding）盒，它看起来与 visible 相同，但是仍然建立了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条。
  • overlay(弃用)：行为与 auto 相同，但是滚动条绘制在内容之上，而不是占据空间。

overflow 选项包括裁减、显示滚动条，或者显示从容器流向周围区域的内容。

指定 visible（默认）或 clip 以外的值，会创建一个新的块级格式化上下文。由于技术原因，这是必要的——如果浮动包含滚动元素，它将在每个滚动步骤后强制重新包装内容，从而导致一个缓慢的滚动体验。

为使 overflow 具有效果，块级水平的容器必须有一个设定的高度（height 或 max-height）或 white-space 设置为 nowrap。

设置一个轴为 visible（默认值），而设置另一个轴为不同的值时，visible 的行为会像 auto 一样。

JavaScript 的 Element.scrollTop 属性可用于滚动 HTML 元素，即使当 overflow 设置为 hidden 时。

块级 VS 行级

image.png

  • 块级元素：生成块级盒子
    • body、article、div、main、section、h1-6、p、ul、li等
    • display：block
  • 行级元素
    • 生成行级盒子
    • 内容分散在多个行盒（line box）中
    • span、em、strong、cite、code等
    • display：inline

display属性

  • block:该元素生成一个块级元素盒，在正常的流中，该元素之前和之后产生换行。
  • inline:该元素生成一个或多个内联元素盒，它们之前或者之后并不会产生换行。在正常的流中，如果有空间，下一个元素将会在同一行上。
  • 内部表现：<display-inside>这些关键字规定了元素的内部显示类型，其定义了该内容布局时的格式上下文的类型（假设它是一个非替换元素）：
    • flow:该元素使用流式布局（块和内联布局）来排布它的内容。
    • flow-root:该元素生成一个块级元素盒，其会建立一个新的块级格式化上下文，定义格式化上下文的根元素。
    • table:该元素的行为类似于 HTML 中的 <table> 元素。它定义了一个块级别的盒子。
    • flex:该元素的行为类似块级元素并且根据弹性盒模型布局它的内容。
    • grid:该元素的行为类似块级元素并且根据网格模型布局它的内容。
    • ruby(实验)：该元素的行为类似内联元素并且根据 ruby 格式化模型布局它的内容。它的行为像关联的 HTML 的 <ruby> 元素。
  • 列表元素：<display-listitem>该元素为内容生成一个块级盒子和一个单独的列表元素内联盒子。list-item 的单独值将导致元素的行为类似于一个列表元素。其可以与 list-style-type 和 list-style-position 一起使用。

list-item 也可以与任意的 <display-outside> 关键字和 <display-inside> (en-US) 中的 flow 或 flow-root 关键字组合。

常规流 Normal Flow

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其他元素都在常规流之内（in-flow）
  • 常规流中的盒子，在某种排版上下文中参与布局

image.png

行级排版上下文

  • Inline Formatting Context（IFC）
  • 只包含行级盒子的内容会创建一个IFC
  • IFC内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一个盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动（float）元素

块级排版上下文

  • Block Formatting Context（BFC）
  • 某些容器会创建一个BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display：flow-root；

BFC 内的排版规则

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

Flex Box

  • 一种新的排版上下文
  • 它可以控制子级盒子的：
    • 摆放的流向
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行

flex-direction

属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。

image.png

image.png

justify-content

属性定义了浏览器之间，如何分配顺着弹性容器主轴 (或者网格行轴) 的元素之间及其周围的空间。 当 length 属性和自动外边距属性（margin: auto）生效之后，对齐已经完成了。也就是说，如果存在至少一个弹性元素，而且这个元素的 flex-grow 属性不等于 0，那么对齐方式不会生效，就像没有多余空间的情况。

align-items

属性将所有直接子节点上的 align-self 值设置为一个组。align-self 属性设置项目在其包含块中在交叉轴方向上的对齐方式。 目前，Flexbox 和 CSS 网格布局支持此属性。在 Flexbox 中，它控制十字轴上项目的对齐方式，在网格布局中，它控制块轴上项目的对齐方式。

Flexibility

  • 可以设置子项的弹性：当容器有剩余空间时，会延展；容器空间不够时，会收缩。
  • flex-grow有剩余空间时的伸展能力
  • flex-shrink容器空间不足时收缩的能力
  • flex-basis没有伸展或收缩时的基础长度

Grid 布局

  • display:grid
    • 使元素生成一个块级的Grid容器
    • 使用grid-template相关属性将容器划分为网格
    • 设置每一个子项占哪些行/列
  • grid line 网格线

image.png

  • grid area 网格区域
    image.png

position属性

  • static:默认值，非定位元素
  • relative:相对自身原本位置偏移，不脱离文档流
  • absolute:绝对定位，相对非static祖先元素定位
  • fixed:相对于视口绝对定位
avatar
文章
阅读
粉丝