CSS属性 - box-sizing

原创 已于 2022-07-30 13:44:54 修改 · 290 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #html #css3

于 2022-07-29 22:29:29 首次发布
本文详细讲解了box-sizing属性的两种模式：content-box与border-box，阐述了它们如何影响元素尺寸计算，并介绍了IE盒子模型和W3C标准的区别。特别关注了元素居中解决方案，涵盖行内级元素和块级元素的方法。

box-sizing用来设置盒子模型中宽高的行为

content-box

  • padding、border都布置在width、height外边；

border-box

  • padding、border都布置在width、height里边

box-sizing: content-box

元素的实际占用宽度 = border + padding + width

元素的实际占用高度 = border + padding + height
在这里插入图片描述

box-sizing: border-box

元素的实际占用宽度 = width

元素的实际占用高度 = height
在这里插入图片描述

IE盒子模型

W3C标准盒子模型
在这里插入图片描述
IE盒子模型（IE8以下浏览器）
在这里插入图片描述

元素的水平居中方案

行内级元素(包括inline-block元素)

  • 水平居中：在父元素中设置text-align: center;

块级元素
水平居中：margin: 0 auto;

深入理解 `box-sizing: border-box；`：CSS 布局的利器
engchina的专栏
02-02 1681
深入理解 `box-sizing: border-box;`：CSS 布局的利器
CSS3属性box-sizing使用指南
12-13
box-sizing用于改变CSS盒子模型，从而改变元素宽高的计算方式。 box-sizing取值如下： 复制代码代码如下:box-sizing: content-box | padding-box | border-box 默认值是 content-box ，对应CSS2.1规范中标准的盒子...
css3 box-sizing属性
weixin_33962923的博客
05-24 376
box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。 content-box，border和padding不计算入width之内 padding-box，padding计算入width内 border-box，border和padding计算入width之内，其实就是怪异模式了~ ie8+浏览器支持cont...
CSS 的盒子模型，及box-sizing用法
嘻嘻哈哈的博客
05-01 779
CSS 的盒子模型，及box-sizing用法
深入解析 CSS `box-sizing` 属性
最新发布
2501_93104808的博客
09-29 870
box-sizing是CSS关键属性，用于控制元素总宽高的计算方式。它有两种主要模式： content-box（默认）：width/height仅定义内容区尺寸，padding和border会额外增加总尺寸 border-box（推荐）：width/height包含内容区、padding和border，使布局计算更直观 主要区别在于： content-box模式下200px宽+20px padding=240px总宽 border-box模式下200px宽会包含padding，总宽保持200px 现代开发常
【前端】每日一道面试题2：解释CSS盒模型的box-sizing属性，以及它在响应式布局中的作用。
ejunda的博客
05-08 598
通过统一盒模型的计算逻辑，成为响应式设计的基石。它不仅简化了开发者的尺寸控制流程，还提升了多设备适配的可靠性和代码可维护性。
css——box-sizing属性
weixin_52512511的博客
07-22 1427
盒子模型由四部分构成，外边距(margin), 边框(border),内边距(padding), 内容content。如果想要盒子模型中的content宽度与通过css width属性设置的宽度相同，则使用。如果想使整个盒子宽度固定(即使padding和border发生变化)时使用。box-sizing 就是指定盒子的大小和结构的。
CSS中的box-sizing属性
秦哥的博客
08-09 526
目录 零、码仙励志 一、box-sizing 1.语法 2.案例 1.属性为content-box 2.属性为border-box 零、码仙励志 许多时候，我们不快乐，并非因为寂寞，而是太多的无能为力，太多的不愿割舍。 一、box-sizing 1.语法 box-sizing: content-box|border-box|inherit; 2.案例 1.属性...
详解CSS3中的box-sizing（content-box与border-box）
12-14
CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border-box：怪异盒模型，低版本IE浏览器中的盒模型 ...
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 属性
小秀的博客
06-09 5224
css中的box-sizing属性
CSS box-sizing属性
xYY_X_xYY的博客
08-25 266
box-sizing属性 content-box（默认标准盒模型） width=content-width .box{ width: 100px; height: 100px; border: 10px solid #FF0000; padding: 5px; margin: 5px; /* 默认width就为内容宽度100px */ box-sizing: content-box; /* content-box;恢复默认 */
CSS中的box-sizing
wz310的博客
07-11 518
box-sizing有两个属性：content-box/border-box，content-box: width仅指内容框宽度，不包括padding和border宽度，该属性的盒子为标准盒子模型，border-box: width指内容框宽度+左右padding+左右border宽度，该属性的盒子为IE盒子模型
css box-sizing
简简单单兔呦
12-11 468
原文来源: 老姜博客 css第24讲之css box-sizing box-sizing:用来控制padding和border是否包含在width和height之中. 支持两种取值: content-box border-box 默认情况下，element的最终长度和宽度计算公式如下: width + padding + border = element最终的宽度 height + padding + border = element最终的高度 所以，当你设置width和height，其实最终的.
CSS box-sizing 属性详解
My_wife_QBL的博客
07-09 1321
CSS 盒模型是描述 HTML 元素在页面中布局的基本模型。每个 HTML 元素都被视为一个矩形的盒子，这个盒子由内容区域、内边距（padding）、边框（border）和外边距（margin）组成。盒模型的计算方式对元素的最终尺寸有重要影响。box-sizing.element {/* 或 box-sizing: border-box;*/：使用标准盒模型，元素的宽度和高度仅包括内容区域。：使用替代盒模型，元素的宽度和高度包括内容区域、内边距和边框。
CSS——box-sizing盒模型
blk2002的博客
11-08 591
盒模型
css篇-盒子模型理解
G294992891的博客
11-08 558
前言 在CSS 盒子模型的默认定义里，你对一个元素所设置的width与height只会应用到这个元素的内容区。如果这个元素有任何的border或padding，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。 语法： box-sizing属性被指定为下面列表中的关键字。 属性值 content-box 默认值，标准盒子模型。width与height只包括内容的宽和高， 不包括...
css属性box-sizing属性
lierwangwangwang的博客
03-07 275
我们清除了默认的内外边距,并设置了字体颜色。 *{ margin: 0px; padding: 0px; } body{ color: rgb(255,255,255); } 文字所处的位置即使content 我们观察一下，只设置width:200px，在浏览器下的实际显示效果（当然为了 便于观察，我们设置了相应的颜色） box-sizing有两个可取的值分别如下（继承属性不予考虑） conten...
css box-sizing content-box和border-box区别
04-18
### CSS `box-sizing` 属性：`content-box` 与 `border-box` 的区别 #### 基本概念 CSS 中的 `box-sizing` 属性定义了元素尺寸如何被解析和应用。它有两个主要取值：`content-box` 和 `border-box`。 - **`content...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值