什么是盒子模型？IE盒模型与Chrome盒模型的区别？box-sizing的用法

最新推荐文章于 2024-06-22 17:15:40 发布

铃儿响叮当不响

最新推荐文章于 2024-06-22 17:15:40 发布

阅读量1.1k

点赞数 2

分类专栏：前端js笔记文章标签： servlet html javascript

本文链接：https://blog.csdn.net/qq_36507046/article/details/127335616

版权

前端js笔记专栏收录该内容

43 篇文章 7 订阅

订阅专栏

所有的HTML元素可以看作盒子，它包括四部分组成。每个元素在页面中占位大小 = content + padding + margin + border。

1）Margin(外边距)清除边框外的区域，外边距是透明的。

2）Border(边框)围绕在内边距和内容外的边框。

3）Padding(内边距)清除内容周围的区域，内边距是透明的。

4）Content(内容)盒子的内容，显示文本和图像。

W3C盒模型和怪异盒模型的区别？

标准盒模型（W3C）内容大小等于content大小。padding和border不被包含在定义的width和height之内。盒子的实际宽度=设置的width+padding+border

IE盒模型（怪异盒模型）内容大小等于content + padding + border的总和。padding和border被包含在定义的width和height之内。盒子的实际宽度=设置的width（padding和border不会影响实际宽度）

box-sizing可以设置盒子的类型

box-sizing: content-box || border-box || inherit

box-sizing:border-box，为IE盒模型（怪异盒模型）。

box-sizing:content-box，为标准盒模型（W3C盒模型）例如：Firefox/Chrome。

box-sizing:inherit，规定应从父元素继承 box-sizing 属性的值

一般默认浏览器使用标准盒模型。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .box1{
        height:150px;
        width:150px;
        padding: 50px;
        margin: 100px;
        border: solid 5px green;
        background-color: brown;
        box-sizing: content-box; 
      }
      .box2{
        height:150px;
        width:150px;
        padding: 50px;
        margin: 100px;
        border: solid 5px green;
        background-color: black;
        box-sizing: border-box;
      }
      .box3{
        height:50px;
        width:50px;    
        padding: 10px;
        border:1px solid red;
        background-color: green;
        box-sizing: inherit;
      }

      .box4{
        height:50px;
        width:50px;    
        padding: 10px;
        border:1px solid red;
        background-color: green;
        box-sizing: inherit;
      }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box4"></div>
    </div>
    <div class="box2">
        <div class="box3"></div>
    </div>
</body>
</html>