css 盒子模型及其理解

最新推荐文章于 2021-05-12 16:46:41 发布

wxiaojia

最新推荐文章于 2021-05-12 16:46:41 发布

阅读量409

点赞数

分类专栏： CSS 文章标签： css html css盒子模型

本文链接：https://blog.csdn.net/m0_37754657/article/details/79087239

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

盒子模型：如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.parent{
			width: 1000px;
			height: 400px;
			background-color: yellow;
			border: 2px solid blue;
		}
		.red{
			width: 500px;
			height: 300px;
			border: 2px solid red;
			padding:5px;
			margin:10px;
			float: left;
		}
		.black{
			width: 400px;
			height: 300px;
			border: 2px solid black;
			padding:10px;
			margin:10px;
			float: right;
		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="red"></div>
		<div class="black"></div>
	</div>
</body>
</html>

蓝色边距的盒子：width:1000px

红色边距的盒子：width:500px,border:2px,margin:10px,padding:5px

它的总宽度为=width+border(左右)+margin(左右)+padding(左右)=534px

黑色边距的盒子：width:400px;border:2px,margin:10px,padding:10px;

它的总宽度为=width+border(左右)+margin(左右)+padding(左右)=444px

蓝盒子width>=红盒子+黑盒子

ps：里面所有的值加到一起一定不能大于父盒子的内容区的宽度width

总的宽度=内容区的宽度width+border(左右)+padding（左右）+margin(左右)

如果设置了浮动，不是正常的文档流，设置了一个margin-right:10px;另一个设置了margin-left:40px;要把所有的margin值相加，之间的距离是10+40=50px

如果不设置浮动，而是正常的文档流，设置了一个margin-bottom:10px，另一个设置了margin-top:40px;如果有叠加取叠加部分的最大值40

如图，下面那个盒子的margin-top会覆盖掉上方盒子的margin-bottom,代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.red{
			width: 500px;
			height: 300px;
			border: 2px solid red;
			margin-bottom: 10px;
		}
		.black{
			width: 400px;
			height: 300px;
			border: 2px solid black;
			margin-top: 40px;
		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="red"></div>
		<div class="black"></div>
	</div>
</body>
</html>

浏览器的兼容问题：

根据w3c的规范，元素内同占据的空间是由width属性设置的，而内容周围的padding和border是另外计算的。

但IE5.X和6在怪异模式下使用自己的非标准模式，这些浏览器的width属性不是内容的宽度，而是内同、内边距和边框的宽度的总和。

解决方法：不要给元素添加具体制定宽度的内边距，而尝试将内边距或外边距添加到元素的父元素和子元素。

IE8及更早IE版本不支持设置填充的框和边框的宽度属性。解决IE8和更早IE版本不兼容问题可在HTML页面设置<!DOCTYPE html>即可