css篇 -- （一）盒模型

查阅了一些资料，总结了一下盒模型的知识；
首先呢，盒模型是css样式表控制页面的一个很重要的概念，理解了盒模型的概念和每个元素的用法，才能熟练的掌握css中的定位方法和技巧；

所谓盒模型，即页面的所有元素都可以看成一个盒子，每个盒子将占据一定的页面空间，而占据的空间不仅仅是显示出来的内容那一小部分，还包括盒子的margin、border和padding，展示的内容通常为content部分，而border部分在你设置了样式之后也会显示出来

上图是在网上找到的盒模型示意图

关于margin、border、padding的属性设置请去x鸟教程、x3c查阅学习；

本地的盒模型示意图，你可以在浏览器中打开开发者工具（F12），element部分的右侧会显示元素的style，无论显示的是那一部分的style，滚动条拉到底部都会显示出一个盒模型的示意图；如下图所示：

本篇要说的是盒模型的两种不同的定义：标准盒模型 和 IE盒模型

标准盒模型

标准盒模型定义时的width、height所定义的简单来说就是定义了上图内容中的content部分的宽、高；当定义了你的盒子宽、高后你所定义的padding、border、margin部分的宽高则会累加在content的宽高上，最终显示出上图所示的整个盒子元素的总体宽高是上述四个属性的和；

IE盒模型

IE盒模型，也称怪异盒模型，它定义时的盒子的width、height与标准盒模型所不同的是它定义的是border框起来的部分的宽、高，当你定义好盒模型的宽高属性后，再定义padding属性时会向内挤压content部分，倒置最终content这一部分内容的显示可能无法达到你预期的效果，而最终显示出整个盒子元素的总体的宽是width + margin（left、right），高则是height + margin（top、bottom）；

盒模型的切换

切换盒模型，即定义盒模型的相关属性box-sizing

box-sizing：content-box； // 标准盒模型

box-sizing：border-box； // IE盒模型

总结：

总的来说两种盒模型各有长处，每个人可能会有不同的使用习惯，只要掌握了习惯使用的盒子模型的属性，敲代码时也是得心应手的；

强调一点：盒模型拥有上文中所述的四种属性，换个方法说就是图一显示的整体是一个盒模型，而两种盒模型的宽高属性定义的是content（标准） / border（IE）（border + padding + content）的宽高，请勿将盒模型的宽高与盒模型宽高属性定义的宽高所混淆

文章部分素材来源于：https://blog.csdn.net/zwkkkk1/article/details/79678177 这位老哥，大家乐意去看的话也可以去看看