深入CSS | 青训营

63 阅读1分钟

选择器的特异度(Specificity)

特异度更高的选择器优先

特异度:id>(伪)类>标签

一种常见的做法是,设置一个基础的普通按钮格式,然后根据需求专门设定诸如主要按钮的格式

继承

某些属性会自动继承其父元素的继承制,除非显式指定一个值

inherit为不可继承

*为通配选择符

可以通过设置一个容器,通过改变容器的值来改变

初始值

  • CSS中,每个属性都有一个初始值
    • background-color的初始值为transparent
    • magrin-left的初始值为0
  • 可以使用initial关键值显示重置为初始值
    • backgrond-color:initial

CSS渲染流程

image.png

布局是什么?

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

布局

  • 常规流(文档流)
  • 浮动
  • 绝对定位

height/width属性中的auto取值由内容计算得来,百分数相对于容器的content box长度。
容器有指定长度时,百分数才生效(该元素的父级元素有指定的长度值时,该元素对应的百分数才会生效)。

padding和margin的百分数相对于容器宽度。

margin collapse:

若上面元素的margin-bottom为100px,下面元素的margin-top为100px,最终这两个元素的外边距会融合,最后显示最大的那个边距——100px,不会累加。

overflow:

当内容超过盒子时,通过设置overflow属性即可控制溢出内容如何显示。

  • visible:展示出
  • hidden:隐藏
  • scroll:超出的可用滚动条滑动显示