CSS之box-sizing的用处简介

最新推荐文章于 2023-07-20 20:27:06 发布
最新推荐文章于 2023-07-20 20:27:06 发布
阅读量114 收藏
点赞数

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

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

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




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





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



weixin_34409741
关注
CSS3的box-sizing属性详解及源代码示例
WbhsOcaml的博客
09-30 64
在介绍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 的作用
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作用
qq_61955800的博客
07-20 584
是 CSS 中的一个属性，它的作用是让元素的宽度和高度包括其边框和填充(padding)。这样，当你为一个元素设置宽度和高度时，不会因为边框和填充的原因而超出预期的大小。使得padding额外的空间依然包含在width100%中。
box-sizing什么时候用？常用的值都有什么？
weixin_33845477的博客
11-24 681
一般在做自适应的网页设计的时候用，用这个属性网页结构才不会被破坏。 常用的值： 1. content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。 2. border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 3. inherit：规定应从父元素...
CSS中box-sizing属性的作用
weixin_30835923的博客
04-12 657
今天在项目中看到box-sizing这个属性，以前用过，但是不常用！注意，它是CSS3里的属性喔！ W3C 盒子模型：标准盒模型，是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是标准盒模型，它也是标准 w3c 盒子模型。 IE盒子模型：怪异盒模型，是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为是怪异盒模...
box-sizing的属性及作用详细介绍【CSS3】
zy1992As的博客
01-12 3728
应用“box-sizing: border-box;当一个盒子的总宽度确定之后，要想给盒子添加边框或内边距，往往需要更改 width属性值，才能保证盒子总宽度不变，操作起来烦琐且容易出错，运用CSS3的box-sizing属性可以轻松解决这个问题。●content-box：浏览器对盒模型的解释遵从W3C标准，当定义width和height时，它的参数值不包括border和padding。在上面的语法格式中，box-sizing属性的取值可以为content-box或border-box，对它们的解释如下。
前端开源库-tachyons-box-sizing
08-30
**标题与描述解析** ...综上所述，Tachyons-box-sizing是一个强大的前端工具，它提供了智能的盒模型解决方案，简化了前端开发中的布局设计，同时借助Tachyons框架的其他优势，为开发者带来了高效、可维护的CSS代码。
自学前端第十天 : CSS怪异盒子模型
weixin_47592060的博客
05-04 2570
一.怪异盒子模型 怪异盒模型是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页面中
box-sizing常用的属性有哪些？分别有什么作用？
palette_的博客
05-02 1万+
(Q1)box-sizing: content-box|border-box|inherit; (Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
CSS之box-sizing的用处简单介绍
weixin_30779691的博客
08-16 320
前几天才发现有 box-sizing这么个样式属性，研究了一番感觉很有意思， 通过指定容器的盒子模型类型，达到不同的展示效果 例如：当一个容器宽度定义为 width:100%; 之后，如果再增加 padding 或者 border 则会溢出父容器，是向外扩张的 如果使用该样式，指定为box-sizing: border-box; 则 pad...
box-sizing属性是什么作用？
斌哥谈编程
05-09 1025
文章目录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属性值和作用
candy_tity的博客
01-20 1万+
兼容问题 首先，box-sizing属性在FireFox中存在兼容问题，所以需要使用-moz-box-sizing做一下兼容。属性值 box-sizing：content-box box-sizing：border-box box-sizing：inherit content-box 这是box-sizing的默认属性值 是CSS2.1中规定的宽度高度的显示行为 在CSS中定义的宽度和高度就对应到
css中box-sizing的使用场景
xu3tu的博客
01-24 1917
首先，要知道box-sizing是用来干啥的：改变盒模型中宽度和高度的定义范围。  border-box: width = content + padding + border ，也就是IE的盒怪异模式。  content-box:width = content 正常模式 使用场景分析：当需要以content + padding + border为整体的时候使用border-box，例如
css-布局- box-sizing 的含义及作用
热门推荐
我有一个梦想的专栏
06-11 1万+
含义 了解过前端的同学都知道前端控制样式使用典型的盒子模型, 盒子模型由四部分构成，外边距(margin), 边框(border),内边距(padding), 内容content; box-sizing 就是指定盒子的大小和结构的。 它支持三种值： box-sizing: content-box; //默认值 内容真正宽度 = 设置的宽度 box-sizing: border-box; // 内...
box-sizing属性的使用
hzjanger的博客
12-09 3951
语法：box-sizing: content-box | border-box 默认值： content-box 计算方式： content-box：盒子的宽度是给定的宽度+padding+border,盒子的高度是给定的高度 + padding + border，设置了padding和border也不会减少内容的宽度和高度。 border-box：盒子的宽度和高度就是给定的宽度和高度，如果设置...
box-sizing的作用
tiandaochouqin_1的博客
02-17 2121
box-sizing:content-box;   写这条语句以及不写这条语句，都等同于以前的盒模型。即 padding、border都会加宽加高盒子   box-sizing:border-box; CSS3新属性。 padding、border不会加宽加高盒子...
CSS样式属性完全指南
- `box-sizing`: 控制元素的盒模型是`content-box`（默认）还是`border-box`。 7. **响应式属性**： - `@media`: 用于定义不同屏幕尺寸下的样式规则，实现响应式设计。 8. **过渡和动画属性**： - `transition`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值