css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性

时间：2022-07-21 00:58:19


 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性

下面咱们看一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css盒模型</title>
</head>
<style type="text/css">
.box {
    width: 500px;
    height: 400px;
    border: 10px solid deepskyblue;
    padding: 20px;
    background-color: darkorange;
    margin:15px
}
</style>
<body>
    <div  class="box"></div>
    <script>

        console.log("box实际宽度="+document.getElementById("box").offsetWidth)
        console.log("box实际高度="+document.getElementById("box").offsetHeight)
    </script>
</body>
</html>

 上面代码在页面渲染了设一个宽500px，高400px的div，并设置10px的边框和20px的padding。然后我们来看效果：

css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性

这里我们会发现明明我们设置了5​​00*400​​​长宽比，为什么呈现出来的是一个​​560*460​​​的盒子呢？ 
接着让我们打开调试页面一探究竟。 
我们可以找到下面的这张示意图：

css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性

在这张图中，我们发现我们设置的500*400出现在了最里面的那个蓝框中，与此同时我们可以发现在这个盒模型中除了我们设置的内容（content），还有margin（外边距）、border（边框）、padding（内边框） 

margin(外边距) - 清除边框外的区域，外边距是透明的。 
border(边框) - 围绕在内边距和内容外的边框。 
padding(内边距) - 清除内容周围的区域，内边距是透明的。 
content(内容) - 盒子的内容，显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道盒模型是如何工作的。

而我们在测试效果图看到的560*460盒子， 

560（width） =   500（content） +   20（padding）* 2   +  10（border）* 2 
460（height）=   400（content） +   20（padding）* 2   +  10（border）* 2 

下面我们来看css的两种盒模型

css的两种盒模型

一   W3C的标准盒模型（标准盒模型）

在标准的盒子模型中，width指content部分的宽度

css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性

二  IE盒模型 （怪异盒模型）

css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性

我们可以看出我们上面的使用的默认正是​​W3C标准盒模型​​​ 
而这里盒模型的选取更倾向于项目和开发者的习惯，并没有绝对的好坏之分。 

box-sizing的使用

如果想要切换盒模型也很简单，这里需要借助css3的​​box-sizing​​属性

box-sizing: content-box /**是W3C盒子模型 */
  box-sizing: border-box /*是IE盒子模型*/
标签：

相关文章