CSS盒子模型理解以及使用

最新推荐文章于 2022-10-12 19:14:49 发布

马克沁重机枪

最新推荐文章于 2022-10-12 19:14:49 发布

阅读量1.7k

点赞数 8

分类专栏：前端文章标签： CSS 盒子模型怪异盒子模型和标准盒子模型使用

本文链接：https://blog.csdn.net/qq_25627719/article/details/102616024

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、盒子模型在前端中的作用

盒子模型在css中的作用可以用下面两个图比喻
在这里插入图片描述

二、理解以及使用

盒子模型的类型分为两类①：W3C标准的盒子模型（标准盒子模型），表示方法box-sizing：content-box，②另一种是IE盒子模型（怪异盒子模型）,表示方法：boxsizing：border-box。所以盒子模型可以从这两种类型去理解和使用。

①标准盒子模型：content-box

如图设置父级盒子属性为：

.father{
			width: 200px;
			height:200px;
			border:1px solid black;
			margin: auto;
			padding:10px;
			background: red;
			box-sizing:border-box;}

如盒子属性示意图和效果图content（内容区域），padding为内边距，border为盒子模型边框，margin为外边框，给父级元素的content（内容区域）拐角增加四个子元素作为参照。
在这里插入图片描述
将标准盒子模型的内边距padding由10px改为50px，如图，父元素区域向外扩40px，而content（子元素活动区域不变）

改变边框border与改变padding内边距对标准盒子模型布局效果相同。

②怪异盒子模型：border-box

如图设置父级盒子属性为：

.father{
			width: 200px;
			height:200px;
			border:1px solid black;
			margin: auto;
			padding:10px;
			background: red;
			box-sizing:border-box;}

如盒子属性示意图和效果图content（内容区域），padding为内边距，border为盒子模型边框，margin为外边框，给父级元素的content（内容区域）拐角增加四个子元素作为参照。
在这里插入图片描述
将怪异盒子模型的内边距padding10px改为40px，子元素/内容区域向内收缩30px，但父元素仍为200px。

怪异盒子模型改变border与改变padding的布局效果相同。
总结：①怪异盒子模型可以通过改变父级元素的padding或者border而去影响content（内容区域/子元素)的布局，但父级元素布局面积区域不会改变
②标准盒子模型不可以通过改变父级元素的padding或者border而去影响content（内容区域/子元素）的布局，父级元素布局面积区域会改变。

附：此布局中作为参照内容区域中四个子元素使用了flex布局，代码分享如下：

<style type="text/css">
		.father{
			display: flex;
			flex-wrap:wrap;
		}
	
		.father{
			width: 200px;
			height:200px;
			border:1px solid black;
			margin: auto;
			padding:40px;
			background: red;
			box-sizing:border-box;
			

		}
	
	    .son{
			
			width: 30px;
			height:30px;
			line-height: 30px;
			border:1px solid blue;
			background: black;
			box-sizing:border-box;
			color:white;
			text-align:center;
			
			
		}
		.item1{
			width:100%;
			display:flex;
			justify-content:space-between;
		}
		.son1 {
			align-self: flex-start;
		}
		.son2{
			align-self:flex-start;
		}
		.item2{
			width:100%;
			display:flex;
			justify-content: space-between;
		}

		.son3{
			align-self: flex-end;
		}
		.son4{
			align-self:flex-end;
		}
	

		
	</style>
</head>
<body>
<div class="father">
	<div class="item1">
	     <div class="son son1" >1</div>
	     <div class="son son2" >2</div>
	</div>
	<div class="item2">
		<div class="son son3" >3</div>
	    <div class="son son4" >4</div>
    </div>