理解CSS | 青训营笔记

用户5146424373649
85 阅读4分钟

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

CSS基础部分

  • 定义：CSS的全称是层叠样式表Cascading Style Sheets，缩写为 CSS ），是一种样式表语言，用于描述 HTML 或 XML 文档的呈现。
  • 选择器的组合 选择器的组合
  • 三种方式表示颜色：RGB模型、HSL模型、关键词。其中alpha属性表示透明度
  • 对齐方式text-align分为四种：left、right、center、justify
  • css中调整字间距letter-spacing和词间距word-spacing
  • html中多个连续空格被读成一个，用white-space解决 各种 white-space 值的行为

深入CSS

选择器的优先级

浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

  • CSS选择器的优先级关系：内联>ID选择器>类选择器>标签选择器
  • 优先级算法：参考「深入理解CSS选择器优先级」， 从左到右依次比较大小（左边权重大于右边）
优先级是由 A、B、C、D 的值来决定的，其中它们的值计算规则如下：
1. 如果存在内联样式，那么 A = 1, 否则 A = 0；
2. B 的值等于 `ID选择器` 出现的次数;
3. C 的值等于 `类选择器` 和 `属性选择器` 和 `伪类` 出现的总次数;
4. D 的值等于 `标签选择器` 和 `伪元素` 出现的总次数 。

布局

  • 确定内容的大小和位置的算法，根据元素、容器、兄弟节点和内容等信息来计算
  • 三种布局相关技术：常规流【行级、块级、表格布局、FlexBox、Grid布局】、浮动、绝对定位

盒模型

  • 分为content-box和border-box两种，用box-sizing属性转换区别是在border-box中width、height除content外还包含了padding和border
  • 当width和height的值设为百分比时，其基数取决于父元素的对应属性，而当padding、margin、border取百分比的时候则取决于父元素的width。
  • overflow控制溢出，取值为：visible、hidden、scroll、auto
  • display属性：block、inline、inline-block、none

排版上下文

IFC，行级排版上下文

只包含行级盒子的容器会创建一个IFC。下面是IFC内的排版规则：

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

BFC，块级排版上下文

下列容器会创建一个BFC:

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

BFC隔离：BFC 包含创建它的元素的所有子元素，但是不包括创建了新的 BFC 的子元素的内部元素【一个元素不能同时存在于两个 BFC 中】

参考自：juejin.cn/post/696086…

Flex布局

  • Flexible Box，理解为弹性（一维）布局。Flex容器默认存在两根轴：水平轴（主轴）和垂直的交叉轴。
  • 容器有以下六个属性
    • flex-direction 决定主轴的方向
    • flex-wrap 定义一条轴线排不下如何换行
    • flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
    • justify-content 定义了项目在主轴上的对齐方式
    • align-items 定义项目在交叉轴上如何对齐
    • align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

参考自：www.ruanyifeng.com/blog/2015/0…

Grid布局

  • 二位布局，行和列的交叉区域，称为"单元格"。划分网格的线，称为"网格线"（grid line）。

    image.png

  • Grid布局的属性分为：容器属性、项目属性

参考自：www.ruanyifeng.com/blog/2019/0…

定位

positions属性含义
static默认值，非定位元素
relative相对自身原本位置偏移，不脱离文档流
absolute绝对定位，相对非stati祖先元素定位
fixed相对于视口绝对定位
sticky粘性布局，相对定位和固定定位的混合。
元素在跨越特定阈值前为相对定位，之后为固定定位。
avatar
文章
阅读
粉丝