HTML中的标签分类:
块标签特性
1. 独占一行
2. 支持所有的样式
3. 宽度撑满整行(不设置宽度的情况下)
header, footer, nav, section, article, aside, main, figure, figcaption, div, p, ul, li, ol, dl, dt, dd, form, option, h1, h2, h3, h4, h5, h6
内嵌标签特性
1. 可在一行显示
2. 不支持宽高以及上下的margin,上下的padding也有问题
3. 宽度由内容撑开
4. 代码换行产生空格(会受字体和字体大小的影响)
a, span, mark, time, strong, i, small, b, label
内联块标签特性
1. 在IE6-7下,不支持块标签转内联块标签
2. 触发BFC
3. 支持宽高
4. 在一行显示
5. 代码换行有空格
6. 不设置宽度,宽度由内容撑开
7. 默认元素的下边会有1px的间隙,在表格之外,规定内联块标签的相互对齐方式为
vetical-align: top/middle/bottom ,在使用时都加上
img, input, textarea, select, button
特殊的内联块标签img
只设置宽度或高度,图片会等比缩放
同时设置宽高拉伸图片造成变形
支持宽高,在一行显示
代码换行产生空格
在IE10之前的IE浏览器中,a标签包着图片,图片上会多一个边框
因而 img的默认样式的清除 设置为:
img { vertical-align:top; border:none; }
块标签 -> display:inline -> 内嵌标签
块标签,内嵌标签 -> display:inline-block; (vertical-align:top;) ->内联块标签
内联标签,内嵌标签 -> display:block; -> 块标签
标签的嵌套规范:
1. a标签中不可包含a标签
2. 内嵌标签中不可包含块标签
3. 部分标签中也不可包含块标签(h1-h6,p)
4. ul,li,ol,li,dl,dt,dd 这些是固定的嵌套,不能更改