深入CSS| 青训营

50 阅读2分钟

CSS 选择器的特异度

CSS选择器的特异度是一种用于确定在应用冲突规则时选择器的优先级的方法。它是根据选择器中包含的不同元素进行计算的。

内联样式>ID 选择器>类、伪类和属性选择器>元素选择器和伪元素选择器

例子

1

image-20230729093317642

CSS 继承

类似Java继承,子标签的CSS样式,没有设置的情况下,获取父标签的元素

  • 文本相关的属性,如 colorfont-familyfont-sizeline-height等。
  • 元素间隙相关的属性,如 marginpadding等。
  • 部分列表相关的属性,如 list-style-typelist-style-image等。

当然有些元素属性是无法继承的

  • 盒模型相关的属性,如 widthheightborder等。
  • 定位和布局相关的属性,如 positiontopleft等。
  • 背景相关的属性,如 background-colorbackground-image等。

但是能通过方法来解决

显式继承 inherit

inherit 关键字只适用于可继承的属性。对于不可继承的属性,使用 inherit 将没有任何效果。在这种情况下,可以使用 initial 关键字将属性值重置为其初始值

.parent {
  width: 200px;
}
.child {
  width: initial;
}

CSS 求值过程解析

image-20230729100402741

image-20230729100550978

CSS 布局方式及相关技术

布局是为了确认内容的大小和位置的算法。

display属性

  • block
  • inline
  • inline-block
  • none

盒模型

  • margin 外边距
  • border 边框
  • padding 内边距
  • width 宽度
  • height 高度

常规流

行级块级

image-20230729101822871

image-20230729101844045

FlexBox

图片转存失败,建议将图片保存下来直接上传

image-20230729102311041

123

Grid布局(二维网格)

浮动(float)

left,right让块级,行级靠左右排序,比较死板,不太用。

绝对定位(position)

  • 静态定位(static)默认
  • 相对定位(relative)父元素
  • 绝对定位(absolute)子元素
  • 固定定位(fixed)顾名思义,固定在浏览器窗口的位置。