盒子模型box-sizing中content-box和border-box的理解

最新推荐文章于 2024-09-17 21:38:39 发布

_duanfy

最新推荐文章于 2024-09-17 21:38:39 发布

阅读量1.7k

点赞数 1

分类专栏： css样式运用文章标签： css 前端

本文链接：https://blog.csdn.net/qq_43690370/article/details/106686084

版权

css样式运用专栏收录该内容

2 篇文章 0 订阅

订阅专栏

盒子模型box-sizing中content-box和border-box的理解

什么是盒子模型

什么是盒子模型

就比如说页面上的元素都是一个拥有宽，高，内边距，边框和外边距的长方形盒子，这些元素都符合盒子模型的定义。

box-sizing

在CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型

W3C标准盒模型
外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋内距＋边框＋外距
element空间宽度＝内容宽度＋内距＋边框＋外距
内盒尺寸计算（元素大小）
element高度＝内容高度＋内距＋边框（height为内容高度）
element宽度＝内容宽度＋内距＋边框（width为内容宽度）

IE传统下盒模型
外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距）
element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）
内盒尺寸计算（元素大小）
element高度＝内容高度（height包含了元素内容宽度、边框、内距）
element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）

box-sizing的三个属性

content-box	默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height
bordr-box	重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）
inhert	使元素继承父元素的盒模型模式

content-box

默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height

bordr-box

重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）

inhert

使元素继承父元素的盒模型模式

border-box理解

 -webkit-box-sizing: border-box;  则div 设置的宽高将包含 边框及 padding

<!DOCTYPE html>
<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<head>
    <title>box-sizing</title>
    <style type="text/css">
        .testdiv{
            padding: 10px;;
            width:100px;
            border: 10px solid
        }
    </style>
</head>
<body >
<div class="testdiv"  > 普通</div>
<div class="testdiv"  style="  -webkit-box-sizing: border-box;">
    特殊
</div>
</body>
</html>