CSS3中的box-sizing

最新推荐文章于 2021-06-21 19:03:30 发布

二九君

最新推荐文章于 2021-06-21 19:03:30 发布

阅读量142

点赞数

分类专栏： CSS 前端面试题文章标签： css js html

本文链接：https://blog.csdn.net/weixin_44019523/article/details/113996523

版权

前端同时被 3 个专栏收录

87 篇文章 3 订阅

订阅专栏

面试题

51 篇文章 1 订阅

订阅专栏

CSS

13 篇文章 1 订阅

订阅专栏

本文详细解释了box-sizing的不同模式——content-box和border-box，展示了如何通过CSS调整元素尺寸计算方式，并给出了相关示例。重点介绍了IE盒模型与标准盒模型的区别，适合前端开发者深入理解布局计算原理。

摘要由CSDN通过智能技术生成

box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度

盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

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

content-box:
width = content width;
height = content height

IE盒模型 box-sizing: border-box

border-box:
width = border + padding + content width
heigth = border + padding + content heigth

两个div均统一设置属性，然后针对第二个div设置了其box-sizing属性，并赋值为border-box。代码如下：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title></title>  
    <style type="text/css">  
        div{  
            width: 50px;  
            height: 50px;  
            margin: 10px;  
            padding: 10px;  
            border: 10px solid #888;  
        }  
        #bs{  
            box-sizing: border-box;  
        }  
    </style>  
</head>  
<body>  
<div></div>  
<div id="bs"></div>  
</body>  
</html>

效果如下：
在这里插入图片描述
关于box-sizing表格如下：

box-sizing属性值	浏览器说明	示例
不设定	默认
border-box	IE8+，其他浏览器最新版均支持
content-box	IE8+，其他浏览器最新版均支持
padding-box	仅火狐浏览器

参考：https://blog.csdn.net/qinshenxue/article/details/17753005

二九君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3中的box-sizing

box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。标准盒模型 box-sizing: content-boxcontent-box:width = content width;height = content heightIE盒模型 box-sizing: border-box
复制链接

扫一扫

专栏目录