概述: 显示模式是指元素以什么方式显示,如div默认独占一行,span默认可以多个在一行排列,了解它们的特点与分类可以更好的布局网页。HTML元素一般分为块级元素与行内元素、行内块元素
1、元素默认显示模式与元素特性总结
-
本身属性为display:block;的元素 称为块级元素
-
常见块级元素 div,h1-h6,p,ul,li,dl,dt,ol
-
-
本身属性为display:inline;的元素称为行级元素
-
常见行级元素:span,strong,em,i,a,b
-
-
本身属性为display:inline-block的元素称为行级块元素
-
常见行内块元素:img、input(表单元素后续会讲到)
-
1、块级元素特性总结
-
没有设置宽高的时候,宽继承父元素的宽度,高度由内容撑开
-
默认独立成行——默认垂直布局
-
具有盒模型特征(默认可以设置宽度、高度、padding、margin、border)可以设置上下左右的内边距和外边距。
2、行内(行级)元素特性总结
-
宽度默认由内容撑开
-
高度默认由内容撑开
-
默认横向显示——默认水平布局,相邻的行级元素会在同一行显示,直到一行排不下,才会换行
-
换行和空格会被解析
-
不能设置宽高
-
只能设置左右的外边距,不能设置上下的外边距
-
可以设置上下左右的内边距和边框。
-
行内元素只能容纳文本或者其他行级元素(此处请注意,不要在行级元素中嵌套块级和行内块元素) 。
3、行内块元素特性总结
-
可以设置宽高
-
默认横向显示——默认水平布局,相邻的行级元素会在同一行显示,直到一行排不下,才会换行;
-
换行和空格会被解析
-
具有盒模型特征(默认可以设置宽度、高度、padding、margin、border)可以设置上下左右的内边距和外边距。
4、元素类型转换
特殊情况下我们需要进行元素的模式转换,改变默认元素模式使其拥有另一种元素模式的特性,使用display属性能够将三者任意转换。
-
display:inline;转换为行内元素。 【不常用】
-
display:block;转换为块状元素。 【常用】
-
display:inline-block;转换为行内块状元素 【比较常用】
2、CSS显示隐藏
display:
-
none:隐藏该元素并且该元素所占的空间也不存在了。
-
block; 显示元素
visibility:
-
hidden 隐藏该元素但是该元素所占的内存空间还存在,即“隐身效果”。
-
visible 显示元素
3、垂直对齐方式 vertical-align属性
常用的值:
-
vertical-align: baseline; 默认值,基线对齐 英文字母x的下端
-
vertical-align: top; 顶端对齐
-
vertical-align: bottom; 底端对齐
-
vertical-align: middle; 中部对齐
典型应用
-
图片与图片垂直方向的对齐
-
图片与文字垂直方向的对齐
-
图片与文本框垂直方向的对齐
图片下方间隙问题
图片间隙问题产生的原因:父元素没有设置高度,由图片撑开,就会有图片三像素问题
-
为img标签的父元素设置font-size:0;(水平方向和垂直方向间隙)或line-height:0;
-
将img标签转成块级元素img{ display: block;}
-
为img标签设置垂直对齐方式img{ vertical-align: top|bottom|middle; }
-
为img标签的父元素设置高度,高和图片的高一样
图片居中
方法1:父元素{text-align:center}
方法2:图片{display:block;margin:0 auto;}
img{ display: block; margin: 0 auto; }