[字节青训营]前端方向Day3-前端入门 - 基础语言篇 - 深入CSS | 豆包MarsCode AI刷题

从零成长为初级AI工程师
248 阅读7分钟

#青训营笔记创作活动

深入CSS

多个选择器选择同一个属性时，哪条规则生效？

选择器的特异度(Spicificity)

把 id (伪)类 标签 看成一个三位数。下方即为122,022 (谁大听谁的)

image.png

对于开发者: 可以先写一些基础的样式，然后通过样式覆盖进行特殊化

继承

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

  • 下图中，p,em,strong的标签中没有设置font-size，但是可以继承body的。strong中没有设置color，但是可以继承p的。(color就是一个可继承的元素)

image.png

  • 一般来说，在CSS中，和文字相关的属性都是可以继承的。

    像宽度，不可继承。如果有一个div标签设置了宽度，其子标签p未设置宽度，那么也不会继承其父标签的。

  • 显式继承：inherit

image.png

初始值

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

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

  • 可以使用initial关键字显式重置为初始值

    • background-color :initial 相当于background-color:transparent

CSS求值过程

image.png

image.png

image.png

  • 拿到所有规则之后 ，先进行筛选 。将匹配到的规则筛选出来。 如果对于一个属性有0~n个声明值Declared Values， 则需要通过cascading选出一个优先级最高的Cascaded Value(层叠值) 层叠值为空时，选择继承或者默认值。 到此，值一定不为空，值为指定值Specified Value。然后进行resolving得到Computed Value(计算值)。 得到计算值之后会进行formatting，把关键字等转换成绝对值。Used Value(使用值) 使用值通过constraining，将小数点像素转换成整数。最后得到实际值。

注：继承继承到的是父元素的计算值

布局

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

image.png

盒模型

image.png

  • width 宽度

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

  • height 高度

    • 指定content box高度

    • 取值为长度、百分数、auto

    • auto取值由内容计算得来

    • 百分数相对于容器的content box高度

    • 容器有指定的高度时，百分数才生效

      • 否则，容器本身是一个auto的高度，就意味着容器的高度需要依赖内容的高度来确定。然后内容又写了一个百分数，是依赖容器高度的。是一个循环.....

image.png

  • padding

    • 指定元素四个方向的内边距
    • 百分数相对于容器宽度(不管是上下还是左右)

    10px : 4个都是10

    10px 20px : 上下为10 左右为20

    10px 20px 10px 20px : 顺时针转一圈，从上开始 上右下左

  • border

    • 指定容器边框样式、粗细和颜色

    三个属性

    • border-style
    • border-width
    • border-color

    四个方向

    • border-top
    • border-right
    • border-bottom
    • border-left

    使用技巧：

    • border以及border的四个方向 都需要给 三个值，即样式、粗细和颜色

    • 但是border的四个方向可以和三个属性相结合。

      • border-left-width

      设置某个方向上的某个属性值

    • 可以给一个元素的四个边框设置不同的粗细或颜色。边框颜色不同在连接的地方是斜着切过去的

    • 当容器的宽度和高度设置成0时，就只剩下边框了。

    • 可以根据需要将指定三角形之外的三角形设置成透明的。

      image.png

  • margin

    • 指定元素四个方向的外边距
    • 取值可以是长度、百分数、auto
    • 百分数相对于容器宽度

    margin:auto 水平居中

    margin collapse

image.png

上图中a,b容器边距为100，按最大的去计算。

  • box-sizing : border-box(使用的多)

    包含border、padding在内的高度和宽度

    content就变成了减去border和padding的高度和宽度

image.png

  • overflow

    如果容器大小写死，但是内容在容器里放不下。

    visible:(默认) 超出也会进行展示

    hidden:超出的部分不进行展示

    scroll:超出有滚动条

布局规则(块级，行级)

盒子：CSS中的概念

元素：HTML中的概念，标签

  • Block Lever Box

    • 不和其他盒子并排排放(只能自己独占一行)
    • 适合所有的盒模型属性

  • Inline Level Box

    • 和其它行级盒子一起放在一行或拆开成多行
    • 盒模型中的width、height不适用

  • 块级元素

    • 生成块级盒子
    • body、article、div、main、section、h1-h6、p、ul、li等
    • display: block

  • 行级元素

    • 生成行级盒子 内容分散在多个行盒中
    • span、em、strong、cite、code等
    • display: inline

  • display属性

    • block 块级盒子

    • inline 行级盒子

    • inline-block 本身是行级，可以放在行盒中左右排版。只能作为一个整体里不能被拆散成多行。

      给行盒中的元素生成了一个块级元素，在块级元素中进行排版。

    • none 排版时完全被忽略

排版

行级排版上下文

  • Inline Formatting Context (IFC)

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

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

块级排版上下文

  • Block Formatting Context (BFC)

  • 某些容器会创建一个BFC

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

  • 排版规则

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

image.png

span是行级元素，生成行级盒子。 div是块级元素，生成块级盒子。 CSS处理 : 创建2个匿名的块级盒子把行级元素包起来

Flex Box

  • 一种新的排版上下文

  • 可以控制子级盒子的

    • 摆放的流向(上下左右)

      • flex-direction
      • row: 从左到右(默认)
      • row-reverse: 从右到左
      • column: 从上到下
      • column-reverse: 从下到上

    • 摆放顺序

    • 盒子宽度和高度

    • 水平和垂直方向的对齐

    • 是否允许折行

  • display: flex

  • 引入主轴、侧轴概念

image.png

主轴(justify-content)

image.png

侧轴(align-items)

默认：stretch

image.png

align-self：给某一个元素进行设置

image.png

order

从小到大，按order排序

image.png

Flexibility

  • Flex的弹性，可以把Flex中的元素都理解为有弹性的，可以伸展收缩

  • flex-grow 有剩余空间时的伸展能力

    A的flex-grow为2,B的为1。 在总空间为300时，三个大小一样，总空间大于300之后，多出来的空间按2:1分给A和B。

image.png

  • flex-shrink 容器空间不足时的收缩的能力

    flex-shrink:0 是刚性的 压缩不动

  • flex-basis:没有伸展或收缩时的基础长度

image.png

Grid 布局

image.png

  • display: grid 使元素生成一个块级的Grid容器

  • 使用grid-template相关属性将容器划分为网格

    • grid-template-columns: 100px 100px 200px 列方向的划分 划分成三列
    • grid-template-rows: 100px 100px 两行，高度分别是100和100
    • grid-template-columns: 30% 30% auto 划分成三列
    • grid-template-rows: 100px auto 两行，高度分别是100和自适应
    • grid-template-columns: 100px 1fr 1fr 列方向的划分 划分成三列[除去A之后，B和C各占1份儿
    • grid-template-rows: 100px 1fr 两行，高度分别是100和1份儿

  • 进而可以设置每一个子项占哪些行/列

    • grid-line 网格线

image.png

image.png

两种写法:

第一种:grid-area : 1/1/3/3

第二种:grid-row-start:1;grid-column-start:1;

grid-row-end:3;grid-column-end:3; 行列(start)行列(end)

float 浮动

  • 为了实现文字环绕的效果

image.png

position属性

  • 绝对定位

    • static 默认值，非定位元素

    • relative 相当自身原本位置偏移，不脱离文档流

    • absolute 绝对定位，相对非static祖先元素定位

      找父级，如果父级是relative的，那么就根据父级的进行定位。

      如果父级不是relative的，那么就再往上找。

      直到找到一个非static的祖先进行定位。

    • fixed 相对于视口绝对定位。滚动页面的时候视口位置不变。

    • sticky 粘性定位

image.png

avatar
文章
阅读
粉丝