CSS3盒模型
CSS有一种基础设计模式叫盒模型， 定义了Web页面中的元素是如何看做盒子来解析的。 每一个盒子有不同的展示界面， 在 CSS 中 主要有以下几种盒模型： inline、inline- block、block、table、absolute，position、float。 浏览器把每个元素看 一个盒模型， 每一个盒模型是由以下几个属性组合所决定的： display、position、float、width、height、margin、padding和border等， 不同类型的盒模型会产生不同的布局。
什么是盒模型？
CSS中每一个元素都是一个盒模型，包括HTML和body标签元素。在平时设计中，大家对content、padding、margin、background和border来说一定不会陌生了， 因为盒模型都具备这些属性。 其中width、height、border、background、padding和margin之间的层次关系和相互影响，可以 看出 padding、content、 background-image、background-color，它们四者构成了Z轴（ 垂直屏幕的坐标） 多重层叠关系。 但是border与margin、padding三者之间应该是平面上 的并级关系，并不能构成Z轴的层叠关系。
在CSS中盒模型被分为两种：第 一种 是 W3C 的 标准 模型。另一种 是 IE 的 传统 模型。
它们相同之处都是对元素计算尺寸的模型，具体说就是对元素的width、height、padding和border以及元素实际尺寸的计算关系，不同之处是两者的计算方法 不一致。
1. W3C的标准盒模型。
http:/ /www.iis7.com/b/wzjk/
外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋内距＋边框＋外距
element空间宽度＝内容宽度＋内距＋边框＋外距内盒尺寸计算（ 元素大小）
element高度＝内容高度＋内距＋边框（height为内容高度）
element 宽度＝内容宽度＋内距＋边框（width为内容宽度）
2. IE传统下盒模型（ IE6以下，不包含IE6版本或QuirksMode下IE5.5+）
外盒尺寸计算（ 元素空间尺寸）
element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距）
element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）
内盒尺寸计算（ 元素 大小）
element高度＝内容高度（ height 包含了元素内容宽度、边框、内距）
element宽度＝内容宽度（ width包含了元素内容宽度、边框、内距）
为了解决这种问题， CSS3增添 了 一个盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式，box- sizing 的 属性 值 主要 有 以下 三个：
1· content-box： 默认值， 让元素维持W3C的标准盒模型。元素的宽度和高度（ width/ height） 等于元素边框宽度（ border） 加上元素内距（ padding） 加上元素内容宽度或高度（ content width/ height），也就是 element width/ height=border+padding+content width/ height。
2· border-box： 此值会重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（ IE6以下版本和IE6～7怪异模式）。元素的宽度或高度等于元素 内容的宽度或高度。 从盒模型介绍可知， 这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（ 此处的内容宽度或高度＝盒子的宽度或 高度-边框-内距）。
3· inherit：此值使元素继承父元素的盒模型模式。 box-sizing属性主要用来控制元素的盒模型的解析模式， 其主要目的是控制元素的总宽度。 在W3C规范中， 元素的box-sizing默认属性值是content-box 值， 如果不显式重置box-sizing属性值为border-box， 才能明确对元素设置一个总宽度。在这种情况之下会使 页面布局更加方便。
最后
为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈：866109386.欢迎大家进群交流讨论，学习交流，共同进步。
当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。
但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终浪费大量时间，所以有有效资源还是很有必要的。
最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们，祝福大家在往后的工作与面试中一切顺利。
网友评论