css--box-sizing

最新推荐文章于 2021-08-04 09:29:52 发布

原创最新推荐文章于 2021-08-04 09:29:52 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

自创专栏收录该内容

9 篇文章

订阅专栏

本文解释了CSS中box-sizing属性的作用及其三种属性值：content-box、border-box和inherit的区别。通过这些概念的学习，开发者可以更好地控制网页元素的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前一直不明白box-sizing是干嘛的，现在想清楚了，基本不需要设置，因为一般都在使默认值

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容

box-sizing 有三种属性值：

content-box(默认值):元素维持w3c的标准盒模型，即元素宽/高 = 边框 + 内边距（padding) + 内容的宽/高 ;

border-box: 让元素维持IE6及以下版本的盒模型，即元素宽/高 = 内容的宽/高；

inherit:继承父元素的盒模型模式

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhangting8_

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

深入理解 `box-sizing: border-box；`：CSS 布局的利器

engchina的专栏

02-02

1473

深入理解 `box-sizing: border-box;`：CSS 布局的利器

详解CSS3中的box-sizing（content-box与border-box）

12-14

CSS3中的box-sizing（content-box与border-box） CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border-box：怪异盒模型，低版本IE浏览器中的盒模型现代浏览器和IE9+默认值是content-box。语法格式： box-sizing：content-box | border-box 区别： content-box：padding和border不被包含在定义的width和height之内。盒子的实际宽度=设置的widt

参与评论您还未登录，请先登录后发表或查看评论

Box-Sizing

精彩人生

02-16

2355

来自：http://www.w3cplus.com/content/css3-box-sizing box-sizing是CSS3的box属性之一。一说到CSS的盒模型（Box model）我想很多人都会比较烦，特别是对于新手，然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒模型有什么关系呢？第一句话就说了，Box-sizing是CSS

学习CSS布局 - box-sizing

weixin_30933531的博客

05-03

213

box-sizing 人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做box-sizing的CSS属性。当你设置一个元素为box-sizing: border-box;时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了box-sizing: border-box; <!DOCTYPE html>...

CSS样式box-sizing,-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box

007liuchao007

03-08

1990

[size=medium]box-sizing box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。语法 box-sizing：content-box | border-box 默认值：content-box 取值 content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和borde...

CSS 之Box-sizing 属性的使用方法

天外野草技术专栏

09-10

995

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。默认值： content-box 继承性： no 版本： CSS3

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计算入...

css详解box-sizing.zip

01-06

.url`和`从box-sizing-border-box属性入手，来了解盒模型 -用box-size border-box改变盒模型的结构.url`这两个链接则涉及到了与Box Sizing相关的其他CSS属性，如`text-overflow`，`white-space`和`overflow`，它们...

css3 box-sizing属性

xiaozhen0610的博客

06-09

307

定义和用法 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。默认值： content-box 继承性： no 版本： CSS3 JavaScript 语法： object.style.boxSizing="border-box" box-sizing：content-box | border-box 默认.

html中定义盒子有哪些属性,CSS3中盒子的box-sizing属性

weixin_33232550的博客

06-04

809

box-sizing属性box-sizing属性用来改变默认的CSS盒模型对元素宽高的计算方式。这个属性可以用于模拟那些非正确支持标准盒模型的浏览器的表现。box-sizing：content-box(default) | border-box ;content-box默认值，标准盒模型。 width与height 只包括内容的宽和高，不包括边框(border)，内边距(padding)，...

CSS3中的box-sizing属性实例详解

杜小白的博客

04-11

1773

box-sizing是CSS3的box属性之一，box-sizing 属性允许你以特定的方式定义匹配某个区域的特定元素。什么是以特定的方式呢，下面我们来分析一下：一、box-sizing属性包括content-box（default），border-box，inherit。 1、content-box：border和padding不计算入width之内，即width直接就是内容区的宽度 ...

css盒模型之box-sizing

头名字W的博客

06-19

1415

box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。box-sizing: content-box|border-box|inheritcontent-box：指容器的边框的线的宽度不算在容器的宽高里面，在容器外绘制边框。border-box：将容器的边框算在容器内，实际容器的宽高需要减去边框的宽度。inherit: 继承父级的属性。div.container {width:...

-webkit-box-sizing属性冲突如何解决

qToHoTp的博客

11-03

2642

-webkit-box-sizing属性冲突如何解决页面用到了框架，而框架里面的样式又影响到了我本来的页面 *, :after, :before { -webkit-box-sizing: border-box; box-sizing: border-box; } 如何能不继承这个父级样式受到影响的地方： { -webkit-box-sizing: content-box; box-sizing: content-box; } 不过那个 border-box 真的很

对css属性box-sizing稍稍了解

ime33的博客

01-04

418

在了解box-sizing之前，让我们来稍稍回顾一下盒子模型，模型分为：标准盒模型+IE盒模型。那这有什么区别呢？见图所示：从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、c

css3 - box-sizing属性

erdouzhang

05-09

497

在css3中，使用box-sizing属性来指定针对元素的宽度和高度的计算方法。兼容 IE8 Chrome 8 Opera 10 Firefox 4 box-sizing √ √ √ √ 在css中，使用width属性和hight属性来制定元素的宽度与高度。但是使用box-sizing属性，可以指定用width属性和height属性分别指定的宽度值与高度值是否

html css box sizing,CSS3 box-sizing属性详解

weixin_42472263的博客

06-18

206

简介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计算入width之内，其实就是怪异模式了~注意：ie8+浏览器支持content-box...

css3中box sizing,解析CSS3中的Box-Sizing属性

weixin_29069575的博客

08-04

221

在重构移动端页面的时候，我们经常会遇到两个框架并排的情况，并且需要宽度自适应、等宽，有边框这样的情况，我平时的方法就是用定位来处理，然后用负值定位来解决，但是后来发现可以用CSS3中的Box-Sizing属性来搞定。好吧，立马推荐出来给大伙。语法：box-sizing: content-box|border-box|inherit;定义：box-sizing 属性允许您以特定的方式定义匹配某个区域...