CSS盒模型及排版

1、CSS盒模型

css盒模型由四部分组成：margin、border、padding、content。
外边距+边框+内边距+内容。我们设置的width和height都是内容的大小，从而影响整个盒子的大小。

盒子的占位大小包括margin，但盒子的尺寸不包括margin。比如
盒子的高度： border-width + padding-top +height+ padding-bottom；

2、盒子的CSS排版模型

CSS规范给出了三种排版模型:普通流排版、浮动排版和定位排版。

1、普通流排版

块级元素：单独一行，宽度自动填满父元素宽度。能设置宽高和内外边距；
行内元素: 不能设置width、height、margin-bottom、margin-top；
是指各种页面元素默认的排列规则，即块级元素和行内元素按照各自的规则从左至右从上往下排列。块级和行内可通过display相互转换

问题1：盒子垂直外边距的合并

主要针对普通流排版，指的是两个或者多个普通流块级元素在垂直外边距相遇时，合并成一个外边距。
主要由两种情况：

a、相邻元素外边距合并

● margin-bottom和margin-top如果均为正值，那么合并的外边距就是两者的最大值——这种现象称为margin的‘塌陷’。注意并不是外边距相加
● 如果存在负值，则相邻元素在垂直方向上存在重叠，重叠深度等于外边距和的绝对值。当和为0时，两个块级元素无缝连接。

b、 包含（父子）元素外边距合并

当div1包含div2时，形成父子关系，也称嵌套关系。
父子元素的外边距将合并，取值最大的外边距，并将其作为父元素的上外边距，子元素的上外边距为0.
解决办法：
要防止外边距的合并，可通过对父元素设置padding-top属性。

问题2：相邻盒子之间的水平间距

只有行内元素和浮动排版才考虑，就正常由margin-left和margin-right相加即可。

2、浮动排版

浮动设置：

float：left、right、none；
向同一方向浮动形成流式布局，排满一行自动换行。

浮动排版带来的问题：

• 字体会围绕浮动元素，不想出现这种情况要对包含字体的元素（例如<p>）清除浮动元素的影响。
• 父元素中所有子元素都浮动的话，父元素不能根据子元素自适应高度，收缩成高度=内边距+上下边框

浮动清除：

clear：left、right、both、none（默认值），clear定义了元素左右两边是否允许出现浮动元素。如果设置left，那么会使元素的上外边框边界刚好在左边浮动元素的下外边距之下。

上面两个问题的解决：

1. 解决文字环绕：设置clear：both，这是清除p左右两侧的浮动元素

2. 解决高度自适应：

   • 在最后增加一个空的div，并设置clear：both；

   • after伪类清除，为父元素设置类clearfix

     .clearfix :after{
     content:"";
     display:block;
     clear:both;
     zoom:1;    //兼容ie6/7 清除浮动设置。
     }

     
     

3、定位排版

定位排版常用属性：

1、postion：static、fixed、absolute、relative；

• 重点： absolute和relative的区别
  absolute是绝对定位，一个元素可以放在页面上的任何位置。绝对定位的元素的位置相对于最近的已定位（一般设置成position: relative）父元素，如果元素没有已定位的父元素，那么它的位置相对于，absolute
  定位使元素的位置与文档流无关，因此不占据空间。

• relative是相较于其正常所在位置，变化后它原来占据的位置不变。
  

2、偏移：left、right、top、bottom；

3、overflow：

visible(内容溢出显示)
hidden（超出部分内容隐藏）
auto（溢出显示滚动条）
scroll（不管是否溢出都显示滚动条）
inherent（继承父元素的overflow值）

4、z-index： 设置堆叠顺序，值越大越在上层。