CSS中盒子模型

最新推荐文章于 2024-03-06 04:34:55 发布

杨宗健

最新推荐文章于 2024-03-06 04:34:55 发布

阅读量679

点赞数

分类专栏： CSS新手学习文章标签： css html 标签

本文链接：https://blog.csdn.net/Ameir_yang/article/details/70228182

版权

CSS新手学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

html中所有的标签其实都是盒子。

以span，b，strong，a等标签为例。

span,b,strong,a等标签是行标签，不是块标签。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<base target="_self">
<style>
span,b,strong,a{ 运用并集选择器给span,b,strong,a等标签设置属性。
display:inline-block; 运用display:inline-block; 将行标签转化成块标签。
width:100px;
height:100px;
border:6px solid #000;
padding:20px;
margin:20px;
}
</style>
</head>
<body>
<span>我是span</span>
<b>我是加粗</b>
<strong>我是强调</strong>
<a href="#">我是超链接</a>
</body>
</html>

由上面的例子可以证明：html中所有的标签都可以设置高度、宽度、内边距、边框、外边距。

一个盒子包括的：

内容区域：

蓝色的这一部分是存放内容和数据的部分。

存放数据和内容的区域大小与设置的width，height相同。

内边距：边框：外边距：

现实生活中的盒子模型：

盒子宽度和高度的理解：

（1）内容的宽度和高度：

就是通过标签的width和height属性设置内容的宽度和高度的。

（2）元素的宽度和高度：

宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框；

高度 = 上边框 + 上内边距 + height + 下内边距 + 下边框；

（3）元素空间的宽度和高度：（元素空间=元素所占用的空间大小）

宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距

高度 = 上外边距 + 上边框 + 上内边距 + height + 下内边距 + 下边框 + 下外边距

盒子的box-sizing属性：

效果：

代码：

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
        <title>box-sizing</title>
        <base target="_self">
        <style type="text/css">
			.box1{
				   width:300px;
				   height:300px;
				   background-color:#F00;
				}
			.box2{
				 width:200px;
				 height:200px;
				 background-color:#009;
				 float:left;
				}
			.box3{
				 width:100px;
				 height:200px;
				 background-color:#060;
				 float:right;
				}
		</style>
    </head>
    <body>
    	<div class="box1">
        	<div class="box2"></div>
            <div class="box3"></div>
        </div>
    </body>
</html>

要求：

给蓝色部分周围加上粗细为20px的边框。

如果直接给蓝色部分加上粗细为20px的边框，那么就会改变原有的布局，因为原来的元素的宽度为width，当加上20px的边框的时候，整个元素就变成了宽度为width+20px+20px、高度为height+20px+20px的元素，也就是说原来的元素变大了，所以说改变了整体。

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
        <title>box-sizing</title>
        <base target="_self">
        <style type="text/css">
			.box1{
				   width:300px;
				   height:300px;
				   background-color:#F00;
				}
			.box2{
				 width:200px;
				 height:200px;
				 background-color:#009;
				 float:left;
				 border:20px solid;
				}
			.box3{
				 width:100px;
				 height:200px;
				 background-color:#060;
				 float:right;
				}
		</style>
    </head>
    <body>
    	<div class="box1">
        	<div class="box2"></div>
            <div class="box3"></div>
        </div>
    </body>
</html>

如果加上 box-sizing: 属性：

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
        <title>box-sizing</title>
        <base target="_self">
        <style type="text/css">
			.box1{
				   width:300px;
				   height:300px;
				   background-color:#F00;
				}
			.box2{
				 width:200px;
				 height:200px;
				 background-color:#009;
				 float:left;
				 border:20px solid;
				 box-sizing:border-box;
				}
			.box3{
				 width:100px;
				 height:200px;
				 background-color:#060;
				 float:right;
				}
		</style>
    </head>
    <body>
    	<div class="box1">
        	<div class="box2"></div>
            <div class="box3"></div>
        </div>
    </body>
</html>

（1）box-sizing: 这个属性可以保证我们给盒子新增padding和border之后，盒子元素的宽度和高度不变。

（2）增加padding和border后，要想保证盒子元素的宽度和高度不变，那么就要减少一部分内容部分的空间，也就是减少内容的宽度和高度，从而维持整体盒子元素的不变。

box-sizing:取值

1.content-box

元素的宽高 = 边框 + 内边距 + 内容宽高

2.border-box

元素的宽高 = width属性/height属性

盒子居中和内容居中：

（1）text-align:center; 作用：设置盒子中储存的文字/图片水平居中。

代码：

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
        <title>box-sizing</title>
        <base target="_self">
        <style type="text/css">
			.box1{
					width:800px;
					height:500px;
					background-color:#F00;
				 }
		</style>
    </head>
    <body>
    	<div class="box1">
        	我是文字
        </div>
    </body>
</html>

效果图：

添加完text-align:center;属性。

代码：

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
        <title>box-sizing</title>
        <base target="_self">
        <style type="text/css">
			.box1{
					width:800px;
					height:500px;
					background-color:#F00;
					text-align:center;
				 }
		</style>
    </head>
    <body>
    	<div class="box1">
        	我是文字
        </div>
    </body>
</html>

效果图：

在大盒子中插入一张图片，这张图片在添加text-align:center;前后的变化和文字“我是文字”变化是一样的。

（2）margin:0 auto; 作用：让盒子自己水平居中。

代码：

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
        <title>box-sizing</title>
        <base target="_self">
        <style type="text/css">
			.box1{
					width:800px;
					height:500px;
					background-color:#F00;
					margin:0 auto;
				 }
		</style>
    </head>
    <body>
    	<div class="box1">
        	我是文字
        </div>
    </body>
</html>

效果图；