关于padding在width中的计算——box-sizing

最新推荐文章于 2021-01-04 14:11:37 发布
最新推荐文章于 2021-01-04 14:11:37 发布
阅读量394 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cjscf/article/details/102652939
版权

目录

前一阵子遇到一个小问题，在同样的样式（主要是宽高边距之类的）条件下，DIV在移动端和PC端的宽度不一样，排除了绝大多数样式的问题，但是有个比较陌生，就是box-sinzing，其实经常看到，只不过没怎么注意过，连具体的值都不知道有哪些，在开发者工具里面试了一下，果然和这个样式有关，因此查了一些资料并记录一下。

<
最低0.47元/天 解锁文章
长乐为歌
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
width: 100%，padding与 box-sizing
yongquanx的专栏
03-01 2922
=在W3School里面的CSS box-sizing属性中，我们可以看到box-sizing的定义如下:我们通过例子来详细地讲诉一下width:100%和padding结合起来使用可能会带来的问题及如何用box-sizing解决。
关于box-sizing的全面理解
12-13
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内...
CSS总结三之盒子模型
zt2494653702的博客
11-18 189
一 盒子模型简介 1.1 定义 HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 1.2 组成 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。 盒子里面的文字和图片等元素是内容区域 盒子的厚度我们成为盒子的边框 （border） 盒子内容与边框的距离是内边距（padding) 盒子与盒子之间的距离是外边距（margin） 二 盒子模型组成 2.1 盒子边框（border） 属性 作用 border-width
设置元素宽度和高度包括了 padding 和 border_box-sizing，你的宽高度计算对了吗？...
weixin_39607447的博客
12-01 751
我们都知道CSS盒模型分为IE盒模型和W3C标准盒模型，它们的计算方式和一个CSS属性有关box-sizing。box-sizing属性值content-box | border-box 默认值：content-boxcontent-box当我们对元素设置content-box.demo1 { box-sizing: content-box; width: 200px; height:...
CSS盒子模型、边距重叠、计算宽高
lwqxmu的专栏
02-24 447
CSS盒模型笔记，主要包括了盒模型的标准模式和IE模式的区别，通过box-sizing属性设置宽高的计算方式，盒模型中的边距重叠问题，几种通过js获取宽高的方法，BFC相关概念以及BFC的几种使用场景。 1、IE模式和标准模式 先敬上一张描述这两种模式的图： 标准模式和IE模式区别在于计算width与height的方式。但是总宽度和总长度的计算方式是一样的。 可以通过box-siz...
使用box-sizing让拥有padding属性的元素不超出想要的宽度
w234213805的专栏
07-14 4625
这两天做页面的设计，想实现一个input最宽的一个搜索框，所以用了input{display:block; width:100%;} 由于默认的样子 有点不好看，遂加入： border:1px solid #FF8B02; border-radius: 5px; padding:10px; 可是问题来了，由于加入了padding属性，导致页面变形了。原因无它，就是因
CSS3 box-sizing属性详解
12-13
 2、padding-box，padding计算入width内  3、border-box，border和padding计算入width之内，其实就是怪异模式了~ 注意： ie8+浏览器支持content-box和border-box； ff则支持全部三个值。 使用时： -webkit-box-...
详解CSS3中的box-sizing（content-box与border-box）
12-14
CSS3中的box-sizing（content-box与border-box） CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式：...content-box：padding和border不被包含在定义的width和height之内。 盒子的实际宽度=设置的widt
css3 box-sizing属性使用参考指南
12-01
在CSS2.1的标准盒模型中，一个元素的总宽度（或高度）由内容区域的宽度（或高度）、内边距（padding）和边框（border）共同决定，即`element width = border + padding + content`。这种模型有时会导致元素的实际...
关于width与padding
热门推荐
Afar的专栏
04-29 1万+
首先谈谈!important问题的引起（盒模型问题）:      在CSS标准中，一个盒模型包括4个区，分别是：内容、内边距（padding）、边框（border）和外边距（margin）。而Width宽度的计算，CSS有它的标准。但是实际上，不同的浏览器的表现却不同。比如，    Firefox（FF）是准确按照CSS标准：width为内容的宽度，也就是说：    层的宽度 = wid
CSS属性之padding与width
flyaway的博客
11-19 1181
CSS属性之padding与width
css之padding
Jancy的博客
03-13 917
1.padding影响元素尺寸： 对于block元素： - box-sizing:border-box;padding值大于宽度值，会影响元素宽度 - width非auto，padding值会影响元素宽度 - box-sizing:border-box;同时padding值没有大于宽度值或者width:auto,padding值不会影响元素宽度 对于inline元素： 水平padding
showexport 属性不管用_48 width、height、padding属性详解
weixin_42315996的博客
01-04 314
成长是一辈子的事儿！大家好！我是时问新。分享前端、Python等技术，以及个人成长路上的那些事儿。width属性width属性表示的是盒子内容的宽度。width属性的单位通常是px，也可以是em和百分数。当块级元素没有设置width属性时，这个块级元素将在页面的水平方向上铺满。也就是说，当块级元素没有设置width属性时，它的宽度就是浏览器窗口的宽度。h系列标签、p标签、li标签、div标签都是块...
width和padding踩的坑~为什么div设置padding被挤出去了
weixin_43228393的博客
04-03 1626
简言之,width设置100%之后,设置padding会将盒子的宽度撑破,超出100% 所以需要设置padding的盒子不能同时设置width=100%
内边距（padding）
Liyunhao_haoge的博客
10-06 2132
内边距（padding） 指的是内容至边框的距离。 padding属性用于设置内边距，是指边框与内容之间的距离 padding-top: 上内边距 padding-right: 右内边距 padding-bottom: 下内边距 padding-left：左内边距 记得padding的值,并没有算在内容高度与宽度内,而是在内容的基础上进行叠加的. 代码如下: <!DOCTYPE ht...
不让padding影响元素的宽度
weixin_30642305的博客
10-26 908
CSS3 新增了 box-sizing 属性。 以前，如果指定 div 的宽度为 div { width: 100px; height: 100px; padding: 10px; } 则包含 padding，div 的实际宽度为 120px。 有时我们不希望 padding 影响到 div 的实际宽度。以前只...
关于padding值不包含在width里面的问题，可能和box-sizing有关
weixin_34050427的博客
08-31 1910
2019独角兽企业重金招聘Python工程师标准>>> ...
width100%，设置padding或border溢出解决方法
weixin_30516243的博客
08-04 615
.box { width: 100px; height: 100px; background: red;} .bd { width: 100%; padding: 10px; background: black;}<div class="box"><div class="bd"></div> </div> 如上结构，子元素将会溢出...
padding规则介绍
实践求真知
05-11 4052
padding属性的意义是定义元素边框和元素内容之间的空间。在tf.nn.conv2d函数中，当变量padding为VALID和SAME，函数具体是怎么计算的呢？其实是有公式的。为了方便演示，先定义几个变量：输入的尺寸高和宽定义成：in_height，in_width卷积核的高和宽定义成filter_height、filter_width输入的尺寸中高和宽定义成output_height、out_...
box-sizing: border-box加在哪
最新发布
01-25
box-sizing: border-box可以应用于任何具有宽度和高度的元素，用于改变元素的盒模型。通过将box-sizing属性设置为border-box，可以将元素的边框和内边距包含在元素的总宽度和高度中。 例如，如果您希望在并排放置两个带边框的框时，使它们的宽度和高度保持不变，可以将box-sizing设置为border-box。这样，框的宽度和高度将包括边框和内边距的大小。 以下是一个示例，展示了如何在CSS中使用box-sizing: border-box： ```css .box { width: 200px; height: 100px; border: 1px solid black; padding: 10px; box-sizing: border-box; } ``` 在上面的示例中，元素的宽度和高度都是200px和100px，包括边框和内边距。这意味着内容区域的宽度和高度将减去边框和内边距的大小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值