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

最新推荐文章于 2024-06-22 22:08:10 发布

Simple子夜

最新推荐文章于 2024-06-22 22:08:10 发布

阅读量1.3w

点赞数 12

分类专栏： HTML 文章标签： HTML 盒子模型页面布局

本文链接： https://blog.csdn.net/m0_46958731/article/details/114544954

版权

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;