标签的显示模式:块状元素、行内元素(内联元素)、行内块元素
块状元素 :div/h1-h6/p/ul/li/ol/dl/dd/dt/table/tr/td/caption/thead/tbody/form/textera/
- 有默认的宽高,宽是父元素的100%,高度是内容所称起来的高度
- 宽高是可以设置的
- 独占一行
- 可以容纳其他的块状元素、行内元素、行内块元素
- 可以设置外边距、内边距、边框
- 注意: h标签、p标签尽量的不要去容纳块状元素
行内块元素 img/input/
- 有默认的宽高,就是自带的宽高
- 可以设置宽高
- 可以与相邻的行内元素和行内块元素在同一水平线下显示
- 外边距、内边距、边框都是可以设置的
行内元素 span b strong i em u ins s del a
- 有默认宽高,都是内容所撑起来的
- 宽高设置无效
- 与相邻的行内元素或者行内块元素同一行上显示
- 可以去包含行内元素,但是不能包含块状元素及行内块元素
- 水平方向上的外边距和内边距是可以设置的,垂直方向无效,边框也是可以设置的
- 注意: a标签可以去包含块状元素以及行内元素 ,链接里面不能再放链接
元素的转化
- 块转行内:display:inline;
- 行内转块:display:block;
- 块、行内元素转换为行内块: display: inline-block;