网页的两种类型标签,一种是块,负责位置布局,另一种是行负责内容修改。
标签元素特点:
1.有宽高
2. 独占一行
块级元素两者都有:有宽高,独占一行
行内元素两者都没有:无宽高,不独占一行
行内块元素有其一: 有宽高,不独占一行
三种显示模式的特点:
(1)块级元素(block)特性:
1.总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
2.宽度、高度、对齐等属性都可控制;
(2)行内元素(inline)特性:
1.和相邻的内联元素在同一行
2.宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,仅仅靠自身的字体大小和图像尺寸来支撑结构
3.行内元素只能容纳文本或则其他行内元素
(3)行内块元素(inline-block)的特点:
1.和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
2.默认宽度就是它本身内容的宽度。
3.高度,行高、外边距以及内边距都可以控制。
典型的块级元素: h1-h6 p ul li table div
典型的行内元素:strong u b I em ins del a标签 span
典型的行内块元素: img input td
注意: 块级元素的如果没有宽,默认通栏100%
三种显示模式相互转换
属性display ,可以改变标签的特点
属性值:
block 转为块级元素
inline 转为行内元素
inline-block 转为行内块元素
none 可以隐藏某个元素,且隐藏的元素不会占用任何空间