一、CSS盒子

一个盒子通常包括四个区域，让我们先写一个设置好width和height属性的div。
1
示例1：

<style>
.box {width: 100px;height: 200px;
}
</style><div class = "box"></div>

现在在浏览器运行，打开F12-Elements一栏，可以查看到这个盒子的具体状态：

最里层的宽高是我们设置的width和height，这个部分是content内容区域。
往外分别是：padding内边距、border边框和margin外边距。

1.1 盒子的四个区域

可知，一个标准的盒子包括以下四个区域（以下顺序按照从内到外）：

区域	说明
内容区域	代表盒子的实际内容部分，它是由 width 宽度和 height 高度来确定的
内间距区域	代表盒子与实际内容之间的空白区域，由 padding 属性设置
边框区域	代表盒子的边框，是内间距区域和外边距区域的边界，由 border属性设置
外边距区域	代表此盒子的边框与相邻的其他盒子边框之间的距离，由 margin 属性设置

二、CSS盒子的类型

CSS盒子类型使用box-sizing属性进行设置.

1.content-box 内容盒子

box-sizing属性的默认值，“一”中示例1设置的盒子就是内容盒子

这个时候我们在示例1的基础上再加上内边距、边框和外边距

示例2：

<style>
.box {width: 100px;height: 200px;padding: 10px;border: 5px solid blue;margin: 20px;
}
</style>
<div class = "box"></div>

此时再看浏览器，发现盒子的宽度和高度变成了130*230！

再看浏览器给出的盒子模型图，我们将发现宽度的130似乎是由100+（10+5）×2算出来的，也就是width+（padding+border）*2。

那我们不妨再用这个这个公式套在height上试一试能不能行得通？
200+10+5+10+5=230 === height

此时我们惊讶地（嘿嘿，并不惊讶hhh）发现确实是这样计算的，盒子囊括的就是红框内部。

content-box盒子的宽高计算公式

css中width和height是设置内容区域的宽高，
盒子的宽高需要加上内间距和边框，外边距不算在内

盒子宽度=内容的宽度+左右内间距+左右边框的宽度
盒子高度=内容的高度+上下内间距+上下边框的宽度

2.border-box 边框盒子（怪异模型）

css中width和height设置的是盒子的最终的宽高

在示例2的基础上加上一行“box-sizing: border-box;”即可变成边框盒子，
示例3：

<style>
.box {box-sizing: border-box;width: 100px;height: 200px;padding: 10px;border: 5px solid blue;margin: 20px;
}
</style>
<div class = "box"></div>

查看浏览器中div的盒子模型，可以看到红框的宽度为100，高度200，而中间的内容区域content变为了70×170（100-（10+5）*2， 200-（10+5）*2）

3.特殊的盒子：替换元素

常见的替换元素有<img> 、 <iframe> 、 <video> 等
替换元素加载的是外部内容，并不会受现有的 CSS 属性的影响。

但可以通过 CSS 来控制替换元素在盒子中的位置

以<img/>为例，加载一张图片，限制<img/> 盒子的宽高，

object-fit 属性：让图片等比例占满整个盒子，裁掉显示不下的部分。
object-position 属性：设置图片在盒子中的位置，可以是靠下或者居中等：

示例：
用img加载一张图片，分别将object-position 属性设置为靠上、居中和靠下

<style>img {width: 300px;
}
#img1,#img2,#img{height: 300px;object-fit: cover;
}
#img1 {object-position: top;
}
#img2 {object-position: center;
}
#img3 {object-position: bottom;
}
</style>
<img src = "1.jpg">
<img id = "img1" src="1.jpg" alt=""/>
<img id = "img2" src="1.jpg" alt=""/>
<img id = "img3" src="1.jpg" alt=""/>

CSS盒子的三种类型（border-box、content-box）相关推荐

html盒子居中的方式,CSS盒子居中三种方法
前言 CSS盒子居中,我觉得是很有必要学习一下的.特别是第三种方法,奇淫技巧升级版,也是生产环境中非常常见的一种方法,不需要知道宽度,随着祖先元素的变化而变化! 1.常规方法常规方法只需要给盒子设置 ...
html样式表三种类型包括,css样式有哪几种类型
CSS样式有三种类型:1.行内样式(内嵌样式),使用style属性直接把CSS代码添加到HTML的标记中:2.内部样式(内联样式),把css样式写在style标签中:3.外部样式(外联样式),将css ...
html5中标签分为,HTML标签的三种类型
HTML标签的类型分为三种:行内元素,行内块元素,块级元素而标签的属性是可以转换的 display:inline: 转换为行内元素 display:linline-block 转换为行内块元素 di ...
HTML的样式及引入样式的三种类型
引入样式样式引入样式的三种类型内联样式行内样式外部引入样式名样式字体颜色 color: ; 背景颜色 background-color: ; 字体大小 font-size: ; 外边距 ...
HTML引入css样式的三种方式，css选择器的三种样式
文章目录前言一. css样式的三种方式第一种:内联定义方式第二种: 样式块第三种:引入外部独立css文件二. 选择器的三种样式第一种:id选择器第二种:标签选择器第三种:类选择器三 ...
JS行间改变css的方法,js改变css样式的三种方法推荐
共用代码: this is a div var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:25 ...
Asp.net支持三种类型的cache[转]
from:http://www.cnblogs.com/thomasnet/archive/2006/11/26/573104.html Asp.net支持三种类型的cache 想写一个技术快速概述, ...
css中的三种基本定位机制
css中的三种基本定位机制 a.普通文档流 b.定位:相对定位绝对定位固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...
java中三种转string的方法_java中int,char,string三种类型的相互转换
如何将字串 String 转换成整数 int? int i = Integer.valueOf(my_str).intValue(); int i=Integer.parseInt(str); 如何将 ...

CSS盒子的三种类型（border-box、content-box）

文章目录