介绍下CSS盒子模型以及box-sizing属性

日期：

导读本篇文章给大家带来了关于css的相关知识，其中主要介绍了css盒子模型以及box-sizing属性的.....

这篇文章给你带来了关于css的相关知识，其中主要介绍了css盒子模型和box-sizing属性的相关问题，box-sizing属性定义如何计算元素的总宽度和主要设置是否需要添加内部距离(padding)下面一起来看看边框，希望对大家有所帮助。

(学习视频分享:css视频教程、html视频教程）

定义和分类盒模型

CSS 基框模型是 CSS 定义了一个长方形盒子的标准模块，包括它们各自的内侧距离（padding）与外边距（margin
），并根据视觉格式化模型生成元素，进行布局、布局和布局。它通常被直接翻译成盒子模型、盒子模型或框架模型。

盒模型有以下分类：

标准定义：
- 标准盒模型
- 奇怪模式盒模型
元素类型
- 块级盒子
- 内联盒子
- 行内块

标准定义划分

1. 标准盒模型

宽度width = 内容宽度(content) padding border margin

只有内容宽度content。如果将元素的宽度设置为100px，所以这个元素的内容区会有100px任何宽度边框和内边距将宽度增加到最终绘制的元素宽度中。

2. 盒子模型的奇怪模式

宽度width = 内容宽度(content padding border) margin

内容宽度包含content、border、padding。假如一个元素width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border padding)值。在大多数情况下，这使得我们更容易设元素的宽度。

3. box-sizing属性

box-sizing属性有以下两个属性值。

box-sizing属性定义如何计算元素的总宽度和主要设置是否需要添加内部距离(padding)和边框等。

例如，如果需要并排放置两个带框架的框架，可以通过 box-sizing 设置为 "border-box"。这样，浏览器就可以呈现出具有指定宽度和高度的框架，并将框架和内边距放入框架中。

默认情况下，元素的宽度(width) 和高度(height)计算方法如下：

width(宽度) padding(内边距) border(边框) = 元素的实际宽度
height(高度) padding(内边距) border(边框) = 元素实际高度

1. content-box

默认值，使用标准盒模型。

.contentBox {     box-sizing: content-box;     width: 350px;     border: 10px solid black;     padding: 0 10px;}

浏览器中上述代码渲染的实际宽度是390px。

2. border-box

使用盒子模型的奇怪模式。

.borderBox {     box-sizing: border-box;     width: 350px;     border: 10px solid black;     padding: 0 10px;}

浏览器中上述代码渲染的实际宽度是350px。

示例如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8">  <title>123</title> <style>  div.container {   width: 100%;   border: 2px solid black; } div.box {   box-sizing: border-box;   width: 50%;   border: 5px solid red;   float: left; } </style> </head> <body> <div class="container">   <div class="box">这个 div 占左部分</div>   <div class="box">这个 div 占右部分</div>   <div style="clear:both;"></div> </div> </body> </html>

输出结果：

示例二：

<!DOCTYPE html> <html> <head> <style> * {   box-sizing: border-box; } #example1 {   width: 300px;   padding: 40px;     border: 15px solid blue; } #example2 {   width: 300px;   padding: 10px;     border: 2px solid red; } </style> </head> <body> <h1>通用的 box-sizing</h1> <p>使用 “box-sizing:border-box” 前端开发人员可以减少很多工作。 上面 head 第一的第一种风格确保所有元素以这种更直观的方式调整尺寸。 上面 head 第一的第一种风格确保所有元素以这种更直观的方式调整尺寸。 您设置的宽度为实际宽度，无需考虑内边距和边框：</p> <div id="example1">div 的完整宽度为 300px, 内边距和边框不需要考虑。</div> <br> <div id="example2">这个 div 完整宽度也是 300px, 内边距和边框也不需要考虑。</div> </body> </html>

输出结果：

元素类型划分

1. 块级盒子

被定义为块级（block）盒子会表现出以下行为：

盒子可以占据父容器的所有可用空间
每个盒子都会换行
width和height属性可以发挥作用
默认情况下h1-h6、p、p、section都处于block状态

2. 内联盒子

一个被定义成内联的（inline）盒子会表现出以下行为：

盒子不会产生换行
width和height属性不起作用
默认情况下用作链接a元素、span、em以及strong都处于inline状态

3. 特殊行内块

如果你不想把一个项目切换到新行，但你希望它能设置宽度和高度，此时，我们可以将这个元素设置为inline-block。

4. 切换元素类型

	`display`属性值
块级盒子	`block`
内联盒子	`inline`
行内块	`inline-block`

4. 盒模属性设置

1. margin和padding

一个值：四个方向
两个值：上下，左右
三个值：上、左、右、下
四个值：上、右、下、左

2. border值

border: 10px double red;

10px、双实线，红色边框。