html标签分类
1)行级元素,也叫内联元素 (inline)
特点:
a. 与其他行内元素共享一行
b. 不可以通过css改变宽高,由内容决定元素大小(使用字体大小,行高,字体类型间接调整)
c. padding,margin,border只有水平方向有效,垂直方向不会占据实际空间
例如 span, a, strong, em, i, del, label, br...
2)块级元素 (block)
特点:
a. 独占一行,在不设置宽高时,块级元素默认填满父级元素的宽度
b. 可以通过css改变宽高
c. padding,margin,border属性设置全部有效
例如 div, p, ul, li, ol, dl, table, form, address, pre, h1-h6, hr...
3)行级(内联)块元素 (inline-block)
特点:
a. 与其他行内元素共享一行
b. 可以通过css改变宽高
c. padding,margin,border属性设置全部有效
例如 img, input...
元素包含关系
行级元素不能包含块级元素,块级元素可以包含行级元素(之前的说法)
(现在的说法)元素的包含关系由元素的内容类别决定(具体查询官方文档)
1. 容器元素中可以包含任何元素
2. a元素可以包含几乎所有的元素
3.有固定子元素的元素(ul>li, ol>li, dl>dt+dd)
4.标题元素和段落元素不能相互嵌套,也不能包含容器元素
文本类元素
inline和inline-block都是文本类元素,但凡带有inline属性的元素都有文本类特点,都会被文字分隔符(空白符)分割产生间隙。
解决方法:
1. 去除换行
2. 设置font-size:0;
关于display
给行级元素加上position:absolute; float:left/right; 内部会隐式的将属性改成display:inline-block;
我们可以通过display更改元素属性,它的默认值为inline,如果将display的值设为none,则元素消失。
可替换元素和非可替换元素
大部分元素,页面上显示的结果,取决于元素内容,称为"非可替换元素"
少部分元素,页面上显示的结果,取决于元素属性,称为"可替换元素"
例如:img、video、audio...大部分可替换元素均为行盒(行级元素)
可替换元素相当于行块盒(行级块元素),盒模型中的所有尺寸都有效