深入CSS | 青训营笔记

小崔迷路了
106 阅读7分钟

这是我参与第四届青训营-前端基础场笔记创作活动的第3天

1.选择器的特异度

选择器的特异度由A、B、C、D四个值进行计算，其中对应值计算规则如下：

  • 如果存在内联样式则A1，否则为0；
  • B为ID选择器出现的个数；
  • C为类选择器、属性选择器、伪类选择器出现的个数；
  • D为标签选择器和伪元素选择器出现的个数

通过计算选择器的特异度，我们可以比较他们的的优先级
【比较规则是: 从左往右依次进行比较 ，较大者胜出，如果相等，则继续往右移动一位进行比较 。如果4位全部相等，则后面的会覆盖前面的】

举个例子: image.png

两个选择器中，第一个的特异度为(0,1,2,2)，第二个为(0,0,2,2)，因此第一个选择器的优先级要大于第二个。

参考文档：深入理解CSS选择器优先级

  • 单个选择器时，选择器的特异度就是上面对应的值

  • 组合选择器时，选择器的特异度就多个选择器的相加，例如div .app的特异度就是10+1=11，注：这里的相加不会产生进位，例如：有11个标签选择器和一个类选择器的组合，他的特异度是10+11=1-11而不是21，特异度比较是从高位比到低位
    注意：

  • 兄弟选择器和相邻选择器不属于单个选择器，而是属于选择器的组合，例如 A ~ B 的特异度就是A的特异度加上B的特异度

  • 出现样式继承时，继承下来的特异度为0，如果该元素没有直接选中，不管父元素特异度多高，子元素得到的特异度都是0

2.继承

当子元素的一个属性没有指定值时，则取父元素的同属性的计算值。

非继承属性

当元素的一个非继承属性没有指定值时，则取属性的初始值。

非继承属性的一个典型例子就是border属性。给出以下样式规则：

 p { border: medium solid; }

若将其应用在下面这段 HTML 代码上

  <p>This paragraph has <em>emphasized text</em> in it.</p>

文本 "emphasized text" 就没有边框，因为border-style属性的初始值为none。

注意：

  • inherit关键字允许显式的声明继承性，它对继承和非继承属性都生效。

初始值

CSS属性的初始值是其默认值。

CSS中，每一个属性都有一个初始值：

  • background-color的初始值为transparent
  • margin-left的初始值为0

初始值的使用取决于属性是否被继承：

  • 对于继承属性，初始值只能被用于没有指定值的根元素上。
  • 对于非继承属性初始值可以被用于任意没有指定值的元素上。

可以使用initial关键字显式重置为初始值：background-color : initial

3.CSS求值过程

image.png 1.HTML解析成DOM树，解析过程中将从CSS中搜集的样式规则放在一起组成样式规范；
2.对样式规则进行筛选，从而获得声明值（一个元素的某个属性可能有0到多个声明值）；
3.按照来源、特异性、书写顺序选出优先值最高的 一个 属性值即层叠值；
4.若层叠值为空，使用继承或初始值，得到指定值（指定值一定不为空）；
5.将一些相对值或关键字转换为绝对值，从而获得计算值（一般来说是浏览器在不进行实际布局的情况下所能得到的最具体的值）；
6.将计算值进一步转换，如关键字、百分比等都转为绝对值，从而获得使用值（进行实际布局时使用的值）；
7.将小数像素值转换为整数，从而得到实际值（渲染时实际生效的值）。

计算值和使用值的区别：单纯的分析CSS和HTML就可以得到的值即为计算值，使用者需要结合实际环境才能得到的值为使用值。继承的属性值为计算值。

4.布局（Layout）是什么？

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

盒模型

4UEK0.png

width

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

height

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

padding

  • 指定元素四个方向的内边距
  • 取值为百分数--相对于容器宽度
代码效果
padding: 10px;四个方向内边距都为10px
padding: 10px 20px;上下方向10px，左右方向20px
padding: 10px 20px 30px;上10px，左右20px，下30px
padding: 20px 10px 40px 30px;上20px，右10px，下40px，左30px

border

  • 指定容器边框样式、粗细和颜色
  • 三种属性
    • border-width
    • border-style
    • border-color
  • 四个方向
    • border-top
    • border-right
    • border-bottom
    • border-left

当高度和宽度都为零时，则会出现如下图形：

image.png

margin

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

margin collapse(margin塌陷)

WMF%P6V%IY{0@BWI.png 即 外边距重叠

1.上下两div(上定义有margin-bottom, 下有margin-top)叠加且均为正值，取较大的margin值，如果两个元素的外边距大小有正有负，则距离为两个数值之和，如果两个元素的外边距距离都为负值，那么其宽度按最小的值来计算。

2. margin collapse发生在父元素和子元素之间，前提是垂直边距间不存在内边距和边框。可以通过增加padding属性或边框来防止叠加。

3. margin collapse会发生在定义有垂直外边距的空元素。

CSDN_1659110187759.jpg

CSDN_1659110233043.jpg

两种盒模型分类

盒模型有两种，分别是content-box与border-box，两者规则不同，可以通过box-sizing来设置，其中默认值为content-box。

  • content-box

content-box中padding和border不被包含在定义的width和height之内，所以其元素的宽度与高度等于设定的高度与宽度与对应方向的padding与border的和。

.box {
    width:100px;
    padding:40px;
    border:2px solid black;
}

其宽度为：100px+(40px+2px)*2= 184px

  • border-box

border-box中padding和border被包含在定义的width和height之内，所以其宽度和高度取决于设定的宽度与高度

.box {
    box-sizing:border-box;
    width:100px;
    padding:40px;
    border:2px solid black;
}

其宽度为100px

overflow

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。它可设置以下值：

  • visible-- 默认。溢出没有被剪裁。内容在元素框外渲染
  • hidden-- 溢出被剪裁，其余内容将不可见
  • scroll-- 溢出被剪裁，同时添加滚动条以查看其余内容
  • auto-- 与 scroll 类似，但仅在必要时添加滚动条

块级元素和行级元素

W1WHDNI8IQ72JNE6IP`I3.png

D$W68`{JB2G(I@4PJKRY4L6.png

块级元素 block

元素呈现“块”状，有自己的宽度和高度，即其 width 和 height 可自定义。除此之外，块级元素比较霸道，它独自占据一行高度（float浮动除外），一般可以作为其他容器使用，可容纳块级元素和行内元素。

块级元素有以下特点：

  • 每个块级元素都是独自占一行；
  • 高度，行高，外边距（margin）以及内边距（padding）都可以控制；
  • 元素的宽度默认为父元素的宽度（父元素宽度100%)；
  • 多个块状元素标签写在一起，默认排列方式为从上至下；

行级元素 inline

行内元素不可以设置宽和高。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。

行内元素有以下特点：

  • 不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行；
  • 对外边距（margin）和内边距（padding）仅设置左右方向有效，上下方向无效；
  • 设置行高有效，等同于给父级元素设置行高；
  • 行内元素中不能放块级元素，a 链接里面不能再放链接。

行内块级元素 inline-block

本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行，同时拥有行级元素和块级元素的特点。

display属性

  • display: block-- 定义元素为块级元素
  • display: inline-- 定义元素为行级元素
  • display: inline-block-- 定义元素为行内块级元素
  • display: none-- 排版时完全被忽略

可以通过display属性进行元素类型的转换。

常规流

  • 常规流，又称文档流、普通文档流、常规文档流
  • 除了根元素，所有元素在默认情况下，都应该属于常规流布局(非默认情况即元素设置了浮动或定位) %57FF2NUCK{RM)452O9{ENW.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-boat
  • BFC内的排版规则
    • 盒子从上到下摆放
    • 垂直margin合并
    • BFC内盒子的margin不会与外面的合并
    • BFC不会和浮动元素重叠

5.Flex Box 是什么

Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，是一种新的排版上下文。

它可以控制子级盒子的:

  • 摆放的流向（→ ← t ↓）
  • 摆放顺序
  • 盒子宽度和高度
  • 水平和垂直方向的对齐
  • 是否允许折行

想要了解更多，可以参考 Flex 布局教程

$2)EM5HVR58.png

6.Grid布局

}52V417BM4WS@)98RLFA6)I.png 参考文章Grid布局

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

loat 浮动

SC8PA.png

7.position属性

WEF0IA$LCATV2Z74`E89WL6.png

position:relative

  • 在常规流里面布局
  • 相对于自己本应该在的位置进行偏移
  • 使用设置 top、left、bottom、right 偏移长度
  • 流内其他元素布局不变

position:absolute

  • 脱离常规流
  • 相对于最近的非static祖先定位
  • 不会影响流内元素布局
4LOWC(%M8FVI)U1FLPT2VOM.png
avatar
文章
阅读
粉丝