CSS进阶 | 青训营笔记

FlyBoat
99 阅读6分钟

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

写笔记还不是很熟练，简单记录下了上课的要点，如有不对欢迎指正啦~

进阶CSS

CSS选择器特异度（选择器优先级问题）

计算方式，id>类>标签

  • 先对比id，如果二者id都有，则算类（按一个类为1计算）的总和进行比较，如果相同继续向后计算（标签也是按一个标签为1计算）

如下图，第一个选择优先级更高

image.png

注意，!important最高，如果没有这个声明important则比较特异度，特异度相同则按照先后顺序来选择

CSS继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值（在子元素中对父元素的存在的相同属性进行设置）

有些属性不可继承，指的是盒子的display展示方式，box-sizing等。但可以通过设置其属性值为inherit进行显式继承

CSS初始值

每个属性都有一个初始值，可以通过initial关键字显式重置为初始值

计算过程

1. 声明值

首先经过页面规则过滤后找出的有效的CSS里的声明值

2. 层叠值

在声明值中根据优先级计算出最终选中的值。

3. 指定值

如果层叠值为空则采用继承的值或者默认值,保证值不为空

4. 计算值

将关键字或者一些相对值转换为绝对值。不考虑实际布局的情况，不需要参照父级情况来计算的情景，所得到的是浏览器不进行实际布局算的最具体的值

5. 使用值

进行实际布局使用的值，对计算值进一步转换，消除百分比，不会再有相对值或者关键字，是一个具体的值，但可能会有小数

6. 实际值

最终渲染时所用的值，取整，去除了无法表示的小数情况。

布局（Layout）

确定内容的大小和位置的算法

布局前置知识，盒子模型：

image.png

默认情况下，指定的宽和高是对内容进行定义的。百分比是对容器有具体值的情况下才有用

值得注意的是，border中当四个方向的边框颜色不一样时，会是倒着的梯形展示各个边。利用这个特性，当内容为空的时候可以制作三角

image.png

box-sizing：border-box 包含边框在内的内容，开发中更常用

overflow 溢出处理，visible： 超出可见 hidden： 超出隐藏 scroll： 超出后会在内部新建滚动条

块级元素和行级元素：

image.png行级元素中是根据内容来决定盒子的宽高的，不能手动设定

但是可以通过设置行内块元素，本质上还是行级元素，并且行内元素也可以设置宽高，作为一个整体（想象成在块元素里放了原本行级元素的内容）

常规流

IFC行级排版上下文：

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

特性：

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

BFC块级排版上下文：

以下这些都会产生BFC

  • 根元素
  • 浮动、绝对定位、inline-block
  • Flex子项和Grid子项
  • overflow 值不是 visible 的块盒
  • display: flow-root;

特性：

  • 盒子从上到下摆放
  • 垂直 margin 合并（当两个BFC块垂直上下排列时，上面的盒子margin-button:100px与下面的盒子margin-top:100px 会合并，最终两个盒子间距为100px）
  • BFC 内盒子的 margin 不会与外面的合并
  • BFC 不会和浮动元素重叠

深入理解，CSS的渲染引擎会将行内元素由一个匿名的块级元素包裹，从而实现BFC。匿名的块级元素不会在样式上生效，仅在CSS渲染引擎中有用。

flex布局：

flex-direction：控制流向，区分主轴和侧轴。主轴默认为水平，侧轴为竖直

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

justify-content：决定水平方向的布局

image.png其中默认为flex-start

align-items：决定垂直方向的布局

image.png其中默认为strtch。可以为内部的某个元素特指为其他竖直定位

Flexibility弹性：

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

flex-grow属性，补充剩余空间，指的是原本元素占位剩下的空余空间分布权重。可以简写为flex

flex-shrink属性，如果值都为1，当空间不足时元素等比缩小，如果某个元素值为0，则空间不足时值为0的元素不变，其他元素缩小

Grid布局：  felxbox是单一的一个方向的布局模式，Grid是一个二维的布局，更加灵活 在此不过多说明，flex无法完成的时候再考虑Grid布局

思路：先画格子，使用 grid-template 相关属性将容器划分为网格再填充元素。

grid-template-columns:1fr 2fr 3fr; // 列宽这样是分成6份各占 1 2 3 份

为了方便表示比例关系，网格布局提供了fr关键字(fraction 的缩写，意为"片段”)

浮动

实现文字环绕图片的特性，在flex和grid后浮动逐渐退出了布局了，回归到最初的用途

绝对定位

  • position属性

    static 默认值，非定位元素

    relative 相对定位。搭配top、left等使用，相对自身原本位置偏移，不脱离文本流。一般与绝对定位搭配使用，父亲相对定位，儿子绝对定位

    absolute 绝对定位。脱离常规流，相对于最近的非static（relative,fixed,absolute都可）祖先定位，不会对流内元素布局造成影响

    fixed 固定，也是脱离常规流的布局，用于滚动时固定某元素的位置

    粘性定位：position: sticky; sticky的中文意思是“粘性的”，position:sticky表现也符合这个粘性的表现。特别适合导航的跟随定位效果。基本上，可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。

思考：其实绝对定位这些脱离常规流，更是新创了一种流，以脱离常规流的规则按自己的规则进行设计

avatar
文章
阅读
粉丝