CSS显示模式

概述：
显示模式是指元素以什么方式显示，如div默认独占一行，span默认可以多个在一行排列，了解它们的特点与分类可以更好的布局网页。HTML元素一般分为块级元素与行内元
素、行内块元素

元素默认显示模式与元素特性总结

本身属性为display:block;的元素 称为块级元素
常见块级元素 div,h1-h6,p,ul,li,dl,dt,ol
本身属性为display:inline;的元素称为行级元素
常见行级元素：span,strong,em,i,a,b
本身属性为display:inline-block的元素称为行级块元素
常见行内块元素：img、input

块级元素特性总结

独成一行，可以设置宽高。
在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度。
在不设置高度的情况下，块级元素的高度是它本身内容的高度。
可以设置上下左右的内边距和外边距。

行内元素特性总结

默认并排，不可以设置宽高，宽高取决于内容。
行内元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素） 。 
行标签之间有间隙,不可以设置上下外边距。

元素类型转换

特殊情况下我们需要进行元素的模式转换，改变默认元素模式使其拥有另一种元素模式的特性，使用display属性能够将三者任意转换。

display:inline;转换为行内元素。 【不常用】
display:block;转换为块状元素。 【常用】
display:inline-block;转换为行内块状元素 【比较常用】

CSS显示隐藏

display:

none：隐藏该元素并且该元素所占的空间也不存在了。
block; 显示元素

visibility:

hidden 隐藏该元素但是该元素所占的内存空间还存在，即“隐身效果”。
visible 显示元素

CSS图片

清除图片下间隙

原因：图片默认与文本的基线对齐

解决方法一：将图片显示为块

img{display:block;}

解决方法二：改变图片的对齐方式，

img{vertical-align:不为baseline}

vertical-align 属性详解

作用1：回顾表格处的应用
作用2：定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

常用的值：

baseline 默认。标签放置在父标签的基线上。
top 把标签的顶端与行中最高标签的顶端对齐。
middle 把此标签放置在父标签的中部。
bottom 把标签的顶端与行中最低的标签的顶端对齐。

典型应用

图片与图片垂直方向的对齐（行内块与行内块）
图片与文字垂直方向的对齐

图片居中

方法1：父元素{text-align:center}
方法2：父元素{display:block;margin:0 auto;}