box-sizing 在前面的课程哪里讲到的

来源:3-1 box-sizing

战神40

2019-05-09 09:10:12

box-sizing 在前面的课程哪里讲到的

写回答

1回答

好帮手慕星星

2019-05-09

你好,之前课程中没有讲过这个属性,通常在PC端改变盒模型很少。

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

http://img.mukewang.com/climg/5cd3a45a00019cab08590411.jpg

1、默认盒模型是content-box。border和padding值会把原来的容器撑大,例如:

http://img.mukewang.com/climg/5cd3a4f30001b87416670741.jpg

容器实际占据的宽度就是:设置的宽度+左右padding+左右border值

2、还有一种盒模型是border-box:设置padding和border不会把容器撑大,例如:

http://img.mukewang.com/climg/5cd3a5510001972414880746.jpg

padding和border会占据元素设置的宽度。

容器实际占据的宽度就是:设置的宽度(内容宽度+左右padding+左右border)。

自己可以测试下,祝学习愉快!

2

0 学习 · 6815 问题

查看课程