理解box-sizing属性

矫情吗；* 2022-03-15 02:07 123阅读 0赞

box-sizing是一个CSS3属性，与盒子模型有着密切联系。即决定元素的宽高如何计算，box-sizing有三个属性：

box-sizing: content-box|border-box|inherit:
    复制代码

content-box 使得元素的宽高即为内容区的宽高

<style>
        * {
            padding:0;
            margin:0
        }
        #app{ 
            height: 100px;
            width: 200px;
            background: green;
            margin:10px;
            padding:5px;
            box-sizing: content-box
            border:2px solid red;
        }
        .box{
            display: inline-block;
            border:1px solid red;
            width:50%
           
        }
    </style>
    <body>
       <div id="app">
           <span class="box">左</span>
           <span class="box">右</span>
       </div> 
    </body>
    复制代码

上图红色箭头即宽200px,不难理解，想象你有个div 现在你要定义它的宽为200px,此时头脑中想象这个div,就是纯粹的200px，无任何修饰。此时你觉得太单调了，想要添加一个宽2px的边框，那么在设置成content-box规则下，你需要往这个div外边围绕一个边框，此时你这个div实际上要比原来div要稍微大。

border-box 与上面相反，如果你需要在一个宽200px的div上围绕2px的边框，那么你的边框是在这个div容器内壁围绕，即content+padding+border=200px

可见你的内容区实际上偏小了一点。

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

发表评论取消回复

表情：

评论列表（有 0 条评论，123人围观）

还没有评论，来说两句吧...

相关阅读

相关 ImageView的scaleType的属性理解

ImageView的scaleType的属性值有 MATRIX FIT\_XY FIT\_START FIT\_END FIT\_CENTER

我就是我/ 2022年12月11日 13:42/ 0 赞/ 117 阅读

相关简单理解js的prototype属性

在进入正文之前，我得先说说我认识js的prototype这个东西的曲折过程。　　百度js的prototype的文章，先看看，W3School关于prototype的介绍：

向右看齐/ 2022年06月18日 08:54/ 0 赞/ 124 阅读

相关 spring-task的属性理解

案例： <task:scheduled-tasks> <!-- <task:scheduled ref="timeJob" method="getW

野性酷女/ 2022年06月05日 03:51/ 0 赞/ 106 阅读

相关理解float和clear属性

> float:可以让其他元素环绕在它们周围。元素是水平浮动的，只关心两个可能的值，right和left值要根据父元素来浮动，即使父元素本身是浮动到右边。

待我称王封你为后i/ 2022年06月02日 08:28/ 0 赞/ 151 阅读

相关深入理解 Vue Computed 计算属性

Computed 计算属性是 Vue 中常用的一个功能，但你理解它是怎么工作的吗？拿官网简单的例子来看一下： <div id="example"> <

电玩女神/ 2022年05月27日 13:27/ 0 赞/ 210 阅读

相关 Android自定义属性的理解

一个Android开发者总会遇到自定义控件的问题。要学会自定义控件的开发，最好的方法是将要用到的知识点一个个掌握。当掌握这些分散的知识点就意味着写一个自定义控件会变得容易。本篇

曾经终败给现在/ 2022年05月24日 04:53/ 0 赞/ 210 阅读

相关设备树中ranges属性理解

作者 > 彭东林 > pengdonglin137@163.com 文章来源 [http://www.cnblogs.com/pengdonglin137/p

妖狐艹你老母/ 2022年05月22日 08:45/ 0 赞/ 223 阅读

相关 display显示属性理解

[display显示属性理解][display] display属性设置一个元素应如何显示，是我们在前端开发中常常使用的一个属性，其中，最常见的有：目录

- 日理万妓/ 2022年03月31日 13:31/ 0 赞/ 422 阅读

相关理解box-sizing属性

box-sizing是一个CSS3属性，与盒子模型有着密切联系。即决定元素的宽高如何计算，box-sizing有三个属性： box-sizing: content-b

矫情吗；*/ 2022年03月15日 02:07/ 0 赞/ 124 阅读

相关关于渐变属性值的一些理解

首先，对于渐变（gradient）主要有两种方式，一种为线性渐变（linear-gradient），一种为径向渐（radical-gradient）本篇着重讨论线性渐变。

我不是女神ヾ/ 2022年03月09日 04:08/ 0 赞/ 202 阅读