四、网页布局及display属性

一、本课目标

• 理解什么是标准文档流
• 掌握display属性的使用及场景

二、标准文档流

2.1常见网页布局：

image.png

image.png

image.png

标准文档流；指元素根据块元素或者行内元素的特性从上到下，从左到右的方式自然排列。这也是元素默认的排列方式。

2.2标准文档流组成

• 块级元素：

  ...

  、

  、

  、列表

• 内联元素（inline）：、、、...

注：内联标签可以包含于块级标签中，称为它的子元素，而反过来则不成立
疑问：这个注是不是有问题啊，我命名可以在strong标签里面加入p标签，如下：

    
    


adfadf
asdf

结果如下：

image.png

注：这个地方应该这样理解：从排版的角度去考虑的话，内联元素里面套块元素会给排版造成极大的麻烦，并非这样做会有语法错误。

三、display属性（能让行内元素显示宽高，能让行内元素具有块元素的特性）

display属性的非常重要的属性值：

image.png

3.1display-block属性

示例代码：

    
    
    


    
我是p元素
    我是span元素

运行结果

image.png

分析：虽然在样式中给p元素和span元素都设置了宽和高都是100px，但是从结果可以看出，p元素的宽和高都是100px，而span元素则不是。这是因为 内联元素默认不支持宽和高。
当在两个标签的样式内都加入这段代码： display: block;之后，如下：

    
    
    


    
我是p元素
    我是span行内元素

运行结果如下：

image.png

分析：可以看到对p标签没有任何影响，而使得span元素具有了块元素的特性，支持宽和高并且换行。

3.2 display: inline属性（让块元素具有行内元素的属性，并且不支持宽高）

示例代码：

    
    
    


    
我是p元素
    我是span行内元素
    我是Strong元素

运行结果：

image.png

分析：此时从结果可以看出，p标签和span标签排在一行了，此时p标签不再具有块元素的属性，而是靠内容来决定它的高度和宽度了。

3.3display: inline-block属性

示例代码：

    
    
    


    
我是p元素
    我是span行内元素

运行结果：

image.png

分析：没对齐，不知道原因是什么，但是可以看到这两个元素可以排到一行了。 两个块元素之间出现空格的原因是在html中这两个块元素是两行，在浏览器解析的时候就把这两行之间的空白解析为空格，当这两个元素排在一起的时候就不会有空白了，但是在实际写代码的时候未必能做到让你想要排在一起的元素都排在一行。

3.4display: none属性

示例代码：

    
    
    


    
我是p元素
    我是span行内元素

运行结果：

image.png

分析：这个时候span标签在页面上显示不出来，但是查看网页源代码的时候依然有span标签的代码。
注：这个属性并不是没用，而是作用很大