一，标签分类
1，按类型分
1，block（块）：
div，ul，ol，li，dl，dd，dt，p，h1......h6，
特点 ：
①，块是上下排列的，块是独占一行的
②，块支持所有CSS样式
③，当块不写宽度的时候，默认的宽是父容器的宽
④，块永远是一个矩形区域
2，inline（内联） ：
span，img，a，strong，em
特点 ：
①，内联是左右排列的，内联必须在一起
②，内联有些样式是不支持的，width，height，padding-top，margin-top
③，内联元素的宽度是由内容决定的
④，不一定是矩形区域
⑤，两个内联元素之间有一个间隙（折行带来的间隙）
一般情况下是不需要解决这个问题的，因为我们一般用块做布局，用内联元素做文本修饰
解决 ： 1，然内联元素写到一行上
2，给父容器设置font-size=0，再给当前元素设置正常的文字大小
3，inline-block（内联的块）
input，select
同时具有内联样式与块样式的特性
2，按显示分
1，替换元素 ： 浏览器根据元素的标签和属性，决定元素的具体显示内容。
img，input
2，非替换元素 ： 将内容直接告诉浏览器，将其显示出来
<div>aaaaaaa</div>
注 ： 图片<img>是一个内联标签，但是它可以调节宽高（因为它还是一个替换元素）
3，display
查看每一个标签的类型（显示框类型）
值 ：
block ， inline ， inline-block ， none
none ： 不显示标签（不占位），类似于border-right：none text-decoration：none
display ： none 与 visibility：hidden（不显示标签，原标签位置留白）的区别 ： 后者是占位的
4，标签嵌套规范
可以通过右键，对选中代码进行格式化（整理杂乱无章的代码）
标签本身就有许多嵌套规范
table(tr(td,th))
ul，li
dl，dd，dt
块标签可以嵌套内联标签
<div> √
<span></span>
</div>
块标签不一定能嵌套块标签
<div> √
<div></div>
</div>
特殊
<p> ×
<div></div>
</p>
内联标签不可以嵌套块标签
<span> ×
<div></div>
</span>
特殊
<a href=""> √
<div></div>
</a>
不能自己嵌套自己的操作：
<a href=""> 错
<a href=""></a>
</a>
<h2> 错
<h2></h2>
</h2>
5，透明度
opacity ： 0（完全透明） ~ 1（不透明），跟display：none 也是有区别的。
rgb（），rgba（）a的取值也是0-1，
使用rgba（）设置透明度会使背景透明，容器的内容不会透明，而使用opacity可以使容器完全透明。
6，手势
cursor ： default pointer
总结手型：https://www.w3school.com.cn/cssref/pr_class_cursor.asp
自定义鼠标样式 ：要求图片是有格式的 .cur .ico
7,最大最小宽高
height=100px； ==100
min-height=100px； >=100
max-height=100px; <=100
对100%单位做一个扩展学习
100%单位永远只与父容器有关
8，CSS默认样式
有默认样式的：
body : margin 8px
p : 上下margin 1em;-> 16px;
h1 h2 h3 : font-size不一样，有上下margin
ul : 默认的小点（disc） 左padding 上下margin
a : color: -webkit-link; cursor: pointer; text-decoration: underline;
无默认样式的：
div span...........
在开发一个网页之前：
1，先写一个结构HTML
2，去掉标签的默认样式
3，在PS工具中进行CSS样式的测量
去掉默认样式，css reset方案
body,p,h1,h2,h3,ul,ol{margin:0; padding:0 }
*{margin:0; padding:0}
ul,ol{list-style:none}
a{text-decoration:none}
img{display:block} img{vertical-align:bottom;}
vertical-align属性 可以对inline进行一个对齐方式的改变
默认：baseline（基线）bottom top middle
常见的CSS reset：https://blog.csdn.net/brain_bo/article/details/815604444
原文地址：https://www.cnblogs.com/lykpy/p/12332751.html