CSS--box-sizing属性的应用

最新推荐文章于 2022-02-19 21:49:19 发布
最新推荐文章于 2022-02-19 21:49:19 发布
阅读量295 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alisa_lifang/article/details/79424310
版权

box-sizing属性可以设置各浏览器如何显示盒模型，用来解决某些不支持flex属性的浏览器无法实现弹性布局的bug


（1）当box-sizing属性取值为border-box时（IE浏览器）：

        元素的宽度包含了 内容的宽度+padding+border

        元素的高度包含了 内容的高度+padding+border


显示结果为：


（2）当box-sizing取值为content-box或者不设置时（chrome浏览器）

       元素的宽度只包含 内容的宽度

       元素的高度只包含   内容的高度





Alisa_lifang
关注
CSS之Box-sizing
tian361zyc的博客
06-12 330
CSS
css3中的box-sizing属性的使用
diaota2693的博客
04-18 190
box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值：content-box、border-box、inherit。 其中inherit表示box-sizing的值应该从父元素继承。 content-box和border-box的主要区别就是元素的width和height的值包不包括border、padding这两个属性的值。 一、cont...
CSS box-sizing 属性详解
WEB_G
05-18 862
页面布局必使用div，p等块级元素，但是对于padding的设置，有时候他就跟预想的一样，元素的宽度加宽了，但有时候却很奇怪，在元素的设定宽度里包含着。知道遇到了box-sizing，才知道，它是可以自己设置的。当你想让固定宽度，padding 在其宽度内部包含时，就把box-sizing 设置为 border-box ，如果不想，可以设置为content-box。 具体的，自己看图吧。
CSS-14.盒子模型的宽高问题和box-sizing属性
别忘了缩进的博客
01-29 276
内容宽高： 例如： 红色框选就是内容宽高 元素宽高 同样是上面的代码，红色框就是元素宽高，为什么不加margin，以为外边距，是不算在div中的 当我们在已经设置好样式的时候，这是如果修改，就会导致变形，使用css3中的box-sizing属性就可以避免变形的问题 格式和取值： box-sizing:content-box; 这个是默认值，默
CSS系列之 box-sizing
老__L的博客
02-19 6563
本文主要介绍CSS的box-sizing属性。box-sizing属性定义了如何计算一个元素的总宽度和总高度。
CSS3 box-sizing属性详解
12-13
box-sizing属性包括content-box（default），border-box，padding-box。  1、content-box，border和padding不计算入width之内  2、padding-box，padding计算入width内  3、border-box，border和padding计算入...
详解CSS3中的box-sizing（content-box与border-box）
12-14
CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border-box：怪异盒模型，低版本IE浏览器中的盒模型 ...
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
12-13
这样就有可能对我们的布局造成影响，如果不想让内边距和边框影响到我们设置的固定尺寸，可以借助 box-sizing 这个css属性来实现。 1，box-sizing 属性介绍box-sizing 允许我们以特定的方式定义匹配某个区域的特定...
css3 box-sizing属性使用参考指南
12-01
CSS3的`box-sizing`属性是一个非常重要的样式规则，它允许开发者改变元素的盒模型，从而更好地控制元素的布局和尺寸。盒模型是CSS布局的基础，理解`box-sizing`属性对于构建响应式和灵活的网页设计至关重要。 在CSS...
CSS盒子模型box-sizing属性详解
qq_34466755的博客
11-03 1万+
1.content-box chrome浏览器默认的盒子属性值。 content-box的width和height从content算起，不包含border和padding。 2.border-box IE浏览器默认的盒子属性值。 border-box的width和height从border算起,包含border和padding <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />
css3中的box-sizing属性
曜灵的博客 - 欢迎访问 https://lianpf.github.io
03-05 784
box-sizing的CSS属性是用来改变默认的CSS框模型，用于计算元素的宽度和高度。它可以使用这个属性来模拟浏览器的行为不正确支持CSS盒模型的规范。 说到 IE 的 bug，在 IE6以前的版本中，IE对盒模型的解析出现一些问题，跟其它浏览器不同，将 border 与 padding 都包含在 width 之内。而另外一些浏览器则与它相反，是不包括border和padding的
box-sizing属性解析
zzzzz周绍辉的博客
06-27 1033
实际上div等或者display属性设置为block的块级元素默认的都是box-sizing:content-boxboxsizing的值列表 content-box 是块级元素默认的。 padding-box 因为兼容性不好，只有fireFox支持，chrome和IE浏览器不支持，而且WC上也并没有列举出来，所以不做讨论。 border-box 所有浏览器都兼容。 inherit 继承它父元素的
浅谈CSS3的box-sizing属性
筱葭的博客
03-09 1973
box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。 假如需要并排放置两个带边框的框，可通过将box-sizing设为"border-box"，令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。   box-sizing：content-box | border-box 默认值：content-box 适用于：所有接受width和height的元素
CSS中box-sizing属性的作用
weixin_30835923的博客
04-12 646
今天在项目中看到box-sizing这个属性，以前用过，但是不常用！注意，它是CSS3里的属性喔！ W3C 盒子模型：标准盒模型，是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是标准盒模型，它也是标准 w3c 盒子模型。 IE盒子模型：怪异盒模型，是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为是怪异盒模...
box-sizing常用属性有哪些？含义是什么？
鹏仔工作室的秘密基地
02-01 6287
box-sizing常用属性有哪些？含义是什么？   含义:     box-sizing 是用来设置盒模型的尺寸   属性: box-sizing: border-box; 总宽高不包含padding和border box-sizing: content; 总宽高包含padding和border 原文 http://www.sharedblog.cn/?post=43...
盒模型宽高定义box-sizing
demographic2017的博客
02-28 184
以前盒模型默认的宽高是指内容的宽高。css3后可以用box-sizing来指定宽高。 box-sizing：content-box | border-box 默认值：content-box content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Elemen...
box-sizing: border-box;的作用
热门推荐
qq_37453240的博客
01-31 4万+
box-sizing 属性可以被用来调整这些表现: content-box  是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包
详解盒子模型 以及 box-sizing两个属性值得含义区别
wenjie816的博客
11-16 3598
注：本文中box-width是指展示在页面中整个盒子的宽度 width指的是在代码中的width值 盒子模型是由margin、padding、border、width、height组成的。 它包括两种类型。（1）W3C盒子模型（2）IE盒子模型。 二者是由box-sizing这个属性来区分的。box-sizing的属性值有两个，在下面将展开详细讲解。 首先来张图，让大家直观看一下这两个区别，相信看...
CSS解读之box-sizing属性
zhanglir333的博客
11-27 1万+
box-sizing属性是CSS3中引入的，有人解释为它可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素内部的补白区域，以及边框的宽度与高度。这句话有点绕，我理解为它是一种容器高宽的计算方法，具体是怎样的一种计算方法，和传统的计算方法又有什么区别，通过下面的例子我们可以很直观的了解到。        如图1-1所示，两个div均统一设置属性，然后针对第二个div
CSS盒模型与box-sizing属性解析
"这篇文章主要汇总了CSS面试中的关键知识点，特别是盒模型以及`box-sizing`属性的使用。" 在前端开发中，CSS是用于样式化和布局网页的重要工具。盒模型是理解CSS布局的基础，它定义了元素在网页上占用的空间。CSS3...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值