前端基础之布局总结（一）

布局

- 浮动

• 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

• 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

1. 使用float来设置元素浮动
   a. float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

2. 可选值
   默认值：
   none：元素不浮动，并会显示在其在文本中出现的位置。
   可能的值：
   left ： 元素向左浮动。
   right ： 元素向右浮动。
   inherit ： 规定应该从父元素继承 float 属性的值。

3. 特点
   1.元素浮动以后会完全脱离文档流
   2.浮动以后元素会一直向父元素的最上方移动
   3.直到遇到父元素的边框或者其他的浮动元素，会停止移动
   4.如果浮动元素的上边是一个块元素，则浮动元素不会覆盖块元素
   5.浮动元素不会超过他上边的浮动的兄弟元素，最多一边齐
   6.浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，可以通过浮动来实现文字环绕的效果
   例子：
   
   要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

4. 浮动以后元素的特点
   a. 元素浮动以后，会使其完全脱离文档流。
   b.块元素脱离文档流以后:
   1.不会独占一行
   2.宽度和高度都被内容撑开
   c.内联元素脱离文档流以后会变成块元素

5. 高度塌陷
   父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。
   父元素的高度一旦塌陷所有元素的位置将会上移，导致整个页面的布局混乱。
   解决方法：
   1.方法一：
   开启父元素的BFC或hasLayout:
   BFC:是元素的隐含属性，默认是在关闭状态的
   可以通过一些特殊的样式，来开启BFC(Block Formatting Context:块级格式化环境)
   开启BFC以后元素将会具有如下特性：
   1、父元素的垂直外边距不会与子元素重叠
   2、开启BFC的元素不会被浮动元素所覆盖
   3、开启BFC的元素可以包含浮动子元素
   开启BFC的方式:
   1.设置元素浮动
   2.设置元素绝对定位
   3.设置元素的类型为inline-block
   4.设置overflow为一个非默认值(一般都是使用overflow:hidden来开启BFC)
   hasLayout:在IE6中没有BFC，但是有一个和BFC类似的hasLayout
   在IE6中可以通过开启hasLayout来解决高度塌陷的问题
   副作用最小的开启方式:
   zoom:1
   当为元素设置宽度非默认值时，会自动开启hasLayout
   2.方法二
   在塌陷的父元素的最后添加一个空白的div，然后对该div进行清除浮动
   <div class=“box1”>
   <div class=“box2”></div>

   <div style=“clear:both”></div>
   </div>
   使用这种方式会在页面中添加多余的结构
   3.方法三（常用方法）
   使用after伪类，向父元素后添加一个块元素，并对其清除浮动
   .clearfix:after{
   content:"";
   display:block;
   clear:both;
   }
   .clearfix{
   zoom:1;
   }
   该种方式的原理和方法二原理一样，但是不用向页面中添加对于的结构

- 定位

• 通过定位可以将页面中的元素，摆放到页面的任意位置
• 使用position来设置元素的定位
• 可选值：
  1.static：（默认）元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
  2.relative：（相对定位）元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
  3.absolute：（绝对定位）元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
  4.fixed：（固定定位）元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

相对定位：

1.开启元素的相对定位后，如果不设置偏移量元素不会发生任何变化
2.相对定位元素相对于其自身在文档流中的位置来定位
3.相对定位的元素不会脱离文档流
4.相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素
5.相对定位的元素会提升一个层级
例子：

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位：

• 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
  1.元素设置绝对定位以后，如果不设置偏移量，元素的位置不会发生变化
  2.绝对定位的元素是相对于距离他最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没开启定位，则相对于浏览器窗口进行定位。
  3.绝对定位的元素会完全脱离文档流
  4.绝对定位会改变元素的性质。内联变块，块的高度和宽度都被内容撑开，并且不独占一行
  5.绝对定位会使元素提升一个层级
  例子：
  
  绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

固定定位：

1.固定定位是一种特殊的绝对定位，它的特点大部分都和绝对定位一样
2.不同的是，固定定位的元素永远都是相对于浏览器窗口进行定位的。并且他不会随滚动条滚动
3.IE6不支持固定定位

层级：

1.定位元素 > 浮动元素 > 文档流中的元素
2.当元素开启了定位以后，可以通过z-index来设置元素的层级
3.z-index值越高元素越优先显示
4.如果z-index值一样，或者都没有z-index则优先显示下边的元素
5.父元素永远不会盖住子元素
6.z-index的默认值是0，取值越大元素的层叠顺序约靠上如果同样的值则根据文档顺序，后来者居上值之能是数值，不能加单位

偏移量：

当元素开启了定位以后，可以通过偏移量来设置元素的位置
top：顶部偏移量，定义元素先对于父元素上边线的距离
bottom：底部偏移量，定义元素先对于父元素下边线的距离
left：左部偏移量，定义元素先对于父元素左边线的距离
right：右部偏移量，定义元素先对于父元素右边线的距离
一般情况下，只使用两个值即可定义一个元素的位置。