初识HTML（五）进阶：CSS盒子模型、页面布局

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距margin，边框border，填充padding，和实际内容（文本、或者图片、或者其它标签）。

盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)： 标准的W3C盒子模型：

元素的宽度和高度

重点: 当你指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整元素大小还包括外边距、边框、内边距。

下面的例子中的元素的总宽度为300px：

我们实际定义为300px，那么此时我们再来计算一下盒子的总宽度：

在页面检查元素后，显示出整个盒子的大小，横向显示的与实际宽度相加最后就是450px的盒子宽度：

最终元素的总宽度计算公式是这样的：

元素的总高度最终计算公式是这样的：

如果我们没有填写边框、填充、边距等，那么我们内容区域就是我们实际填写的宽度。

规定好页面有哪些区域存放内容提前将标签布置到哪些区域上，后续只需要填写内容即可。

那么在布置标签方面我们有三种方案：

标准流也就是我们平常所用标签，只要是块标签就会独占一行，通过标签的特性来布局，但是现在的网页通常都不会用这种方式来进行网页布局。

我们主要关注的就是浮动流与定位流，当熟悉以后，可根据自身需求来决定布局方式。

主要通过float属性来实现，该属性可以让我们的元素浮动起来，如果是块标签从而不会独占一行。浮动流主要针对的是水平布局

浮动起来的元素，相当于原地飘起来了，从而其它的元素会顶到它飘之前的位置，而浮动元素则对顶上来的元素进行覆盖显示，实例：

float属性可以选择左浮动还是右浮动，设置完属性以后，飘起来寻找在它之前就已经浮动的元素，如果它们浮动方向相同的话，该元素就会那个元素的后面，否则只能根据浮动方向贴着body显示。

代码查看两个向同一个方向float的元素

首先html代码从上至下运行，首先蓝色元素先浮起来之后，粉色元素顶到它所在的位置，此时粉色元素也浮起来了，并且在当前行找到已经提前在这个在这个方向浮动的元素了，那么就会贴在它后面显示。

浮动原则：

演示两个元素向不同方向浮动：

蓝色向左浮动，没有找到在它之前已经向左浮动的元素，所以贴在父标签的左边。 粉色向右浮动，没有找到在它之前已经向右浮动的元素，所以贴在父标签的右边。

结合上面我们再理解浮动已经很简单了:

上面图片里的div1就是标准流没有添加浮动属性，而第二排添加的两个float:right;属性元素，而div4则使用了float:left;

而如果我们要达到这种浮动效果呢：

此时我们就要了解清除浮动了，有了上面基础作为铺垫，清除浮动也很容易理解

经过上边的一系列操作，可以看出：元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。

清除浮动可以理解为打破浮动流的横向排列。

那么我们来看一张图理解一下： 如果此时我们的需求是，div1和div2都要向左浮动，但是又要让div2排在div1下面，就像div1没有浮动，div2有浮动的那种样子，这时候就要用到：“清除浮动”

如果单纯根据官方定义，可能会尝试这样写：在div1的CSS样式中添加clear:right;理解为不允许div1的右边有浮动元素，由于div2是浮动元素，因此会自动下移一行来满足规则。

其实这种理解是不正确的，这样做没有任何效果。实际应用就是：

所以应该这样写，div2的CSS样式增加clear:left;表示div2左边不能存在浮动元素，因此如果存在浮动元素，那么div2就被迫移动到下一行了。

那么这个图片里面的实现效果也就有了： 先div1向右浮动，div2顺利顶到了第一行，那么此时div2增加属性clear:right;自然就被迫换行了，然后div2再使用float:right;那么就可以实现上序的效果了。

如果页面已经存在浮动，此时如果再出现文本的话将会围绕浮动元素显示。

html实现：

我们有时候进行页面布局，部分父元素是不设置高度的，自适应子元素的高度，本身也可以这样，但是如果子元素使用了float之后就会出现问题了。

浮动元素使其父元素高度塌陷

当出现这个问题时，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有一个边框，那么浮动元素无法将边框撑开。

解决方法：

overflow:hidden

::after 伪类

利用伪类来清除浮动，其效果跟创建一个空的div并设置其为clear：both；是一样的，只不过这里用伪类代替了空的div元素，"伪类相当于一个隐藏标签"

通常推荐使用伪类来解决这个问题，使用伪类就是为了避免再创建一个标签，还要增加id或者class等问题，而伪类也本质上也相当于一个隐形标签。

当我们打开csdn的首页不难发现，导航栏就是提供一些选项供用户选择的： 像这种样式的导航栏，通常使用了ul列表来制作的，那么如何实现我们来了解一下吧。 html实现：

通常我们在页面布局时所有元素的宽高都会定义为百分比，因为每个浏览器又或者每台计算机的分辨率是不一样的，使用百分比可以进行自适应。

我们可以使用浮动流对整个页面进行布局，下面来讲述如何通过float来布局。

通常页面分为3部分：页眉(通常为导航栏)、内容区域、页脚(可以放一些页面信息等等) 上面图片里就是通过float来进行的布局

html实现：

通过定位流的html布局则是可以将元素布置在网页的任意位置，不受只能垂直、或者只能水平的限制。

定位是通过position属性来实现的，介绍属性的几个常见参数：

相对定位元素的定位是相对其正常位置。

其定位方式很类似于margin属性，即使相对定位元素的内容移动了，预留空间的元素仍保存在正常流动。

相对定位元素经常被用来作为绝对定位元素的容器块：也就是经常作为使用绝对定位元素的父标签。

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它将参照元素来定位

这个子元素会找最近已经定位的父元素，但是没有找到，如果涉及到嵌套它的元素都没有使用定位，那么就参照body来定位了。

注意：使用绝对定位后，就相当于浮起来了，不会占用空间。

通常如果子元素要使用absolute我们会给父元素加上relative作为子元素的参照

给父元素加上position:relative后： 使用了绝对定位之间的元素会发生重叠

这就涉及到了显示优先级的问题，当我们想指定哪个使用了绝对定位属性的元素优先级时，可以使用z-index属性，先说说它的使用原则:

上面图片里都是共同的父元素，所以使用对比子元素的优先级，默认后定义的会覆盖之前定义的，那么我们设置一下。

通常z-index在元素使用了绝对定位属性后使用

还有一个注意点：绝对定位是相对于当前页面定位的，而不是整个页面的宽度

实例演示：

我们给body设置的是2000px 此时页面滚动条，不拖动滚动条时，元素正常右上角显示，当拖动滚动条后发现元素并没有贴着右上角继续显示。 在这方面操作就是绝对定位所不能达到的，那么此时再来介绍一下固定定位。

固定定位的元素是相对于浏览器窗口进行位置。

即使窗口是滚动的它也不会移动：

代码实现：

当我们熟悉了定位流后，此时已经可以让我们的任意元素到达页面的任意位置了。

如果本文对您有帮助，别忘一键3连，感谢支持！

技术小白记录学习过程，有错误或不解的地方还请评论区留言，如果这篇文章对你有所帮助请点赞 收藏+关注 子夜期待您的关注，谢谢支持！

下一章传送门：了解JavaScript