深入CSS(上) | 青训营

55 阅读1分钟

一、CSS选择器的特异度

二、CSS继承

A.继承

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

  2. 显示继承

    1. 语法

      1. *{
            box-sizing: inherit;
        }
        
        html{
            box-sizing: border-box;
        }
        
        .some-widget{
            box-sizing: content-box;
        }
        

B.初始值

  1. CSS中,每个属性都有一个初始值

    1. Background-color 的初始值为 transparent
    2. Margin-left 的初始值为0
  2. 可以使用initial关键字显式重置为初始值

    1. Background-color: initial

三、CSS求值过程解析

A.求职过程

四、CSS布局方式及相关技术

A.布局

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

B.布局相关技术

  1. 基础布局

    1. 布局图

    2. width

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

      1. 指定 content box 高度
      2. 取值为长度、百分数、auto
      3. auto取值由内容计算得来
      4. 百分数相对于容器的 content box 高度
      5. 容器有指定高度时,百分数才生效
    4. margin

      1. 指定元素四个方向的外边距
      2. 取值可以是长度、百分数、auto
      3. 百分数相对于容器宽度
    5. 使用margin:auto 水平居中

      1. 语法

        1. <div></div>
          
          <style>
              div {
                  width: 200px;
                  height: 200px;
                  background: coral;
                  margin-left: auto;
                  margin-right: auto;
              }
          </style>
          
  2. 内外边距

    1. padding

      1. 指定元素四个方向的内边距

      2. 百分数相对于容器宽度

    2. border

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

      2. 三种属性

        1.       ①border-width
        2.       ②border-style
        3.       ③border-color
      3. 四个方向

        1.       ①border-top
        2.       ②border-right
        3.       ③border-bottom
        4.       ④border-left