携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

正常布局流—CSS学习笔记

前言

本篇文章将会针对正常的布局流进行介绍---也就是没有修改任何默认的布局属性与规则之下的布局方式。正常布局流确保了文件的易读可读性，即便用户的浏览器兼容性或者屏幕阅读器受限依然能有较好的表现效果。此外，在做出布局的改动之前，它也是上手任何页面的最佳方式，下面让我来看看默认的页面布局会是什么样子。

默认页面布局

首先，我们需要知道页面是由一个一个的“盒子”所组成的，通过元素的内容、内边距、边框以及外边距组成一个盒子模型。

其次，我们需要知道元素类型的不同所呈现的表现方式也不一样。

一是块级元素默认内容宽度是其父元素的100%，高度与内容高度一致,且有默认的外边距与根元素的字体大小一致一般为16px。例如，在body元素下添加<p>ddddd</p>

它的内容宽度变为body的宽度，高度为内容高度，外边距为16px。

二是内联元素的高度和宽度都与内容保持一致且无法为其设置高度和宽度。一般内联元素都会嵌于块级元素的内容里，若要单独为其设置尺寸，需要设置css属性display:block或display:inline-block。

三是不同元素之间的表现。一般而言，网页都是按自上而上的方式排列的。块级元素会在上一个元素下面另起一行，并按照设置好的margin值分隔

如果两个上下相邻的元素都设置了 margin 并且两个 margin 有重叠，那么更大的设置会被保留，小的则会消失 --- 这被称为外边距叠加

内联元素不会，只要行宽度还足够，它便会按前面内容（内联元素或文本内容）顺序排列。如果不够，溢出的内容将会被排至下一行。

下面我们通过一个例子来看一下（为了表现清楚采取内联样式表，一般不推荐）。

<div style="width: 40%">
<p>这是段落一，将会与下面的段落有margin边距。</p>
<p style="margin-top: 30px">这是段落二，将会设置较大上边距。</p>
<p>
    这是段落三，将会有内联元素在这个段落。 <span>我是内联元素1</span>
    <span>我是内联元素2,超出宽度，我将会另起一行</span> 本段落到此结束。
</p>
</div>