css-标准盒模型和怪异盒模型

最新推荐文章于 2024-08-11 17:42:10 发布

fightingcoder419

最新推荐文章于 2024-08-11 17:42:10 发布

阅读量416

点赞数

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

本文链接：https://blog.csdn.net/fightingcoder419/article/details/103123080

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

盒子模型定义

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。对于是盒子的元素，如果没有特殊设置，其默认总是占独立的一行，宽度为浏览器窗口的宽度，在其前后的元素不管是不是盒子，都只能排列在它的上面或者下面，即上下累加着进行排列。HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成，即内容区（content）、填充(padding)、边框(border)和空白边(margin)。 CSS 为四个部分定义了一系列相关属性，通过对这些属性的设置可以丰富盒子的表现效果。

组成

内容区（content）

内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区有三个属性，width、height 和overflow。

填充（padding）

填充是内容区和边框之间的空间。填充的属性有五种，即padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。

边框（border）

边框是环绕内容区和填充的边界。边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。

空白边（margin）

空白边位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段。空白边的属性有五种，即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷空白边属性margin，其具体的设置和使用与填充属性类似。

盒子模型的定位

网页默认的布局方式

文档流指文档中能够明确显示对象在排列时所占用的具体方位。文档流不但是盒子模式定位的基础所在，它也是HTML中默认的网页布局模式，在没有特殊要求的情况下，页面中的块状元素呈现自上而下的动态分布形式，内联元素则是按照从左到右的方式存在。如果我们想要改动某一汉字或是符号在网页中的具体方位，只能有一种方式可以选择，就是通过操作网页结构中汉字或是符号的先后位置和分布位置来实现自己的目的和想法。

浮动

所谓浮动就是让设置的标签产生漂浮效果，脱离原来在页面本应出现的空间位置，不再占用任何文档流空间。元素设置为浮动以后，会生成一个块级元素，而不论它本身是何种元素。且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。

Position定位

页面布局使用最多的是相对定位和绝对定位。

相对定位：这种定位方式下元素不脱离文档流，仍然保持其未定位前的形态并且保留它原来所占空间。偏移时以自身位置的左上角作为参照物，通过left、top、right和bottom四个方向的属性来定义偏移的位置。下面通过比较定位前和定位后的两种状态来分析相对定位的效果。

绝对定位：这种定位方式下元素将脱离文档流，不占据空间，文档流中的后续元素将填补它留下的空间。下面通过比较定位前和定位后的两种状态来分析绝对定位的效果

百度百科地址：https://baike.baidu.com/item/CSS%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/9814562?fr=aladdin

ie6盒子模型和w3c盒子模型可参考链接：https://www.cnblogs.com/BruceLeey/archive/2010/06/13/1757867.html

标准盒子模型

标准盒模型的计算为：标准盒模型的宽度 = width + 左右margin + 左右padding + 左右border

box-sizing:content-box //标准盒子模型

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

怪异盒子模型

怪异盒模型的计算为：怪异盒模型的宽度 = width + 左右margin

其中，怪异盒子的内容宽度width包含了左右padding和左右border

box-sizing:border-box //怪异盒子模型

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

例子

以下为一个怪异盒模型的应用场景

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8"/>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.outer{
			width:300px;
			height:300px;
			background:blue;
		}
		.outer .standard{
			float:left;
			width:200px;
			height:200px;
			background:red;
		}
		.outer .specil{
			float:right;
			width:100px;
			height:200px;
			background:green;
		}
	</style>
</head>
<body>
 <div class="outer">
	<div class="standard">
	</div>
	<div class="specil">
	</div>
 </div>
</body>
</html>

给右侧添加border

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8"/>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.outer{
			width:300px;
			height:300px;
			background:blue;
		}
		.outer .standard{
			float:left;
			width:200px;
			height:200px;
			background:red;
		}
		.outer .specil{
			float:right;
			width:100px;
			height:200px;
			background:green;
			border:2px solid black;
		}
	</style>
</head>
<body>
 <div class="outer">
	<div class="standard">
	</div>
	<div class="specil">
	</div>
 </div>
</body>
</html>

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8"/>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.outer{
			width:300px;
			height:300px;
			background:blue;
		}
		.outer .standard{
			float:left;
			width:200px;
			height:200px;
			background:red;
		}
		.outer .specil{
			float:right;
			width:100px;
			height:200px;
			background:green;
			border:2px solid black;
			padding:20px;
			box-sizing:border-box;
		}
	</style>
</head>
<body>
 <div class="outer">
	<div class="standard">
	</div>
	<div class="specil">111
	</div>
 </div>
</body>
</html>