理解CSS | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第4天

选择器的特异度(Specificity)

• 优先级从高到低依次为：id(#)、（伪）类(.)、标签(E)

  

• 例：

  <button class="btn">普通按钮</button>
  <button class="btn primary">主要按钮</button> // html类允许多个类名（只需空格隔开）
  <style>
    .btn {
      display: inline-block;
      padding: .36em .8em;
      margin-right: .5em;
      line-height: 1.5;
      text-align: center;
      cursor: pointer;
      border-radius: .3em;
      border: none;
      background: #e6e6e6;
      color: #333;
    }
    .btn.primary {
      color: #fff;
      background: #218de6;
    }
  </style>
  ​
  

继承

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

• color、font-size可继承的，和模型相关的（如宽度）不可继承

• 例：

  <p>This is a <em>test</em> of <strong>inherit</strong></p>
  ​
  <style>
    body {
      font-size: 20px;
    }
    p {
      color: blue;
    }
    em {
      color: red;
    }
  </style>
  

显式继承

• 不可继承的元素（如box-sizing）可以通过显式继承的方式继承

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

初始值

• CSS 中，每个属性都有一个初始值

  • background-color 的初始值为 transparent
  • marg in-left 的初始值为 0

• 可以使用 initial 关键字显式重置为初始值

  • background-color: initial

CSS求值过程

布局

• 确定内容的大小和位置的算法

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

布局相关技术

• 常规流：

  • 行级
  • 块级
  • 表格布局
  • FlexBox
  • Grid 布局

• 浮动：如文字环绕等效果

• 绝对定位：不会对常规流产生影响

box-sizing: content-box

• width

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

• height

  • 指定 content box 高度
  • 取值为长度、百分数、auto
  • auto 取值由内容计算得来
  • 百分数相对于容器的 content box 高度
  • 容器有指定的高度时，百分数才生效（即容器高度不能为auto）

• padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度

• border

  • 指定容器边框样式（solid、dashed、dotted）、粗细和颜色

  • 三种属性

    • border-width
    • border-style
    • border-color

  • 四个方向

    • border-top
    • boder-right
    • border-bottom
    • border-left

  border: 1px solid #ccc;
  ​
  border-left: 1px solid #ccc;
  border-right: 2px dotted red;
  ​
  border-width: 1px 2px 3px 4px;
  border-style: solid;
  border-color: green blue;
  ​
  border-left-width: 3px;
  border-top-color: #f00;
  

• 当四条边框颜色不同时：

• margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto

  • 百分数相对于容器宽度

  • 使用 margin:auto 水平居中

    <div></div>
    ​
    <style>
      div {
        width: 200px;
        height: 200px;
        background: coral;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
    

  • margin collapse

    <div class="a"></div>
    <div class="b"></div>
    ​
    <style>
      .a {
        background: lightblue;
        height: 100px;
        margin-bottom: 100px;
      }
    ​
      .b {
        background: coral;
        height: 100px;
        margin-top: 100px;
      }
    </style>
    

box-sizing: border-box

• 对比：

  <p class="a">
    This is the behavior of width and height as specified by CSS2.1. The
    specified width and height (and respective min/max properties) apply to
    the width and height respectively of the content box of the element.
  </p>
  <p class="b">
    Length and percentages values for width and height (and respective min/max
    properties) on this element determine the border box of the element.
  </p>
  ​
  <style>
    html {
      font-size: 24px;
    }
  ​
    .a {
      width: 100%;
      padding: 1em;
      border: 3px solid #ccc;
    }
  ​
    .b {
      box-sizing: border-box;
      width: 100%;
      padding: 1em;
      border: 3px solid #ccc;
    }
  </style>
  

  border-box更符合直觉

• overflow内容溢出

  • visiable可见
  • hidden隐藏
  • scroll滚动
  • auto自动

块级 vs. 行级

• Box盒子（CSS）

Block Level Box	Inline Level Box
不和其它盒子并列摆放	和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性	盒模型中的width、height不适用

• 元素（HTML）

块级元素	行级元素
生成块级盒子	- 生成行级盒子 - 内容分散在多个行盒 (line box) 中
body、article、div、main、section、h1-6、p、ul、li 等	span、em、strong、cite、code 等
display: block	display: inline

• display 属性

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

• 行级排版上下文

  • Inline Formatting Context (IFC)

  • 只包含行级盒子的容器会创建一个IFC

  • IFC 内的排版规则

    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align 决定一行内盒子的水平对齐
    • vertical-align 决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素*

  <div>
    This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
    <img src="https://assets.codepen.io/59477/cat.png" alt="cat">
    And <em>Inline Block</em>
  </div>
  ​
  <style>
    div {
      width: 10em;
      //overflow-wrap: break-word;
      background: #411;
    }
  ​
    em {
      display: inline-block;
      width: 3em;
      background: #33c;
    }
  </style>
  

• 块级排版上下文

  • Block Formatting Context (BFC)

  • 某些容器会创建一个BFC

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow 值不是 visible 的块盒
    • display: flow-root;

• BFC 内的排版规则

  • 盒子从上到下摆放
  • 垂直 margin 合并
  • BFC 内盒子的 margin 不会与外面的合并
  • BFC 不会和浮动元素重叠

  <span>
    This is a text and
    <div>block</div>
    and other text.
  </span>
  ​
  <style>
    span {
      line-height: 3;
      border: 2px solid red;
      background: coral;
    }
  ​
    div {
      line-height: 1.5;
      background: lime;
    }
  </style>