如上图所示，一个标准的盒模型由四个部分组成：margin（外边距）、border（边框）、padding（内边距）、content（内容）。
margin控制盒子与盒子的间距，padding控制边框与内容的间距。
padding会改变盒子的大小，但不会改变内容的大小，因此在设置盒模型的大小时要考虑到padding的影响。
盒模型分为2种：标准盒模型、怪异盒模型。
盒模型会在DOCTYPE声明的时候默认标准盒模型，而没有DOCTYPE则会在ie6\7\8形成怪异盒模型。
标准盒模型的宽/高=width/height+padding+border
怪异盒模型的宽/高=width/height=内容的宽/高+padding+border，怪异盒模型的内容宽高会被padding和border占据。
(由于我理解的盒子宽高不包括margin，所以上面的计算中未加上margin)
那么，如何转换标准盒模型和怪异盒模型呢？
通过设置box-sizing：content-box/border-box；
content-box是转换标准盒模型，border-box是转换怪异盒模型。
前端第四天 目录： 盒模型之display 盒模型之overflow 盒模型之隐藏 盒模型之border 盒模型之...
如上图所示，一个标准的盒模型由四个部分组成：margin（外边距）、border（边框）、padding（内边距）...
一提及到HTML，大家都能想到盒模型。但是又有多少人完全理解它了？以下是我对于盒模型的理解： 1.盒模型本质是一个...
1：怎么理解盒模型 ？ 解： 标准模型 和 IE盒模型. 由外边距margin、内边距padding、边框bord...
如果文章对你有帮助，请点喜欢并关注，这将是我最大的动力。 1.理解盒模型 1.1什么是盒模型 如图： 1.2.盒模...
今天的课程中学习到了CSS的重要模型——盒模型。我来浅浅表述一下我对于盒模型的理解。盒子，顾名思义，就是用来装东西...
盒模型是CSS中很重要的一个概念。只有真正的理解好盒模型，才能正确的使用盒模型进行页面布局。在这篇文章中，我们将深...
盒模型是CSS中很重要的一个概念。只有真正的理解好盒模型，才能正确的使用盒模型进行页面布局。在这篇文章中，我们将深...
一、盒模型 盒子模型从独立盒子结构以及多盒之间的关系两方面理解 盒子模型概念 独立盒子模型由：内容、border、...
大家好，我是IT修真院的学员，一位正直纯洁善良的web前端程序员 今天给大家分享一下如何理解盒模型？ 1.背景介绍...
本文标题：盒模型之我的理解
本文链接：https://www.haomeiwen.com/subject/ccmnrxtx.html
网友评论