boder sizing：boder-box的使用意义

喜欢ヅ旅行 2022-04-04 12:48 98阅读 0赞

调CSS有时候感到总和设计图有出入，有的时候甚至是直接把图上的内容拷过来也不像。感觉自己的div莫名大了或者调了居中确不居中。其实有时候问题是你在挑样式的时候，把div元素看做盒子，你在加padding或者boder时，实际上会拉伸这个盒子的长度或者高度。

没有进行设置的CSS的高度和宽度默认数值如下：  
**width + padding + border = actual width of an element**  
**height + padding + border = actual height of an element**

这时候可以用到一个CSS属性叫做box-sizing，它在MDN和w3cschool上有解释说明和例子：  
地址如下：  
w3cscholl:[https://www.w3schools.com/css/css3\_box-sizing.asp][https_www.w3schools.com_css_css3_box-sizing.asp]  
MDN:[https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing][https_developer.mozilla.org_zh-CN_docs_Web_CSS_box-sizing]

boder-sizing属性的作用就是，被修饰的元素的外边距为0，所有的boder和padding距离都是在盒子里边进行的。  
进行了boder-sizing：boder-box修饰元素的宽度是不变的，这对移动端一些机器限制页面不能扩张，只能在固定大小的区域内显示很有作用。文档上建议所有的WEB开发者将boder-sizing设置为boder-box。有了boder-sizing：boder-box你就不用担心你的页面元素无论是单个的DIV还是这个page会被boder和padding拉长，你可以不用担心尽情试用boder和padding不用担心其造成的显示效果的出入。

[https_www.w3schools.com_css_css3_box-sizing.asp]: https://www.w3schools.com/css/css3_box-sizing.asp
[https_developer.mozilla.org_zh-CN_docs_Web_CSS_box-sizing]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

发表评论取消回复

表情：

评论列表（有 0 条评论，98人围观）

还没有评论，来说两句吧...

相关阅读

相关实习的意义

声明：实习，并不代表这我们以及毕业了。我们还是要学习的。因为还会遇到很多让我提升的地方，而且，这些地方是让我们成长提高离不开的。时间管理：　　我们

朴灿烈づ我的快乐病毒、/ 2024年02月18日 17:31/ 0 赞/ 31 阅读

相关线程池使用的场景和意义

java 线程池 java 提供了四种线程池： newCachedThreadPool newFixedThreadPool newScheduledThre

浅浅的花香味﹌/ 2023年10月06日 14:52/ 0 赞/ 38 阅读

相关 Java Object子类toString的使用和意义、Object子类equals的使用和意义

-------------------- Object类子类toString的使用和意义: (1) public String tostring():

你的名字/ 2023年02月20日 12:21/ 0 赞/ 28 阅读

相关 @interface的使用意义

这个自定义注解的意义在于反射当被自定义的注解标注后，被标注的方法或者类通过getMethod()反射方法就可以获知这个方法有没有被标注，一般作为一个系统的全局框架来使用

客官°小女子只卖身不卖艺/ 2022年12月29日 12:46/ 0 赞/ 145 阅读

相关记录的意义

自从养成了记录的习惯，已经有2年多的时间了。记录的内容已经覆盖了4个笔记本，还有一个readme.txt电子文档，大约有5000多行了。现在想想，没有记录

秒速五厘米/ 2022年09月18日 01:48/ 0 赞/ 175 阅读

相关 mmap的详细使用及函数参数意义

mmap 　　功能描述：　　mmap将一个文件或者其它对象映射进内存。文件被映射到多个页上，如果文件的大小不是所有页的大小之和，最后一个页不被使用的空间将会清零。m

忘是亡心i/ 2022年08月27日 13:46/ 0 赞/ 233 阅读

相关虚数的意义

http://www.ruanyifeng.com/blog/2012/09/imaginary\_number.html 作者： [阮一峰][Link 1] 日期：

浅浅的花香味﹌/ 2022年08月24日 14:05/ 0 赞/ 163 阅读

相关 C++虚继承的意义和使用

虚继承：多个派生类保存相同基类的同名成员时，虽可以在不同的数据成员中分别存放不同的数据，但我们只需要相同的一份。解决了多父类重复成员只保留一份的问题。比如现

迈不过友情╰/ 2022年06月07日 07:46/ 0 赞/ 113 阅读

相关 boder sizing：boder-box的使用意义

调CSS有时候感到总和设计图有出入，有的时候甚至是直接把图上的内容拷过来也不像。感觉自己的div莫名大了或者调了居中确不居中。其实有时候问题是你在挑样式的时候，把div元素看做

喜欢ヅ旅行/ 2022年04月04日 12:48/ 0 赞/ 99 阅读

相关意义

成长的过程就是于自己做斗争，于这个世界作斗争。想象一下，一个很脏乱的房间，在自己一点一点动手下变得整洁干净一尘不染，想想一个空荡荡的房子在自己的想法下被装饰的焕然一新。

绝地灬酷狼/ 2021年12月13日 02:09/ 0 赞/ 320 阅读