由浅入深css（一）------ CSS盒子模型

最新推荐文章于 2025-04-11 16:57:43 发布

司马驷马难追

最新推荐文章于 2025-04-11 16:57:43 发布

阅读量426

点赞数 2

分类专栏：前端文章标签： css3 html5

本文链接：https://blog.youkuaiyun.com/OY_YO00/article/details/115303195

版权

前端专栏收录该内容

6 篇文章

订阅专栏

CSS篇之基础篇

前言

css篇主要记录一些具有代表性的，或是容易被忽略的一些属性及个人心得总结。

关于css的一些宏观认识。

css是什么？

全称：中 — 层叠样式表。英 — Cascading Style Sheets。简 — CSS。
层叠：重复指定同一元素的同一属性时，采用哪一个样式的规则。
样式表：元素的外观效果，如宽、高以及背景颜色等。

页面渲染过程中什么时候起作用？

页面渲染的过程大致可划分为以下5个步骤：

页面渲染过程
1、构建DOM树
2、构建CSSOM树
3、合并DOM树和CSSOM树，构建渲染树
4、根据css属性进行计算，此时发生重绘（repaint）和回流/重排（reflow）
5、页面渲染

css下的盒子模型（Box Model）？

盒子模型。首先，这是一个盒子，那么它应该长得四四方方的。然后，它还是一个模型，那么它肯定由多个部件构成。html下的每个元素都可以看作一个盒子，它从外到里，分别由margin（外边距）、border（边框）、padding（内边距）以及content（内容）构成。我们通常将盒子模型分成标准盒子模型（W3C）和怪异盒子模型（IE）两类。

css3增加了box-sizing属性来指定元素以content-box（标准盒子模型）或border-box（怪异盒子模型）来呈现。

这里我们先做一下准备功夫，新建一个html文件，内容如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
		<style>
			#contentBox,
			#borderBox{
				display: inline-block;
				margin: 10px;
				border:10px solid transparent;
				padding: 10px;
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#borderBox{
				box-sizing: border-box;
			}			
		</style>
	</head>
	<body>
		<!-- 标准盒子 -->
		<div id="contentBox">contentBox</div>
		<!-- 怪异盒子 -->
		<div id="borderBox">borderBox</div>
	</body>
	<script>
	</script>
</html>

此时页面呈现效果如下：

在这里插入图片描述
我们css里面分明设置了两个元素margin、padding、border、width以及height属性的值相等。这里为何contentBox看起来比borderBox大一圈？接下来进入正题。

标准盒子模型（W3C）

当我们选中contentBox时，效果如下：
在这里插入图片描述
此时我们看到右下角的盒子模型显示，content部分为100x100。我们设置的width和height属性作用于content。

怪异盒子模型（IE）

而当我们选中contentBox时，效果如下：
在这里插入图片描述
此时我们看到右下角的盒子模型显示，content部分为60x60。我们设置的width和height属性作用于content + padding（左右：10x2）+ border（左右：10x2）。

由以上操作，我们可以得出结论，标准盒子模型和怪异盒子模型的差别在于width和height属性作用于谁。

两大盒子模型的应用与兼容

没有设置box-sizing属性的情况下，在非IE浏览器下，均默认表现为标准盒子模型。
两种模式各有优劣，标准盒子如果理解不到位，有可能导致超宽、高，使页面出现滚动条。怪异盒子掌握不好，有可能导致呈现效果比UI小一圈。
实际项目中，我们常常使用标准盒子，但是如果需要兼容低版本IE，不支持css3的box-sizing属性的情况下要从布局上做兼容，比如，content用一个独立元素，只设置宽和高。然后，在其外部包一层父元素，设置padding、border和margin等属性。