标准盒模型和怪异盒模型看这一篇就够了border-box和content-box的区别

最新推荐文章于 2024-07-23 22:43:52 发布

安♫若素

最新推荐文章于 2024-07-23 22:43:52 发布

阅读量1k

点赞数 1

分类专栏：前端面试文章标签： html+css

本文链接：https://blog.csdn.net/acf961123/article/details/103294689

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

面试

5 篇文章 0 订阅

订阅专栏

在介绍两种盒模型的区别之前先了解一下什么是盒模型？

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
在这里插入图片描述

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

首先要介绍margin不会影响盒子的宽高只会影响盒子占据位置的大小。

标准盒模型

盒子占位宽度 =margin-left + border-left +padding-left + width + padding-right+border-right+margin-right

盒子真正的宽度=border-left+padding-left+width+padding-right+border-right

盒子占位高度 = margin-top + border-top+pendding-top+height+pendding-bottom+border-bottom+margin-bottom

盒子真正的高度=border-top+padding-top+height+padding-bottom+border-bottom

以上的width和height分别指盒模型的属性值

如下示例.box就是一个标准盒模型，宽高为100px，边框10px，内边距30px

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
   <div class="fa">
        <div class="box">
            
        </div>
   </div>
</body>
</html>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .fa{
        width: 500px;
        height: 500px;
        border: 1px solid red;
    }
    .box{
        box-sizing: content-box;
        width: 100px;
        height: 100px;
        border: 10px solid yellow;
        padding: 30px;
        background: rebeccapurple;
       
    }
</style>

如图所示黄色边框紫色的块高度和宽度都是180px

怪异盒模型

盒子占位宽度 =margin-left + width+margin-right

盒子真正的宽度=width

盒子内容宽度 = width减border-left减border-right减padding-left减padding-right

盒子占位高度 = margin-top + height+margin-bottom

盒子内容的高度 = width减border-top减border-bottom减padding-top减padding-bottom

盒子真正的高度=height

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
   <div class="fa">
        <div class="box">
            
        </div>
   </div>
</body>
</html>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .fa{
        width: 500px;
        height: 500px;
        border: 1px solid red;
    }
    .box{
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        border: 10px solid yellow;
        padding: 30px;
        background: rebeccapurple;
       
    }
</style>

在这里插入图片描述

通过和之前图片对比发现黄色边框紫色块比之前小很多，经过测量发现高度和宽度都为100px；

写在最后box-sizing可以显示的指定是用的标准盒模型还是怪异盒模型

标准盒模型：box-sizing：content-box

怪异盒模型：box-sizing：border-box

安♫若素

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
标准盒模型和怪异盒模型看这一篇就够了border-box和content-box的区别

在介绍两种盒模型的区别之前先了解一下什么是盒模型？CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。Margin(外边距) - 清除边框外的区域，外边距是透明的Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Cont...
复制链接

扫一扫

专栏目录