1、标签按照类型可以划分为三种类型：

• block：div、p、ul、li、h1…
  • 1、独占一行
  • 2、支持所有样式
  • 3、不写宽的时候，跟父元素的宽相同
  • 4、所占区域是一个矩形
• inline：span、a、em、strong、img…
  • 1、挨在一起
  • 2、有些样式不支持，例如width、height、margin【有的方向】、padding【有的方向】，注意img是特例
  • 3、不写宽的时候，宽度由内容决定
  • 4、所占区域不一定是矩形
  • 5、内联标签之间会有空隙，空隙是由于代码换行引起的【布局一般用块标签，修饰文本一般用内联标签】
• inline-block：input、select…
  • 1、挨在一起，支持宽高

---

---

2、标签按照内容分类

• Flow：流内容、Metadata：元数据、Sectioning：分区、Heading：标题、Phrasing：措辞、Embedded：嵌入的、Interactive：互动的
  官网链接
  

---

---

3、标签按照显示分类

• 替换/元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
  • img、input…
• 非替换元素：将内容直接告诉浏览器，将其显示出来。
  • div、h1、p…

---

---

4、显示框类型

• display【block、inline、inline-block、none】
• 说明：显示框类型的默认值可以进行改变，但一般不建议这么做
  
• diaplay ：none，是让显示框隐藏的代码，是不占空间的隐藏。当元素隐藏起来，另一个元素就会覆盖隐藏显示框的位置。
• visibility：hidden，是占空间的隐藏。

---

---

5、标签嵌套规范

• 块标签可以嵌套内联标签
• 块标签不一定能嵌套内联标签【例如p标签不能嵌套div标签】
• 内联标签不能嵌套块标签【特殊的是a标签可以嵌套块，意义就是给一个区域加标签】

---

---

6、溢出隐藏

• overflow
  • visible : 默认
  • hidden：溢出隐藏
  • scroll：下滑框显示
  • auto：自动，当内容溢出的时候，会显示下滑框
  • x轴、y轴：overflow-x或overflow-y是针对两个轴分别设置

---

---

7、透明度与手势

• opacity：0~1，整体透明度设置
• rgba：通过background-color设置背景的颜色与透明度，这样做就能避免整体透明度设置
• cursor：鼠标样式【可以添加.cur和.ico后缀的自定义样式】

---

---

8、最小最大宽高

• min-width、max-width
• min-height、max-height
• 注意：%单位：换算是以父容器的大小进行换算的，父容器没设置，祖先容器设置也没用。

---

---

9、CSS默认样式

• 有些标签没有默认样式【div、span、…】，有些标签有默认样式【body、h1~h6、p、ul、…】

---

---

10、CSS重置（reset）样式

• 有些标签没有默认样式【div、span、…】，有些标签有默认样式【body、h1~h6、p、ul、…】

*{ margin:0; padding:0; }
ul{ list-style:none; }
a{ text-decoration:none; color:#666; }
img{ display:block; }

• 图片进行设置的原因：当在div中设置图片时，图片不会和底线对齐，会有空隙，如下图：
  解决方案：img{ vertical-align:bottom}；img{ display:block; }，将img转成块也是一种解决方案
  
• 可以进入想要查看的网页官网，通过chrome检查源码，再通过FeHelper插件的代码美化工具，查看别人如何重置css样式

---

---

总结：写具体页面的时候或一个布局效果的时候要有的三个步骤：

• 1、写html结构
• 2、css重置样式
• 3、写具体css样式