首页 > 其他 > 详细

有关盒模型的一点笔记

时间:2019-04-11 19:39:30      阅读:88      评论:0      收藏:0      [点我收藏+]

默认盒模型——content-box

默认盒模型下,width和height指的就是内容区块的长宽。

盒子的总宽度 = width + 内边距 + 边框 + 外边距

默认的盒子模型的缺点是设置宽高不直观,因为设置的宽高是内容而不是整个盒子的宽度,所以经常会出现问题。

边框盒模型—— border-box

边框盒模型下,设置的width和heigth将会包含内边距和边框

此时盒子的总宽度 = width + 外边距

设置这种盒模型的优点就是更直观了,当我们需要增加边框或者内边距时会包含在width之中!只要在外边距不变的情况下,可以对边框、内边距、内容宽度进行随意修改【设置的宽度需要小于width】。

有关盒模型的一点笔记

原文:https://www.cnblogs.com/wljqds/p/10691605.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!