[css] 第69天请说说*{box-sizing: border-box;}的作用及好处有哪些？ #495

Open

Open

[css] 第69天请说说*{box-sizing: border-box;}的作用及好处有哪些？#495

Labels

第69天请说说*{box-sizing: border-box;}的作用及好处有哪些？

added

on Jun 23, 2019

changed the title ~~[-][css] 第69天请说说`*{box-sizing: border-box;}`的作用及好处有哪些？[/-]~~ [css] 第69天请说说*{box-sizing: border-box;}的作用及好处有哪些？

on Jun 24, 2019

作用: 将padding和border包括在width内

好处: 更符合我们通常对一个「盒子」尺寸的认知,省掉一些计算

还是喜欢用默认的content-box 不考虑老版ie 比较通配符的性能较差第三方的UI库的盒模型也都是标准盒模型

很多网站和样式都是 boder-box , 包括淘宝h5版本5和饿了么。 boder-box 对元素设定固定尺寸之后js获取到的值是固定的。

作用: 将padding和border包括在width内

好处: 更符合我们通常对一个「盒子」尺寸的认知,省掉一些计算

这样不管border和padding的值是多少，盒子在页面中的占地大小不会发生改变

to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Participants