CSS框模型详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45178455/article/details/102830517

一、框模型

框：页面中一切元皆为框。
框模型：Box-Model，定义元素狂处理元素内容，内边距以及外边距的方式。

对象的实际宽度是：左右外边距+左右内边距+width。
对象的实际高度是：上下外边距+上下内边距+height。
元素边框内占地区域：左右边框+左右内边距+元素width。

二、外边距

(一)、什么是外边距
围绕在元素边框周围的空白区域就是外边距正常情况下外边距是不允许被其他元素所占据的(是不能被继承的)。
(二)、语法：

margin:value;		//一次性设置四个方向的外边距。

单边设置：
margin-top：设置上外边距。
margin-bottom：设置下外边距。
margin-left：设置左外边距。
margin-right：设置右外边距。
他的取值为：
1.单位可以为 px 或 %
2.取值可以为auto
Ps:只有左右外边距可以取值为auto，因为上下取值auto的话没有效果，木得意义。
3.取值可以为负数
作用：移动元素
左外边距取值为负时：元素向左移动。
上外边框取值为负时：元素向上移动。
左外边框取值为正时：元素向右移动。
上外边框取值为正时：元素向下移动。
(三)、外边距的简洁写法

margin:value;
		//同时定义四个方向的外边距。
margin:v1 v2;
		//v1表示上下外边距，v2表示左右外边距。
margin:v1 v2 v3;
		//v1表示上，v2表示左和右，v3表示下。
margin:v1 v2 v3 v4;
		//v1表示上，v2表示右，v3表示下，v4表示左。(采取顺时针顺序)。

ex：

margin:5px auto;
		//设置上下外边距为5px，左右为auto(自动)。
margin:3px 5px 15px;
		//设置上边距为3px，左右外边距为5px，下外边距为15px。

(四)、外边距的特殊处理
1.外边距合并
当两个垂直外边距相遇时，他们将和为一个外边距，称为外边距合并，合并之后的外边距的高度等于两个外边距中高度较大者。
2.外边距溢出
在某些特殊情况下，为子元素设置上下边距时，有可能会作用到父元素上。
特殊情况：
1).父元素没有上或下边框。
2).必须为第一个子元素设置外边距时。
解决方案：
1).为父元素增加边框(上或者下，哪溢出加哪)。
2).在父元素中添加<table>到第一个子元素位置处。
3).通过设置父元素的上内边距来取代子元素的上外边框。

三、内边距

(一)、什么是内边距
内容区与边框(边缘之间的距离)。他有一个特点是会扩大元素边框占用的区域。
(二)、语法：

padding:value;
padding-方向;value;

方向：top、bottom、left、right
内边距和外边距不同，外边距是可以取负值的，但是内边距不可以取负值。
取值：
单位可以为px或者%
(三)、简洁写法

padding:value;
		//同时定义四个方向的内边距。
padding:v1 v2;
		//v1表示上下内边距，v2表示左右内边距。
padding:v1 v2 v3;
		//v1表示上内边距，v2表示左内边距和右内边距，v3表示下内边距。
padding:v1 v2 v3 v4;
		//v1表示上内边距，v2表示右内边距，v3表示下内边距，v4表示左内边距。(采取顺时针顺序)。

(四)、特殊处理
对行内元素和行内块元素设置内边距(上下)时，只会影响自己，并不会影响到其他元素。

四、box-sizing

作用：重新指定元素框模型的计算模式。
取值：
1.content-box：默认值，采用默认计算模式即内边框以及边框会累加到元素的尺寸中。
2.border-box：元素尺寸会包含边框和内边框。
ex：

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>box_sizing</title>
<style>
    #d1{
       	width:200px;
	    height:200px;
	    border:3px solid red;
    	padding:10px;
	}
	#d2{
    	width:200px;
    	height:200px;
    	border:3px solid green;
    	padding:10px;
    	box-sizing:border-box;
	}
</style>
</head>
<body>
 	<div id="d1"></div>
	<div id="d2"></div>
</body>

由上面的代码中我们可以看出来id为d1的div没有加box_sizing:border-box，而id为d2的div加了，那么我们来看一下效果：

在这里插入图片描述
下面这两幅图是id为d1的div：

下面这两幅图是id为d2的div：

看到这里有的小伙伴可能会不理解为什么id为d1的div的宽和高是226×226呢？(知道的就当我没说🙄)
文章一开始的时候有说过的(👈点击可跳转)

id为d1的div我们简称为d1，id为d2的div我们简称为d2(为了方便写~)
由上面的4幅图我们可以非常清楚的看到d1明显比d2大了许多，就是box_sizing:border-box的原因，
这行代码重写了计算模式。

d1没有重写计算模式所以他采用的是默认值"content-box"：内边框以及边框会累加到元素的尺寸中。
d2重写了计算模式所以他采用是"border-box"：元素的尺寸会包含边框和内边距。