深入CSS | 青训营笔记

23 阅读5分钟

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

上节课我们学习了CSS的基础概念,这节课我们深入学习CSS的其他概念以及在布局中的应用。

本节重点:

  • CSS选择器的特异度
  • CSS属性的继承
  • CSS盒子模型
  • 块级、行级元素;块级、行级排版上下文
  • flex布局
  • 定位 position

本节难点:

  • CSS属性值的计算过程
  • Grid布局

CSS选择器的特异度

当有多条不同的规则选中同一个元素,哪一条规则会生效呢?

这里我们需要引入一个新的概念:选择器的特异度。它的值通过计算规则中id、(伪)类、标签选择器的数量得到。

通过比较特异度的大小,特异度大的规则将会生效。

选择器的特异度.png

CSS属性的继承

某些属性会自动继承其父元素的计算值,除非显式指定一个值。比如color属性。在CSS中,一般和文字相关的属性都可以继承,而和盒模型相关的属性不能继承。

对于不继承的属性,如果我们想要其继承父亲对应属性的值能否实现?答案是有的,我们可以通过显式继承实现。

通过将属性值设置为关键字inherit,可以实现显式继承。

例如:

.parent {
    width: 50px;
}
.child {
    width: inherit;
}

CSS属性的初始值

初始值.png

CSS属性值的计算过程

计算过程如下图所示:

CSS属性值的计算过程1.png (接下图) CSS属性值的计算过程2.png (接下图) CSS属性值的计算过程3.png

计算值和使用值的区别:

计算值是根据html和css文件就能计算出来的值,比如20%,只需要看父元素的属性值就能计算出来;

而使用值得根据实际的渲染环境进行计算,在用户使用之前,因为无法确定用户的使用环境(浏览器类型、屏幕大小等),所以无法进行计算。

注意:前面讲到的CSS继承,继承的就是父亲的计算值,比如父亲的属性值为1.2em,计算过后是20px,那么继承时会继承20px而不是1.2em

布局

CSS的布局涉及到许多问题与技术,相关的技术总结如下:

布局相关技术.png

接下来我们将一一学习以上技术。

盒子模型

box-sizing

盒子模型的宽高默认是content的高度,如果想让盒子模型的宽高表示content+padding+border的之后的宽高,可以设置box-sizing:border-box

overflow

当盒子内的文字超出盒子大小时,可以通过overflow属性设置处理方式。它的取值如下:

  • visible:保留溢出部分可视
  • hidden:隐藏溢出部分
  • scroll:设置滚动

块级、行级元素

块级元素

常见的有body、article、div、main、section、h1-6、p、ul、li

行级元素

常见的有span、em、strong、cite、code

行级排版上下文

行级排版上下文.png

块级排版上下文

块级排版上下文.png

BFC的排版规则如下:

BFC的排版规则.png

flex

flex容器上的属性
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
flex子项上的属性

flex1.png

  • flex-basis

  • flex-grow

    剩余空间的分配比例,不指定时分配比例默认为0(元素不会自动填充剩余空间)

  • flex-shrink

    溢出空间的分配比例,不指定时分配比例默认为1(所有元素等比例压缩)

  • flex

    flex为以上三个值的汇总,各种取值情况如下:

flex2.png

Grid

有了flex布局,我们为什么还需要Grid布局?因为flex布局是一维的,有时候我们发现页面元素的布局不只是从左到右,从上到下的布局,而是二维,这时候就需要Grid布局才能更好的解决。

Grid1.png

grid-template-columns、grid-template-rows

我们使用grid-template-columns、grid-template-rows来划分网格。

grid-template-columns定义每一列每个格子的宽度。

grid-template-rows定义每一行每个格子的高度。

Grid2.png

浮动 float

可以实现文字环绕图片的效果。

定位 position

1、相对定位 position: relative

相对于父元素进行偏移

2、绝对定位 position: absolute

从父元素往上至根元素为止,找到第一个值不为static的元素,相对于该元素进 行偏移(父元素都不指定时默认为static,会相对根元素进行偏移)

3、固定定位 position: fixed

相对于可视窗口进行偏移(与父元素无关)。可以用于实现导航栏无论上下滚动都固定在屏幕上不动。

脱离了常规流。不会对流内元素布局造成影响。

4、粘性定位 position: sticky

静态时相当于relative,当页面滚动到一定位置时变成fixed固定定位

补充:父子流之间的关系是相对独立的。例如父元素使用了绝对定位脱离了常规流,但对于里面的子元素来说,父元素为他们创建了一个新的常规流,则子元素会按照新的流的规则进行排列。

学习CSS的几点建议

最后给大家一些学习CSS的建议:

学习CSS的几点建议.png

CSS的内容繁多,并且不断有新的特性出现,希望大家都能坚持学习,不断进步。路漫漫其修远兮,吾将上下而求索。

本节小结

本节课我深入学习了CSS有关优先级和继承的相关概念,了解到CSS属性值的完整计算过程是怎样子的,接着学习了CSS中的重点----布局的基本概念,比如盒子模型、块级、行级元素等,以及涉及的各种技术,比如flex、Grid、浮动、定位等。至此我们的CSS课程算是完结,下节课我们将正式进入JavaScript的学习。