zweizhao.github.io

项目,文章,随笔,博客,Markdown,个人网站,人生感悟。

View on GitHub

盒模型要点知识

务必注意看,这可是前端面试 必定会遇到 的问题。


如果你确实明白了上述概念后,有如下图示与解说,详细说了具体的标签大小计算方式,这里注意,标签大小是指 物理像素大小,而不是上文说的 物理像素区域

所占大小就是实际的像素值,而所占区域是包含了margin外边距的。

图片描述

注意计算时候,padding和border可都是有四边的。 官方定义border-box是指把padding与border都算作宽高,理解上有歧义,所以你直接取值当做wh与padding与border最大值即可。


小建议

强烈推荐使用border-box来在实际中使用,实际工作或项目中,定制好padding与border后再去修改这两个值的可能性远远低于不改的可能性,所以能用border-box就用border-box吧,* {box-sizing: border-box;}可能是个好习惯。

否则UI丢你个80*80像素大小的样式,你自己就去拆分吧。


源码相关

CodePen

如果文章对你有一点帮助,我就非常开心了。 喜欢文章的话,请关注下我,定期发布技术相关文章,满满都是干货。