元素显示模式
元素显示模式就是元素以什么 方式显示。
块元素
特点:
-
独占一行;
-
可以在样式里设置宽高,内外边距;
-
宽度默认是父容器的100%;
-
可以装其他的块元素或行内元素。
注意:文字类的元素内不能使用块元素。 例 p, 主要用于存放文字,里面不能放块级元素 如div。 h1-h6都是文字类块级标签,不能放其他块元素。
块元素 div p h1-h6 ul li
行内元素
特点:
-
一行可显示多个;
-
高宽直接设置是无效的;
-
默认宽度就是本身内容的宽度;
-
行内元素只能容纳文本或其他行内元素。
注意:a里面不能再放a;a里面可以包含块元素 但需转换.
行内元素 span a strong/b em/ i del/s
解决内联元素间隙的方法:
- 去掉内联元素之间的换行
- 将内联元素的腹肌设置 font - size 为 0 ,内联元素自身在设置 font - size
总结: 行内元素水平方向有效,竖直方向无效
行内块元素
特点:
-
和相邻行内元素在一行上,但是中间有空白缝隙;
-
一行可显示多个;
-
默认宽度就是他本身内容的宽度
-
高度,行高,内外边距都可以设置
行内块元素 input,img td
元素显示模式的转换:
转换为块元素:display:block;
转换为行内元素:display:inline;
转换为行内块元素:display:inline-block;