html标签分类

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...大部分可替换元素均为行盒(行级元素)     

可替换元素相当于行块盒(行级块元素)，盒模型中的所有尺寸都有效