box-sizing

最新推荐文章于 2024-08-11 20:00:00 发布

ForMyWebFrontSide

最新推荐文章于 2024-08-11 20:00:00 发布

阅读量649

点赞数

分类专栏： css 文章标签： box-sizing border-box 盒模型

本文链接：https://blog.csdn.net/formyqianduan/article/details/73571750

版权

css 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

重新回顾box-sizing中的两种模式：content-box,和border-box.
用语言来描述他们的区别就是：
content-box: 在此种模式是标准盒子模型模式，宽高width 和 height是内容区的宽高，不包括边框，内边距，外边距，内边距和边框的宽高会增大该元素整体大小。

border-box:在此种模式即对应IE怪异模式，即，指定的是该元素整体的宽高。无论元素的内边距和边框如何变化，元素整体宽高不变。元素内容区尺寸会变化，即，内容区宽 =元素width-border*2-padding(左右)。

具体如下图：

这里写图片描述

第一图：内容宽为100px；
第二图：内容宽为78px ;
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv1{
            width: 100px;
            height: 100px;
            border:1px solid red;
            margin:20px;
            padding:10px;
            box-sizing:content-box;
        }
        #dv2{
            width: 100px;
            height: 100px;
            border:1px solid red;
            margin:30px;
            padding:10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="dv1"></div>
    <div id="dv2"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    console.log('dv1 width:',$('#dv1').width(),'dv2 width:',$('#dv2').width());
</script>
</html>