CSS的元素显示模式

一、什么是元素显示模式

网页的标签非常多，在不同地方会用到不同类型的标签。了解他们的特点可以更好的布局我们的网页

元素显示模式就是元素（标签）以什么方式进行显示。

HTML元素一般分为块元素和行内元素两种类型

二、块元素

常见的块元素<h1><p><div><ul><ol><li>

块级元素的特点

1、比较霸道，自己独占一行

2、高度、宽度、外边距以及内边距都可以控制

3、宽度默认是容器（父级宽度）的100%

4、是一个容器及盒子，里面可以放行内或者块级元素。

注意：

文字类的元素内不能使用块级元素，比如<p>,<h1>--<h6>

三、行内元素

常见的行内元素有<a> <strong> <span>

<span>标签是最典型的行内元素，有的地方也将行内元素称为内联元素。

行内元素的特点

1、相邻行内元素在一行上，一行可以显示多个

2、宽、高直接设置是无效的

3、默认宽度就是它本身内容的宽度

4、行内元素只能容纳文本或其它行内元素

注意：

链接里面不能再放链接

特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

四、行内块元素

在行内元素中有几个特殊的标签，<img><input><td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点

1、和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）

2、默认宽度是它本身内容的宽度（行内元素特定）

3、高度、行高、外边距以及内边距都可以控制（块级元素特点）

五、元素显示模式转换

一个模式的元素需要另外一种模式的特点

转换为块级元素　　display:block

转换为行内元素　　display:inline

转换为行内块元素　　display:inline-block

六、一个小工具的使用snipaste

snipaste是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上

常用的快捷方式

1、F1可以截图，同时测量大小，设置箭头，书写文字等

2、F3在桌面指定显示

3、点击图片，alt可以取色（按下shift可以切换取色模式）

4、按下esc取消图片显示

七、一个小技巧，单行文字垂直居中的代码

让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。

原理：

行高 = 上空隙 + 文字本身高度 + 下间隙

盒子高度 = 上空隙 + 文字本身高度 + 下空隙

简单理解：行高的上空隙和下空隙把文字挤到中间了，如果行高小于盒子高度，文字会偏上，如果行高大于盒子高度，则文字偏下。