关于前端的碎碎念2-CSS装修之盒子模型

CSS，层叠样式表——（Cascading Style Sheets），是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

CSS看似比较繁杂，其实只要掌握了CSS中的盒子模型、定位、以及页面布局，就基本上掌握了大半啦~这时我们就已经能够对网页中各个元素进行精准的排版，做出符合我们意愿的网页啦！

关于CSS的各种属性，我们还是可以参考学习HTML那样。可以说CSS的属性几乎完全是语义化的。我们需要改变边框，那就是“border”，那我们需要右侧边框做一些改变，那就是“border-right”。很明显，接下来按照我们的需求还有“右边框的宽度——border-right-with”，”右边框颜色——border-right-color”等等等，诸如此类~

完全就是我们需要什么，只要凭着需求去寻找。~follow me~

盒模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式

CSS盒模型是一种样式HTML元素的方式。每个HTML元素都是带有边框，边距，填充和内容的矩形框。

以下代码显示了元素中每个部分的布局。最外边是边距，然后是元素边界，之后是填充，内容是核心和内部最多。

盒子模型有两种：W3C标准模型和IE盒子模型（也叫做怪异模型）

标准模式：通常在非IE低浏览器中。计算方法：占的空间的宽度=内容的宽度＋左右内边距的宽度＋左右边框的宽度＋左右外边 距的宽度（margin + padding+ border+ content）  

模型包括margin、border、padding、content ，元素的width=content的宽度

怪异模式：怪异模式是指在IE6及更早的IE版本下盒模型的计算方 法：所占空间总宽度=内容＋外边距（ content＋margin）

元素的width=content+padding+border

他们之间的相同点和不同点其实也很容易看得出来：

　　相同点：都是由margin ,border,padding,content组成

　　不同点：计算宽/高度方法的不同，标准模式下盒子的总宽度是由margin,padding,border,content的相加得来；怪异模式下：总宽度是由content减去padding、border得来的。

      我个人认为W3C定义盒子模型与IE定义的盒子模型，IE定义的比较合理，元素的宽度应该包含border（边框）和padding（填充），这个和我们现实生活的盒子是一样的，W3C也认识到自己的问题了，所以在CSS3中新增了一个样式box-sizing，包含两个属性content-box 和 border-box。

（1） content-box  元素的width=content+padding+border

（2） border-box   元素的width=width（用样式指定的宽度）

最终效果如下：

如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。

上面的图可以看到margin相邻元素值有重叠  发生外边距重叠有两个要件：⑴必须是相邻的；    ⑵垂直方向上的

1.对于行级元素，margin-top和margin-bottom对于上下元素无效，margin-left和margin-right有效

2.对于相邻的块级元素margin-bottom和margin-top 取值方式

 1） 都是正数： 取最大值

   距离=Math.max(margin-botton,margin-top)

 2） 都是负数： 取最小值

   距离=Math.min(margin-botton,margin-top)

 3）上面是正数，下面是负数或者 上面是负数，下面是正数： 正负相加

   距离=margin-botton+margin-top

注意：如果一个无内容的空元素，其自身上下边距也会产生重叠。

margin:20px; float:left;

margin:20px; clear:both;

单个方块重叠的解决方法：1.浮动。在IE浏览器下（IE8未测过），浮动可以解决margin-top以及margin-bottom重叠的问题。而在Firefox火狐浏览器或是chrome谷歌浏览器下以及opera浏览器下，浮动只能解决同方向上的margin重叠问题。不同方向上的margin重叠的问题依旧存在。

margin:20px; 父标签overflow:hidden; zoom:1;

margin:20px; 父标签overflow:hidden; zoom:1;

同方向margin重叠的解决方法：1.与清除浮动的方法一致，给外部的box添加清除浮动相同的样式即可。常用的样式代码为：overflow:hidden; zoom:1;但是有问题的是，在IE浏览器下（未测试IE8），应用zoom属性后，似乎发生了水平方向上margin失效的情况。其他表现均一致。

margin:20px; 父标签padding:1px;

margin:20px; 父标签padding:1px;

同方向margin重叠的解决方法：2.增加些边缘属性。例如padding值，padding:1px;或是border属性，border:1px solid #cacbcc。此方法在非IE浏览器下效果良好，但是在IE浏览器下，表现很糟糕。

外边距重叠的意义

外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。

防止外边距重叠解决方案：
虽然外边距的重叠有其一定的意义，但有时候我们在设计上却不想让元素之间产生重叠，那么可以有如下几个建议可供参考：

1. 外层元素padding代替

2. 内层元素透明边框 border:1px solid transparent;

3. 内层元素绝对定位 postion:absolute:

4. 外层元素 overflow:hidden;

5. 内层元素 加float:left;或display:inline-block;

6. 内层元素padding:1px;

以上建议可根据实际情况来采取。

曾经一度认为是浏览器BUG，汗颜！