标签分类、转换类型display、溢出隐藏overflow、透明度、手势、CSS默认样式、重置样式

按类型分类的标签分类

block块元素： 如div、p、ul、li、h1等，其特点如下

• 独占一行
• 支持所有样式，如width、padding、margin....
• 不写宽的时候，跟父元素的宽相同
• 所占区域是一个矩形

inline内联元素：如span、a、em、strong、img等，其特点有

• 挨在一起排列如排列在一行上
• 有些样式不支持，如width、height、margin（只支持左右）、padding（只支持左右）
• 不写宽的时候，宽度由内容决定
• 所占的区域不一定是矩形
• 内联标签之间会有空隙，原因是换行产生

inline-block内联块元素：如input、select等。特点如下

• 拥有块元素和内联元素的特点，如挨在一起排列如两个input的text文本框，标签之间有空隙，支持width、height

注：布局一般用块标签，修饰文本一般用内联标签

按内容分类的标签

 Flow：流内容

Metadata：元数据

Sectioning：分区

Heading：标题

Phrasing：措辞

Embedded：嵌入的

Interactive：互动的

详情：https://www.w3.org/TR/html5/dom.html

按显示分类

替换元素：浏览器根据元素的标签及属性来决定元素的具体显示内容。如img由src决定、input由type决定

非替换元素:将内容直接告诉浏览器，将其显示出来。如div，h1，p.....

显示框类型

• 可通过display来转换类型

display：值有block、inline、inline-block、none（不显示标签内容，即隐藏span、div等）

display：none；与visibility：hidden；都表示隐藏的意思，它们的区别是

• display：none；指不占空间的隐藏
• visibility：hidden；指占空间的隐藏，该元素是占据位置的

 溢出隐藏

overflow：值有

visible：(默认可见即若内容过多会溢出)

hidden：溢出部分隐藏处理

scroll：不管是否溢出都添加X轴和Y轴滚动条

auto：自适应/自判断，即溢出才添加滚动条

overflow-x，overflow-y可根据需要针对两个轴分别设置滚动条

透明度

 opacity：0~1；  0为透明，1为不透明

注：就算设置全透明，也是占空间的，而且所有的子元素如文本文字等也会透明，即继承透明度关系

rgba（255，255，255，0.5）；   a代表透明度也为0~1

注：可以指定样式透明而不影响其他样式

手势

cursor：手势

default：默认为鼠标的箭头

实现自定义手势：要先准备图片：.cur  、.ico      然后src引入图片  如  cursor：url（./img/cursor.ico）,auto;

CSS默认样式

• 有些标签有默认样式：

body(margin：8px)、  h1(上下margin21.44px)~h6、  p(上下margin16px)、ul(上下margin16px，左padding40px，list-style：dis)、a(text-decoration：underline)....

• 有些标签是没有默认样式：div、span....

 CSS重置样式

css reset重置样式：

• *{ margin：0；padding：0；}   优点：不用考虑哪些标签有默认的margin和padding   缺点：稍微影响性能问题(即把一些没有默认样式的如div、span等也重置的，稍微耗时间效率低)。可以单个设置，如body,p,h1,ul{ margin:0; padding:0 }
• ul { list-style : none; }
• a { text-decoration: none; color: #999 }
• img { dispaly: block }   问题的现象：图片跟容器底部有一些空隙。原因：内联元素的对齐方式是按照文字基线对齐的，而不是文字底部对齐的，从而该空隙是留给底部像xy中的y这样的文本去插入。解决方法：vertical-align：baseline；（默认基线对齐方式），vertical-align：bottom；（设置为底部对齐方式）。当然将img设置为块元素是我们常用的解决办法。