CSS深入浅出

大米饭消灭者
110 阅读5分钟

  1. 选择器的优先级

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

  2. 继承

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

  3. 显示继承

    1. 有些元素不能自动继承父级元素的样式，可以使用inherit显示的继承父级样式

  4. 初始值

    1. CSS中每个属性都有一个初始值
      1. background-color的初始值为transparent
      2. margin-left的初始值为0
    2. 可以使用initial关键字显式重置为初始值
      1. background-color:initial

  5. CSS的求值过程

    1. 浏览器拿到html代码后会把其解析为一颗DOM树
    2. 遍历所有的元素以及它的属性和样式值
    3. 一个元素的某属性可能有0到多个声明值
    4. cascading按照来源，!important，选择器特异性，书写顺序等选出优先级最高的一个属性值
    5. 选出层叠值以后作为其属性值
    6. 当层叠值为空时，使用继承或者初始值
    7. 经过前面的cascading和defaulting之后，保证指定值一定不为空
    8. 将一些绝对值，比如em转为px，相对路径转为绝对路径（也有的相对值不转换）
    9. 获得计算值
    10. 将计算值进一步转换，比如关键字，百分比等都转为绝对值
    11. 获得使用值（进行实际布局时使用的值，不会再有相对值或关键字）
    12. 将小数像素转为整数
    13. 渲染时实际生效的值

  6. 布局相关技术

    1. 常规流
      1. 行级
      2. 块级
      3. 表格布局
      4. FlexBox
      5. Grid布局
    2. 浮动
    3. 绝对定位

  7. 盒模型

    盒模型.png

    1. 当我们把元素的长度宽度都设置为0时，只剩下边框，我们可以画出各种形状的三角形

    2. margin:auto水平居中

    3. 在垂直方向上，margin只会取比较大那个边距

      一个下外边距为100px一个上外边距为100px，最后边距为100px

    4. box-sizing:content-box是content的宽和高，是默认

    5. box-sizing:border-box是包含border,padding在内的宽和高,常用

    6. overflow控制溢出的部分如何处理

      overflow:visible	// 默认,超出了但还是展示出来
overflow:hidden		// 超出部分隐藏
overflow:scroll		// 滚动

    7. 盒模型中两种常见的布局规则

      1. 块级
        1. 块级的盒子不和其他盒子并列摆放
        2. 适用于所有盒模型属性
      2. 行级
        1. 和其它行级盒子一起放在一行或拆成多行
        2. 盒模型中的width,height不适用

    8. 块级元素和行级元素

      1. 块级元素

        1. 生成块级盒子

          body, article, div, main, section, h1-6, p, ul, li等

          display:block

      2. 行级元素

        1. 生成行级盒子

        2. 内容分散在多个行盒中

          span, em, strong, cite, code等

          display:inline

    9. display属性

      1. block:块级盒子
      2. inline:行级盒子
      3. inline-block 本身是行级,可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行
      4. none 排版时完全被忽略

  8. 行级排版上下文IFC

    1. 只包含行级盒子就会创建一个IFC

    2. IFC内排版规则

      1. 盒子在一行内水平摆放
      2. 一行放不下时,换行显示
      3. text-align 决定一行内盒子的水平对齐
      4. vertical-align 决定一个盒子在行内的垂直对齐
      5. 避开浮动元素

    3. 当单词比较长时,不会被拆成两行,如果想换行可使用

      overflow:wrap:break-word;	// 这样以后单词也能换行

  9. 块级排版上下文BFC

    1. 某些容器会创建一个BFC
      1. 根元素 // html
      2. 浮动, 绝对定位, inline-block
      3. Flex子项和Grid子项
      4. overflow值不是visible的块盒
      5. display:flow-root
    2. BFC排版规则
      1. 盒子从上到下摆放
      2. 垂直margin合并
      3. BFC内盒子的margin不会与外面的合并
      4. BFC不会和浮动元素重叠

  10. Flex Box

    1. 一种新的排版方式

    2. 它可以控制子级盒子的:

      1. 摆放的流向

      2. 摆放的顺序

      3. 盒子宽度和高度

      4. 水平和垂直方向的对齐

      5. 是否允许拆行

      dispaly:flex; // 这样它的排版规则不再是IFC或BFC,而是flex

    3. 主轴与侧轴

      主侧轴.png

      1. 主轴布局设置 主轴布局设置.png

      2. 侧轴布局设置

        侧轴布局.png

        默认是stretch

        baseline:基线对齐

    4. Flexibility

      Flexibility.png

      1. flex-grow(弹性能力) Flex-grow.png 最开始的时候大家都是100px,但是这一行还剩有空间,设置a,b元素的弹性为a为2,b为1,剩下的空间按比例分给a,b, a分到2/3, b分到1/3

      2. flex-shrink(压缩能力)

        当空间不够时,该元素能被压缩的能力. 如果设置a: flex-shrink:0 就说明压不动

      3. flex(各种缩写)
        flex.png

        flex-basis设置元素不被压缩也不被拉伸时的宽度`

  11. Grid布局

    flex-box是单一方向的, Grid是二维的

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

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

      1fr,一份的概念,指除去指定的后, 剩余的划分为份,这个例子中就是b占一份.c占一份

    2. 设置每一个子项占哪些行/列

      给每条网格线从1开始标号, 使用grid line标出开始的横线,开始的竖线,结束的横线,结束的竖线

      网格线.png

      例子: 网格布局例子.png

  12. 除去常规流以后的Float

    1. 可实现文字环绕图片

      float.png

  13. 除去常规流以后的绝对定位position

    1. position属性

      1. static 默认值,非定位元素,参与常规流里面的布局

      2. relative 相对自身原本位置偏移,但不脱离文档流,相对于自己原本占用的空间又偏移一定的值

        relative.png

      3. absolute 绝对定位,相对于非static祖先元素定位, 完全脱离常规的文档流 absolute.png

        其它元素的布局相当于该元素不存在一样

        例子:
        absolute例子.png

      4. fixed 相对于视口绝对定位,脱离了常规的文档流
        fixed案例.png

        ​

avatar
文章
阅读
粉丝