温故知新之（四）页面布局之浮动、定位及元素的隐藏与显示

页面布局

• 传统网页布局的三种方式
  • 普通流（标准流）标签按照规定好默认方式排列，即块级元素会独占一行，从上向下顺序排列；行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
  • 浮动 多个块级盒子(div)水平排列成一行
  • 定位

页面布局准则

• 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
  • 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
• 先设置盒子大小，之后设置盒子的位置

浮动

• 浮动的典型应用：让多个块级元素一行内排列显示。通过display:inile-block将块元素转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙
• float: left | right | none;
• 设置了浮动（float）的元素的最重要的特性：
  • 脱标：浮动元素会脱离标准流。
    • 浮动的盒子不再保留原先的位置；
  • 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列；
    • 浮动的元素是相互贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
  • 浮动元素会具有行内块元素特性
    • 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后都具有行内块元素相似的特性。 - 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定 - 如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度 - 浮动的盒子中间是没有缝隙的，是紧挨着一起的

      一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动
      浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动

• 为什么要清除浮动?
  • 当父级盒子不方便给高度时，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。
  • 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
• 清除浮动的本质
  • 清除浮动的本质是清除浮动元素造成的影响
  • 如果父盒子本身有高度，则不需要清除浮动
  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。
• 清除浮动的策略是：闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。
• clear: left | right | both;
  • 实际开发中，几乎只用 clear:both,同时清除左右两侧浮动的影响。

清除浮动的方法

• 额外标签法，W3C 推荐的做法
  • 在浮动元素末尾添加一个空的标签，如<div style="clear:both"></div>
  • 要求这个新的空标签必须是块级元素
• 父级添加 overflow 属性
  • 给父级添加 overflow 属性，将其属性值设置为 hidden,auto 或 scroll
• after 伪元素法
  • 百度、淘宝、网易等的做法

.clearfix:after { 
	content: ""; 
	dispaly: block;
	 height: 0; 
	 clear: both;
	visibility: hidden; 
} 
.clearfix { 
/* IE6,7专有*/ 
	*zoom : 1; 
}

• 双伪元素
  • 代表网站：小米、腾讯等

 .clearfix:before,.clearfix:after{ 
	content:""; 
	display:table;
} 
.clearfix:after {
	clear:both; 
}
 .clearfix { 
 	*zoom:1;
}

定位

• 将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

• 定位的组成：定位 = 定位模式 +边偏移

  • 模式：position: static | relative | absolute | fixed;
    • static 静态定位,无定位
    • relative 相对定位,相对于它原来的位置来说的

      原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待。即相对定位并没有脱标，它最典型的应用是给绝对定位当爹的。

    • absolute 绝对定位,相对于它的父级元素来说的

      绝对定位不再占用原先的位置（脱标）,绝对定位是脱离标准流的

    • fixed 固定定位，相对于固定于浏览器的可视区的位置

      固定定位也是脱标的。跟父元素没有任何关系,不随滚动条滚动,不再占有原先的位置

    • sticky 粘性定位，跟页面滚动搭配使用。 兼容性较差，IE 不支持，很少使用。
  • 边偏移：定位的盒子移动到最终位置
    • top、right、bottom、left 的像素值或百分比

• 定位叠放次序

  • 定位布局可能会出现盒子重叠，用 z-index 来控制盒子的前后次序(z 轴)
  • z-index: 1;

    只有定位的盒子才有 z-index 属性

• 定位注意事项：

  • 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
  • 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
  • 浮动元素、绝对定位(固定定位)元素都不会触发外边距合并的问题
  • 绝对定位（固定定位） 会压住下面标准流所有的内容，而浮动元素只会压住它下面标准流的盒子，不会压住下面标准流盒子里面的文字。

• 采用绝对定位让盒子居中

  .box {
    position: absolute;
    /* 1.left走50%，父容器宽度的一半 */
    left: 50%;
    /* 2.margin 负值往左边走 自己盒子宽度的一半 */
    margin-left: -xx;
}

元素的隐藏与显示

• display: none | block;
  • display: block;, 除了转换为块级元素之外，同时还有显示元素的意思

  display隐藏元素后，不再占有原来的位置

• visibility: hidden | visible;,指定一个元素应可见还是隐藏
  • visibility 隐藏元素后，继续占有原来的位置
• overflow: visible | hidden | scroll | auto;
  • visible 不剪切内容也不添加滚动条
  • hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
  • scroll 不管超出内容否，总是显示滚动条
  • auto 超出自动显示滚动条，不超出不显示滚动条

  如果有定位的盒子， 请慎用 overflow:hidden 因为它会隐藏多余的部分