box-sizing属性可以为三个值的一些理解

最新推荐文章于 2024-04-23 22:27:30 发布
置顶 最新推荐文章于 2024-04-23 22:27:30 发布
阅读量869 收藏
点赞数 1
分类专栏： CSS的理解 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35286031/article/details/108102965
版权

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内 （这个值貌似谷歌不支持）

border-box，border和padding计算入width之内，其实就是怪异模式了~

qq_35286031
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于box-sizing的全面理解
12-13
—恢复内容开始— box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 语法box-sizing: content-box|border-box|inherit; content-box ：w3c标准（默认） border-box ：IE传统标准 content-box: .test1{ box-sizing:content-box; width:200px; padding:10px; borde
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计算入width之内，其实就是怪异模式了~ 注意： ie8+浏览器支持content-box和border-box； ff则支持全部三个值。 使用时： -webkit-box-sizing: 100px; // for ios-safari, and
【CSS】box-sizing 属性
小秀的博客
06-09 3148
css中的box-sizing属性
盒模型以及box-sizing常用属性
weixin_49734970的博客
07-19 171
因此，给div盒子加了box-sizing:border-box属性，padding和border的值就不会再影响元素的宽高，相当于把padding和border的值都算在content里，这样，盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整宽高。content-box：浏览器对盒模型的解释遵从W3C标准，当定义width和height时，它的参数值不包括border和padding，这个属性是默认值。可以把每一个容器，比如div，都看做是一个盒子模型。
css3的box-sizing:border-box；
weixin_43846020的博客
09-21 626
响应式Web设计经常需要我们通过百分比设置组件宽度。如果我们不考虑边框，那么很容易就可以实现，但如果你给每一列以及总宽度都采用百分比设置，那这个时候固定的边框大小就会出来捣乱。下面我们将看到一组方法去解决这个问题，你会学到如何创建一个流式布局，而不用担心额外的边框以及内边距。 假设我们需要一个五列的布局。我们要考虑的第一件事就是外边距（margins）.假设所有的列都需要4%的外边距，我们需要为所有的外边距保留20%（4%*5（5列）=20%）的占宽比；然后我们从总宽比（100%）里面减去20%，得到的就是
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" />
box-sizing的属性值
continuous的博客
03-15 1924
box-sizing属性值及作用 content-box 这是box-sizing的默认属性值 padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即width + border + padding，表现为标准模式下的盒模型 border-box 怪异盒模型，一般在IE浏览器中默认是怪异盒模型。 padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值 inhe
CSS.box-sizing属性（让你看到不同的解释，直达问题本质）
记录 分享 成就
05-15 1089
前言 css中width属性经常用，但这个属性本来就含义不清楚，如果没有边框和填充当然没问题，如果设置了，再不明白box-sizing样式就容易出问题。搜了几篇文章，讲的各种糊涂。 下面请你看完，你才能明白box-sizing属性的设计最初思想， 一次性搞懂再也不管了。 实际场景 物流体积计算冲突 想一个场景：物流按照体积计费，那这个宽高按照啥计费呢？如下图：如果按照外边计费消费者亏了，如果按照里边计费，物流商占不到便宜。 差距在哪呢：纸箱子的厚度和里边填充的泡沫的厚度 运输的两种场景 .
H5移动端知识点总结（四）
09-13 489
Flex布局兼容知识点总结 假设父容器class为 box,子项目为item. 旧版语法如下： 一：定义容器的display属性。 旧语法如下写法： .box {     display: -moz-box;      display: -webkit-box;     display: box; } 新版语法需要如下写： .box{     display: -webki
MDN之Web 开发技术【box-sizing】
极客神殿
08-29 588
CSS中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。 box-sizing: border-box; width: 100%; border: solid #5B6DCD 10px; padding: 5px; 在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素...
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
12-13
这样就有可能对我们的布局造成影响，如果不想让内边距和边框影响到我们设置的固定尺寸，可以借助 box-sizing 这个css属性来实现。 1，box-sizing 属性介绍box-sizing 允许我们以特定的方式定义匹配某个区域的特定...
css3 box-sizing属性使用参考指南
12-01
基础知识 语法： box-sizing ： content-box | border-box | inherit 相关属性 ： 无 取值： content-box:此值维持css2.1盒模型的组成模式，border|padding|content {element width=border+padding+content} ...
css3 盒模型以及box-sizing属性全面了解
12-13
文档中的每个元素被描绘为矩形盒子。渲染引擎的目的就是判定大小，属性——比如它的颜色、背景、边框方面——及这些盒子的位置。在CSS中，这些矩形盒子用标准盒模型来描述。这个模型描述了一个元素所占用的空间。每...
【CSS】grid 布局一行自动填充，每行最大限定px
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-23 321
【代码】【CSS】grid 布局一行自动填充，每行最大限定px。
CSS基础——1.CSS样式
weixin_66370632的博客
04-23 690
CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等。css的主要作用是定义网页的样式 CSS样式 1. 行内样式 行内样式：直接定义在 HTML 标签的 style 属性中
SCSS的基本使用(一)
大圣归来圣骑士清欢的博客
04-22 511
SCSS的基本使用、语法
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1075
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
2分钟自己写小游戏：使用js和css编写石头剪刀布小游戏、扫雷小游戏、五子棋小游戏。新手老手毕业论文都能用。
m0_68335484的博客
04-23 1361
2分钟自己写小游戏：使用js和css，快捷编写剪刀石头布游戏源代码、扫雷源代码、五子棋。新手老手毕业论文都能用。使用的都是简单的js和css代码，实现了这三款小游戏，复制就能用。一看就能懂。这里分享一下。下次继续。
CSS文本样式
最新发布
qq_41807399的博客
04-23 466
CSS中使用text-align属性来定义文本的水平的对其方式。left：左对齐right：右对齐center：居中对齐justify：两端对齐将块状元水平居中需要使用margin属性，将左右两边都设置成自动时，块状元素会自动居中。CSS使用vertical-align属性定义文本的垂直对齐问题auto属性值根据layout-flow属性值定义对齐对象的内容baseline：表示对象内容与基线对齐sub表示垂直对齐文本的下标super表示垂直对齐文本的上标。
box-sizing属性
03-30
box-sizing属性有两个值： 1. content-box（默认值）：元素的宽度和高度只包括内容区域的宽度和高度，不包括边框和内边距。 2. border-box：元素的宽度和高度包括内容区域、内边距和边框的宽度和高度。 使用box-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值