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

CSS 盒子模型(Box Model)

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

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

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

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

标准的W3C盒子模型：

元素的宽度和高度

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

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

<style>div {background-color: pink;width: 300px;border: 25px solid skyblue; /* 设置上右下左边框：每个占25px */padding: 25px; /* 设置上右下左内边距：每个占25px */margin: 25px; /* 设置上右下左外边距：每个占25px */}
</style>

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

300px+50px(左右间距)+50px(左右边框)+50px(左右填充) = 450px

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

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

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

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

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

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

页面布局

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

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

标准流（文档流）
浮动流
定位流

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

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

浮动流

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

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

<html>
<head><title>float练习</title><style>.box1{width: 200px;height: 200px;background-color: skyblue;float: left;}.box2{width: 300px;height: 300px;background-color: pink;}</style></head><body><div class="box box1"></div><div class="box box2"></div></body>
</html>

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

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

<html>
<head><title>float练习</title><style>.box{width: 200px;height: 200px;}.box1{background-color: skyblue;float: left;}.box2{background-color: pink;float: left;}</style></head><body><div class="box box1"></div><div class="box box2"></div></body>
</html>

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

浮动原则：

同一行有相同方向的浮动就找到它在后面贴着显示
同一行相同方向没有浮动元素，就按照浮动方向贴着父标签的对应位置显示

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

<html>
<head><title>float练习</title><style>.box{width: 200px;height: 200px;}.box1{background-color: skyblue;float: left;}.box2{background-color: pink;float: right;}</style></head><body><div class="box box1"></div><div class="box box2"></div></body>
</html>

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

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

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

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

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

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

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

清除浮动的关键字是clear，官方定义如下：语法：clear : none | left | right | both取值：none  :  默认值。允许两边都可以有浮动对象left   :  不允许左边有浮动对象right  :  不允许右边有浮动对象both  :  不允许有浮动对象

那么我们来看一张图理解一下：

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

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

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

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

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

<html>
<head><title>float练习</title><style>.box{width: 200px;height: 200px;text-align: center;line-height: 200px;}.box1{background-color: skyblue;float: left;}.box2{background-color: pink;float: left;clear: left;}</style></head><body><div class="box box1">div1</div><div class="box box2">div2</div></body>
</html>

那么这个图片里面的实现效果也就有了：

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

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

html实现：

<html>
<head><title>float练习</title><style>img{float: left;}</style></head><body><h1>我是标题</h1><img src="../白虎志.jpg" width="300" />我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。我是text。</body>
</html>

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

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

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

解决方法：

给父元素也添加float。这样让父元素与子元素一起脱离文档流浮动起来，保证子元素在父元素内，这样父元素就能自适应子元素的高度，但是此方法有一弊端，一定会影响父元素之后的元素排列，甚至影响布局。
给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况。
添加一个块级元素，并给此元素设置clear:both;清除浮动。在很早之前用的就是这种解决办法，新建一个空的div，为这个div设置clear：both；这样无疑是增加了无意义的标签，一个大型页面中，这种标签太多是不好的。
给父元素添加 overflow：hidden
通过伪类::after清除浮动

overflow:hidden

隐藏溢出，当内容超过其父元素时，可以使用该属性和值将溢出的部分裁剪掉，使页面更加美观
清除浮动，当子元素浮动时，给父元素添加overflow：hidden，按照它的第一个特性，应该将子元素超出的部分截掉，但是因为子元素有浮动，无法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元素内了。

::after 伪类

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

<html>
<head><title>float练习</title><style>.father1{width: 700px;margin: 0px auto;border:1px solid black;}.father1::after{content: "";display: block;clear: both;}.son1{width: 200px;height: 200px;background-color: pink;float: left;clear: both;}</style></head><body><div class="father1"><div class="son1">子元素</div></div></body>
</html>

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

制作导航栏

当我们打开csdn的首页不难发现，导航栏就是提供一些选项供用户选择的：

像这种样式的导航栏，通常使用了ul列表来制作的，那么如何实现我们来了解一下吧。

html实现：

<html>
<head><title>导航栏练习</title><style>*{ /* 页面默认会带有一些外边距和内部边距，使用*表示所有元素默认外内边距为0 */margin: 0px;padding: 0px;}html,body{width: 100%;height: 100%;}ul{width: 100%;height: 5%;border: 1px solid black;}ul>li{float: left; /* li默认是垂直排序的，使用float可以让它横向排序 */list-style-type: none;width: 10%;height: 100%;text-align: center;line-height: 40px;}</style></head><body><ul><li><a href='#'>首页</a></li><li><a href='#'>博客</a></li><li><a href='#'>程序员学院</a></li><li><a href='#'>下载</a></li><li><a href='#'>论坛</a></li><li><a href='#'>问答</a></li><li><a href='#'>代码</a></li></ul></body>
</html>

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

如何页面布局

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

通常页面分为3部分：页眉(通常为导航栏)、内容区域、页脚(可以放一些页面信息等等)

上面图片里就是通过float来进行的布局

html实现：

<html>
<head><title>页面布局练习</title><style>*{ /* 页面默认会带有一些外边距和内部边距，使用*表示所有元素默认外内边距为0 */margin: 0px;padding: 0px;}html,body{width: 100%;height: 100%;}ul{width: 100%;height: 5%;border: 1px solid black;}ul>li{float: left; /* li默认是垂直排序的，使用float可以让它横向排序 */list-style-type: none;width: 10%;height: 100%;text-align: center;line-height: 40px;}ul>li>a{display: block;width: 100%;height: 100%; /* 避免移动到文字上面才能点击 */text-decoration: none;color:black;}ul>li>a:hover{ /* 当鼠标移动到a标签时增加背景颜色 */background-color: #f0f0f5;}.left_content{width: 25%;height: 90%;background-color: pink;float: left;text-align: center;}.content{width: 50%;height: 90%;background-color: skyblue;float: left;text-align: center;}.right_content{width: 25%;height: 90%;background-color: paleturquoise;float: left;text-align: center;}footer{width: 100%;height: 5%;background-color: gray;clear: both;text-align: center;color: white;}</style></head><body><ul><li><a href='#'>首页</a></li><li><a href='#'>博客</a></li><li><a href='#'>程序员学院</a></li><li><a href='#'>下载</a></li><li><a href='#'>论坛</a></li><li><a href='#'>问答</a></li><li><a href='#'>代码</a></li></ul><div class='left_content'>左侧内容区域</div><div class="content">内容区域</div><div class='right_content'>右侧内容区域</div><footer>页脚</footer></body>
</html>

定位流

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

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

relative：相对定位
absolute：绝对定位
fixed：固定定位
static：静态定位（标准流的效果，基本不使用，这里就不作说明了）

relative相对定位

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

<html>
<head><title>position练习</title><style>.father1{width: 300px;height: 300px;background-color: skyblue;position: relative;left:200px}</style></head><body><h1>第一行</h1><div class="father1"></div><h3>第三行</h3></body>
</html>

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

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

absolute绝对定位

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

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

<html>
<head><title>position练习</title><style>.father1{width: 300px;height: 300px;background-color: skyblue;}.son1{width: 100px;height: 100px;background-color: pink;position: absolute;top: 0px;right: 0px;}</style></head><body><div class="father1">父元素<div class="son1">子元素</div></div></body>
</html>

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

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

给父元素加上position:relative后：

使用了绝对定位之间的元素会发生重叠

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

z-index设置显示优先级，不设置默认为0，如果父标签的存在优先级，就继承父标签的优先级，子元素再设置优先级就没有意义了
如果父标签没有设置优先级，就使用自身的优先级。
当两个元素重叠时，父标签优先级高的会优先显示
如果父标签没有设置优先级，那么就比对子标签的优先级，谁高谁优先显示。

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

<html>
<head><title>position练习</title><style>.father1{width: 300px;height: 300px;background-color: skyblue;position: relative;}.son{width: 100px;height: 100px;position: absolute;}.son1{background-color: pink;top:0px;right: 0px;z-index: 1; /* 设置优先级为1 */}.son2{background-color: powderblue;top: 50px;right: -50px;}</style></head><body><div class="father1">父元素<div class="son son1">子元素1</div><div class="son son2">子元素2</div></div></body>
</html>

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

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

实例演示：

<html>
<head><title>position练习</title><style>body{width: 2000px;}div{width: 300px;height: 300px;background-color: skyblue;position: absolute;top: 0px;right: 0px;}</style></head><body><div></div></body>
</html>

我们给body设置的是2000px 此时页面滚动条，不拖动滚动条时，元素正常右上角显示，当拖动滚动条后发现元素并没有贴着右上角继续显示。

在这方面操作就是绝对定位所不能达到的，那么此时再来介绍一下固定定位。

fixed固定定位

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

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

代码实现：

<html>
<head><title>position练习</title><style>html,body{height: 2000px;}div{width: 100px;height: 100px;background-color: skyblue;border-radius: 50%;position: fixed;right: 0px;bottom: 0px;text-align: center;line-height: 100px;}div>a{color: white;text-decoration: none; /* 去掉a使用href属性后自带的下划线 */}</style></head><body><h1>我是标题</h1><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><div><a href="#">回到顶部</a></div></body>
</html>

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

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

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

下一章传送门：了解JavaScript