CSS标签分类、显示框类型、嵌套规范、溢出隐藏、透明度与手势、默认样式、reset

标签分类

按类型
block : div,p,ul,li,h1…
1,独占一行
2.支持所有样式
3.不写宽的时候，和父元素的宽相同
4.所占区域是一个矩形

inline: span, a ,em ,strong, img…
1.挨在一起的
2.有些样式不支持，例如:width,height,margin,padding
3.不写宽的时候，宽度由内容决定
4.所占的区域不一定是矩形
5.内联标签之间会有空隙，原因:换行产生的

inline-block:input,select…
1.挨在一起，但是支持宽高

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

按内容
flow:流内容
metadata:元数据
sectioning:分区
heading:标题
phrasing:措辞
embedded：嵌入的
interactive:互动的

按显示

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

显示框类型

display
block
inline
inline-block
none:不占空间的隐藏(visibility:hidden占空间的隐藏)

标签嵌套规范

常见标签组合
ul、li\ol、li
dl、dt、dd
table、tr、td

1.块能够嵌套内联
2.块大多数能够嵌套块
特殊：p标签中不允许嵌套div
3.内联标签不能嵌套块标签
特殊：a标签可以嵌套块

overflow溢出隐藏

overflow:
visible:默认
hidden：直接隐藏溢出内容
scroll：添加滚动条
auto：内容溢出就转为scroll,内容未满就直接显示
x轴y轴:overflow-x,overflow-y分别针对两个轴进行设置

透明度与手势

透明度
opacity:0(透明）~1（不透明）
注意：透明度为0也占据空间，所有的子内容也会透明
rgba()：只会让背景透明，内容不会透明
手势
cursor:手势(鼠标样式）

css默认样式

有些标签有默认样式，有些标签没有默认样式
没有默认样式
div,span
有默认样式(有些默认样式是有益的，有些是影响开发的）
body -> margin:8px
h1 -> margin:上下21.440px
p -> margin:上下16px
ul -> margin：上下16px padding-left:40px 默认点：list-style:disc
a -> text-decoration:underline;

css 默认样式reset

*{ margin:0: padding:0}
优点，不用考虑哪些标签有默认的Margin和padding
缺点：稍微的影响性能

ul{list-style:none}
a{text-decoration:none;color:#999;}

img{display:block}
问题的现象:图片和容器底部有一些空隙
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
修改方式：
img{vertical-align:bottom(底线对齐方式)\baseline(基线对齐方式，默认值);}

写具体页面的时候或一个布局效果的时候：
1.写结构
2.CSS重置样式
3.写具体样式