1. CSS基本术语

一 CSS基本术语

Html相当于毛坯房

Css对这个毛坯房进行了精装修

术语：

1. 文档流: 页面元素的默认排列方式,根据元素在html文档中的顺序依次排列,从左到右、从上到下;

可以看到因为div在p标签的上面，所以先显示div里面的内容

2. 块元素: 默认占一行,沿垂直方向排列,可以设置宽度和高度,例如:<div>,<p>,<h2><form>...;

如下所示：调试显示block的就是块元素

3. 行内元素: 默认在一行内沿水平方向排列，一行内显示不完则换行显示,宽宽和高度由内容决定,不能设置,例如<span><a><em>...;

可以看到，虽然三个a标签在三行，但是内容显示在一行

它的display属性是inline

4. 替换元素: 元素内容由标签的属性来设置,标签其实就是一个占位符,例如<img src=""><input type=""> <link>

可以看到图片没有在当前文档中，而是通过src导入了外部的资源

替换元素默认导入的是行内元素:

我们讲行内元素不能设置宽度和高度，但是img 这个行内元素可以设置宽度和高度

所以替换元素如果是可视元素，那么它就是行内块 display:inline_block :

不同的浏览器显示不同，如图所示显示的是行内元素，但是有高度，称为行内块

列表也是块元素，称为列表块，可以看到其独占一行

显示为列表块：

5. 非替换元素: 元素内容就包含在当前的标签中,例如<p>,<h1>,<link> 来自文档

6. 如何区分替换与非替换元素呢?

   6-1.替换元素因为元素内容来自外部资源,所以大多仅需要一个标签就可以,因为单标签比较多,但也有例外,例如:

   <video><script><video>...这些标签大多具有src,指明要引入的资源路径.如果标签中有内容要么无效,

   要么仅仅是一个资源的引入。

   6-2.非替换元素,它的内容由用户直接写在标签中,例如<p>,<h3>等文本类标签,是最常见的非替换元素