边框盒子 box-sizing 的 content-box 和 border-box属性

<阿睿>

已于 2022-06-15 11:33:44 修改

阅读量3.7k

点赞数 2

分类专栏：前端文章标签： css css3 html

于 2022-06-15 11:30:40 首次发布

本文链接：https://blog.csdn.net/qq_45288176/article/details/125293359

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一：两种属性的介绍：

content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型
border-box：怪异盒模型，低版本IE浏览器中的盒模型

解析：

border-box：就是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变

盒子实际宽度 = 设置的width（padding和border不会影响实际宽度）

content-box：padding和border不被包含在定义的width和height之内。
盒子的实际宽度=设置的width+padding+border

对于默认的盒子模型 : 当一个盒子的总宽度确定之后，要想给盒子添加边框或内边距，往往需要更改 width属性值，才能保证盒子总宽度不变，操作起来烦琐且容易出错，运用CSS3的box-sizing属性可以轻松解决这个问题。box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下。

二：实例分析

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>box-sizing属性用法</title>
    <style type="text/css">
       .box{
            width: 300px;
            height: 100px;
            padding-right: 10px;
            background: #F90;
            border: 10px solid #ccc;
            box-sizing: content-box;
       }
        .box1{
            width: 300px;
            height: 100px;
            padding-right: 10px;
            background: #F90;
            border: 10px solid #ccc;
            box-sizing: content-box;
        }
        .box2{
            width: 300px;
            height: 100px;
            padding-right: 10px;
            background: #F90;
            border: 10px solid #ccc;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
   <div class="box">默认属性</div>
   <span>最终宽度 = content(width300px)+padding-right(10px)+border(20px) =330px</span>
    <div class="box1">content_box属性</div>
   <span>最终宽度 = content(width300px)+padding-right(10px)+border(20px) =330px</span>
    <div class="box2">border_box属性</div>
   <span>最后宽度 = content(width270px)+padding-right(10px)+border(20px)</span>
</body>
</html>

图示：

对content-box 分析：

这是第一个和第二个 默认的图像的盒子模型 有图我们可以看到 width =300 这里300是内容content的宽度是提前设置的看图像 padding-right =10px padding-left =0px border = 10px *2(左右)

最终宽度 330px= content(width300px)+padding-right(10px)+border(20px) =330px

对 borbox-box分析：

这是第三个图像的盒子模型 有图我们可以看到 width =270 这里270是内容content的宽度是提前设置的看图像 padding-right =10px padding-left =0px border = 10px *2(左右)

最终宽度 300px= content(width270px)+padding-right(10px)+border(20px)

<阿睿>

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
边框盒子 box-sizing 的 content-box 和 border-box属性

对于默认的盒子模型 : 当一个盒子的总宽度确定之后，要想给盒子添加边框或内边距，往往需要更改 width属性值，才能保证盒子总宽度不变，操作起来烦琐且容易出错，运用CSS3的box-sizing属性可以轻松解决这个问题。box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下。图示：.........
复制链接

扫一扫

专栏目录