CSS全面解析之一：HTML基础强化 和 CSS 基础

第二章：HTML基础强化

1. 前端三大件

• HTML 结构
• CSS 样式
• JavaScript 行为

2. HTML 常见元素（记忆）

   
   HTML 常见元素
   常见头部（viewport 主要用于适配移动端）
   HTML 的常见重要属性

3. 学会使用 http://h5o.github.io/
   HTML 大纲查看器来查看 HTML 大纲。比如腾讯新闻网
   

   查看代码是否符合大纲

4. HTML 版本
   在 HTML5 之前有很多版本比如（HTML4、XHTML），就是一套套 标准。研究之前的版本意义不大，现在我们只要遵循 HTML5 的标注来就行。

   
   HTML5 新增语义

5. HTML 元素分类 - 按默认样式分

块级 block：最突出的表现‘独占一行’（例如 div）
行内 inline：和其他元素按行进行排练，可能因为换行导致不规则，无法设置 width hegiht（主要都是跟文本相关的例如 em strong span）
inline-block：对外表现就和 inline一样，对内表现可以设置 height width。（例如 select ）

6. HTML 里面存在元素能不能嵌套的问题。

   
   元素一般嵌套关系

7. 如何重置掉给 html 标签赋予的默认样式呢？

• 方法一：https://meyerweb.com/eric/tools/css/reset/

• 方法二： 有争议，但是很有用，很简洁。（为什么又争议呢？因为*是代表所有元素，可能存在影响性能问题。）

* {
    margin:0;
    padding:0;
  }

第二章：CSS 基础

1. css 全称 Cascading Style Sheet , 中文意思：层叠样式表。

2. 浏览器解析css 选择器的解析方式是怎么样的呢？

body .boy .score { 
  color:yellow;
}

解析的时候从右往左边解析： .score -> .boy -> body ，更加高效。

3. 选择器分类

   
   选择器分类

4. 选择器权重

   
   选择器权重

5. 字体相关的问题（跨平台多字体适配，字体族，fallback 机制，自定义字体）

   
   字体相关

6. 行高（要注意“顶线”“底线”“行高”“基线”，这些文字相关对应的含义。文字默认安装基线进行对齐，同一行的行高会相互影响，由最高的line-height决定,如果字号不同，需要用vertical-align:middle 来对齐。理解经典问题，图片 3px 底部间隙。使用 vertical-align: bottom 解决。）

7. 背景

• 渐变：background: linear-gradient(left, red , green)
• 雪碧图的使用

8. 边框

• 边框的属性：线型 大小 颜色
• 边框背景图
• 边框衔接（三角形的实现）

9. 文字折行

   
   文字折行