深入CSS ｜ 青训营

就叫白膏叭
67 阅读4分钟

越特殊的选择器优先级越高

选择器的特异度（Specificity）

特异度是指选择器的特殊程度

继承

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

一般来说，在css里面和文字相关的一些属性都是可以继承的，和模型相关的属性都是不可继承的

显式继承

*{
box-sizing:inherit;
}

html{
box-sizing:border-box;
}

.some-weight{
box-sizing:content-box;
}
初始值

每个元素在规范中都规定好的一个初始值，当一个元素不可继承且未被设置属性，会直接使用初始值;或元素要继承，但一层一层下来未继承到，也会使用初始值

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

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

CSS求值过程

image.png

image.png

image.png

布局（Layout）

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

布局相关技术

  • 常规流
    • 块级
    • 行级
    • 表格布局
    • FlexBox
    • Grid布局
  • 活动
  • 绝对定位

最简单的盒模型

image.png

width
  • 指定content box宽度
  • 取值为长度、百分数、auto
  • auto由浏览器根据其它属性确定
  • 百分数相对于容器的content box宽度
height
  • 指定content box高度
  • 取值为长度、百分数、auto
  • auto取值由内容计算得来
  • 百分数相对于容器的content box高度
  • 容器有指定的高度时，百分数才生效
padding
  • 指定元素四个方向的内边距
  • 百分数相对于容器的宽度

例：把padding设定为10px时，四条边都是10px
若设定为10px 20px，则上下是10px,左右是20px
若设定为10px 20px 10px 20px，则顺序为上，右，下，左

border
  • 三种属性
    • border-width 设置四个边上的边框粗细
    • border-style 设置实线或虚线
    • border-color 设置颜色
  • 四个方向
    • border-top
    • border-right
    • border-bottom
    • border-left
margin
  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度
overflow

内容超越了容器本身的范围，可以通过overflow来控制溢出的内容怎么去展示

  • visible
    超出的部分正常显示出来
  • hidden
    超出的部分会隐藏
  • scroll
    可以通过滚动来查看超出的部分
  • auto
    超出了则可以滚动查看，未超出正常查看

常见的布局规则

块级（Block Level Box）

  • 不和其他盒子并列摆放
  • 适用所有的盒模型属性
块级元素
  • 生成块级盒子
  • 例如：body、article、div、main、section、h1-6、p、ul、li等
  • 可以通过display转化成行级

行级(Inline Level Box)

  • 和其他行级盒子一起放在一行或拆开成多行
  • 盒模型中的width、height不适用
行级元素
  • 生成行级盒子
  • 内容分散在多个行盒（line box）中
  • 例如：span、em、strong、cite、code等
  • 可以通过display转化成块级
display属性
  • block：块级盒子
  • inline：行级盒子
  • inline-block：本身是行级，可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行
  • none：排版时完全被忽略

常规流（Normal Flow）

  • 根元素、活动和绝对定位的元素会脱离常规流
  • 其他元素都在常规流之内（in-flow）
  • 常规流中的盒子，在某种排版上下文中参与布局

image.png

行级排版上下文

  • Inline Formatting Context(IFC)
  • 只包含行级盒子的容器会创建一个IFC
  • IFC内的排版规则
    • 盒子在一行内水平摆放
    • 一行入不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动（float）元素*

块级排版上下文

  • Block Formatting Context（BFC）
  • 某些容器会创建一个BFC
    • 根元素
    • 浮动、绝对定位、inline-box
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display:flow-root
BFC内的排版规则
  • 盒子从上到下摆放
  • 垂直margin合并
  • BFC内的盒子的margin不会与外面的合并
  • BFC不会和浮动元素重叠
Flex Box
  • 一种新的排版上下文
  • 它可以控制子级盒子的：
    • 摆放的流向（上下左右）
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许拆行
display:grid
  • display:grid使元素生成一个块级的Grid容器
  • 使用grid-template相关属性将容器划分为网格
  • 设置第一个子项占哪些行/列

position属性

  • static：默认值，非定位元素
  • relative：相对自身原本位置偏移，不脱离文档流
  • absolute：绝对定位，相对非static祖先元素定位
  • fixed：相对于视口绝对定位
position:relative
  • 在常规流里面布局
  • 相对于自己本应该在的位置进行偏移
  • 使用top、left、bottom、right设置偏移长度
  • 流内其它元素当它没有偏移一样布局
position:absolute
  • 脱离常规流
  • 相对于最近的非static祖先定位
  • 不会对流内元素布局造成影响
avatar
文章
阅读
粉丝