读书笔记（七）：HTML和CSS

1.HTML语义化
简单来说，就是根据结构化的内容选择合适的标签。

合适的标签是对内容表达的高度概括，在浏览器爬虫或者任何机器读取HTML时，都能更好的理解代码表达的意思，进而获得更高的解析效率。好处有：利于SEO、开发维护体验更好、用户体验更好、更好的可访问性，方便任何设备对代码进行解析。

常用标准：

<nav /> // 导航
<article /> // 文稿内容、博客内容、评论内容
<aside /> // 目录、边栏、广告、批注
<figure /> // 含有附录、图片、代码、图形
<section /> // 含有多个标题或内容的区块
<p /> <address /> <blockquote /> <pre /> ... // 含有段落、语法意义

2.BFC
块级格式化上下文。它会创建一个特殊的区域，在这个区域内，只有block box参与布局。

形成BFC的情形：

• 根元素或其他包含根元素的元素
• 浮动元素（float不是none）
• 绝对定位元素（position为absolute或fixed）
• 内联块（display：inline-block）
• 表格单元格（display：table-cell）
• 表格标题（display: table-caption）
• 具有overflow且值不是visible的元素
• 含有样式属性display：flow-root
• 含有样式属性column-span: all

3.实现居中

• absolute + 负margin

  .parent {
    position: relative;
    .child {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -px;
      margin-top: -px;
    }
  }
  

  基于父元素的宽高计算绝对定位百分比，修正元素自身宽高的一半，数学几何运算可得。

• absolute + margin auto

  .parent {
    position: relative;
    .child {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  }
  

  将各个方向的距离都设置为0，将margin设置为auto。

• absolute + calc

  .parent {
    position: relative;
    .child {
      position: absolute;
      top: calc(50% - px);
      left: calc(50% - px);
    }
  }
  

  类似于第一种计算方法。

4.居中不限宽高

• absolute + transform

  .parent {
    position: relative;
    .child {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  

  transform的translate属性也可以用来设置百分比，基于自身的宽高计算出来的。

• line-height

  .parent {
    line-height: 300px;
    text-align: center;
    .child {
      display: inline-block;
      vertical-align: middle;
      line-height: initial;
      text-align: left;
    }
  }
  

  把元素设置为行内元素，通过text-align实现水平居中，通过vertical-align实现垂直居中。

• table布局和css-table
  table布局是处理居中问题的能手，但缺点是会增加很多冗余代码，并且性能也不友好。可以使用css-table。

  .parent {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    .child {
      display: inline-block;
    }
  }
  

• flex

  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

• grid

  .parent {
    display: grid;
    .child {
      align-self: center;
      justify-self: center;
    }
  }
  

  grid布局非常超前，虽然兼容性不好，但是能力超强；

5.H5新功能
用于绘画的canvas元素。
用于媒介播放的video和radio元素。
对本地离线存储更好支持的localStorage、sessionStorage。
新语义标签（article、footer、header、nav、section等）。
新表单控件（calendar、date、time、email、url、search等）。

实例：
给汉字加拼音

<ruby>
  给汉字加拼音
  <rt>
    geihanzijiapinyin
  </rt>
</ruby>

展开收起组件

<details>
  <summary>标题文字</summary>
  可以展开收起的文字等等。
</details>

6.CSS Modules
模块化是指项目中所有class名默认都是局部起作用的。它依赖webpack或其他构建工具，动态生成class名，可以将class名唯一化，从而使其只在局部起作用。

.common {
  color: red;
}

.test {
  composes: common;
  font-size: 18px;
}

如果在构建过程中进行标识，表示该class将被复用，就可以解决复用样式问题了，需要依靠composes关键字。