CSS之box-sizing的用处简单介绍

最新推荐文章于 2024-08-11 20:00:00 发布
最新推荐文章于 2024-08-11 20:00:00 发布
阅读量5.6k 收藏
点赞数 1
分类专栏： css 文章标签： box-sizing 盒子模型 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouzme/article/details/38621155
版权

前几天才发现有 box-sizing 这么个样式属性，研究了一番感觉很有意思，

通过指定容器的盒子模型类型，达到不同的展示效果

例如：当一个容器宽度定义为 width:100%;  之后，如果再增加 padding 或者 border 则会溢出父容器，是向外扩张的




如果使用该样式，指定为 box-sizing: border-box; 则 padding 和 border 就不会再溢出，而是向内收缩的，这个效果感觉非常实用，





特别是 input 和 textarea 等 现在设置 100% 再直接增加内边距和边框也不用再进行复杂的计算和适配了



神神的蜗牛
关注
专栏目录
CSS3的box-sizing属性详解及源代码示例
WbhsOcaml的博客
09-30 65
在介绍box-sizing属性之前，先来回顾一下盒模型的概念。每个HTML元素都可以看作是一个矩形的盒子，包括内容区域、内边距（padding）、边框（border）和外边距（margin）。这些部分组合在一起形成了元素的盒模型。在标准的W3C盒模型中，元素的宽度和高度由内容区域的尺寸计算得出。而在IE盒模型中，元素的宽度和高度包括了内边距和边框的尺寸。CSS3的box-sizing属性是一个非常有用的属性，可以控制元素盒模型的尺寸计算方式。
前端八股文|box-sizing,盒模型，grid布局，localstorage,sessionstorage,cookie,前端如何导出 Excel（CSV）文件
VAN
11-29 58
cookie 其实是 HTTP cookie，它是客户端缓存会话（session）的一种机制，比如我们打开一个网页的时候，浏览器就与服务端建立了一次会话，在这次会话当中，浏览器会向服务端访问数据，有些数据对于用户来说是私有的，比如购物车信息；有些是与用户本身无关的，比如购物网站的商品列表。
box-sizing属性是什么作用？
斌哥谈编程
05-09 1026
文章目录1、场景说明2、未用box-sizing属性之前3、box-sizing属性的作用 1、场景说明 要实现界面主区域块100%显示 2、未用box-sizing属性之前 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>box-sizing属性是什么作用？</title> <style>
box-sizing是什么？
最新发布
QQ1257871322的博客
08-11 306
box-sizing是 CSS 的一个属性，用于控制如何计算元素的总宽度和高度。这是一个非常重要的属性，尤其在布局设计和响应式设计中，它能影响元素的尺寸计算方式。以下是有关box-sizingbox-sizing。
box-sizing作用
qq_61955800的博客
07-20 584
是 CSS 中的一个属性，它的作用是让元素的宽度和高度包括其边框和填充(padding)。这样，当你为一个元素设置宽度和高度时，不会因为边框和填充的原因而超出预期的大小。使得padding额外的空间依然包含在width100%中。
CSS中box-sizing属性的作用
weixin_30835923的博客
04-12 657
今天在项目中看到box-sizing这个属性，以前用过，但是不常用！注意，它是CSS3里的属性喔！ W3C 盒子模型：标准盒模型，是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是标准盒模型，它也是标准 w3c 盒子模型。 IE盒子模型：怪异盒模型，是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为是怪异盒模...
CSS学习（一） box-sizing的应用
weixin_30914981的博客
09-04 124
box-sizing兼容ie8，需要加前缀 -ms- ，但 IE9 浏览器开始就不需要私有前缀了。 1、box-sizing的作用： box-sizing 顾名思义就是“盒尺寸”，其更准确的叫法应该是“盒尺寸的作用细节”，或者说得更通俗一点，叫“width 作用的细节”，也就是说，box-sizing 属性的作用是改变 width 的作用细节。 “内在盒子”分别是“content ...
前端开源库-tachyons-box-sizing
08-30
**标题与描述解析** ...综上所述，Tachyons-box-sizing是一个强大的前端工具，它提供了智能的盒模型解决方案，简化了前端开发中的布局设计，同时借助Tachyons框架的其他优势，为开发者带来了高效、可维护的CSS代码。
自学前端第十天 : CSS怪异盒子模型
weixin_47592060的博客
05-04 2572
一.怪异盒子模型 怪异盒模型是IE盒子模型 我们可以通过 css 样式 box-sizing来进行切换 select { box-sizing: border-box; /* 怪异盒子模型 */ box-sizing: content-box; /* 标准盒子模型 */ } 怪异盒子模型的 宽度 高度计算 和标准盒子模型计算方式不同 怪异盒子模型的 content内容宽度会把padding和border算入其中 是由外而内的计算宽度 二.标准盒子和怪异盒子: 1.标准模型下 宽度计算方式
CSS---总结
m0_53586574的博客
01-05 756
CSS 内部样式表 、、、 <style> div { color: red; font-size: 12px; } </style> 、、、 通过此方式，方便控制当前整个页面中的元素样式设置 但是没实现样式与结构完全分离 行内样式表 、、、 ​ 青春不常在，抓紧谈恋爱 ​ 、、、 可以控制当前的标签设置样式 外部样式表 适合于样式比较多的情况. 分为俩步： 1.新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中。 2.在HTML页面中
CSS系列之 box-sizing
老__L的博客
02-19 6950
本文主要介绍CSS的box-sizing属性。box-sizing属性定义了如何计算一个元素的总宽度和总高度。
浅谈box-sizing的用法
xi_2130的博客
09-21 1718
box-sizing，css3新属性，为了改变ie浏览器的盒模型遗留的width（名副其实）bug属性：content-box | border-box两种属性的用法和区别：<!doctype html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <style type="text/css"> *{
CSS3中box-sizing属性的作用以及应用场景
anmeiba2865的博客
10-18 364
盒模型box-sizing: 取值 1.content-box 默认值，标准盒模型，设置宽度为内容宽度，实际宽度为左右边距加上左右边框加上左右填充再加上内容宽度 2.border-box 设置宽度等于元素内容宽度，content包含了元素的border和padding 3.inherit 继承父元素的盒模型模式 兼容 iE8+ 解决问题： 边框和填充被计算到盒模型内，不会破坏布局 转...
对盒子模型的理解（box-sizing）
laowang357的博客
03-13 649
这个取值表示元素的宽度和高度包括内容区域（content）、内边距（padding）和边框（border），不包括外边距（margin）。也就是说，设置元素的宽度和高度时，内边距和边框的宽度会被包含在内，不会增加元素的总宽度和高度。在标准的盒模型中，一个元素的总宽度和总高度由其内容区域（content）、内边距（padding）、边框（border）和外边距（margin）组成。在某些情况下特别有用，例如创建响应式布局时，可以更好地控制元素的宽度和高度，避免由于边框和内边距导致的布局问题。
box-sizing 的作用
weixin_33850015的博客
01-12 667
box-sizing：content-box | border-box content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )此属性表现为标准模式下的盒模型。border-box：paddi...
box-sizing常用的属性有哪些？分别有什么作用？
热门推荐
palette_的博客
05-02 1万+
(Q1)box-sizing: content-box|border-box|inherit; (Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
box-sizing 的属性及其作用
qq_44537625的博客
08-23 4823
box-sizing的属性值 box-sizing：content-box box-sizing：border-box box-sizing：inherit content-box（默认的盒子，设置padding和border会撑开盒子，使盒子比原本的宽高更大） box-sizing的默认属性值 由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素...
CSS样式属性完全指南
下面将详细介绍一些常见的CSS `style`属性及其用途。 1. **颜色属性**： - `color`: 设置文本颜色，可以使用颜色名称、十六进制、RGB或RGBA值。 - `background-color`: 设置元素的背景颜色。 2. **字体属性**： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

神神的蜗牛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值