CSS 布局的三种机制

CSS布局的三种机制

CSS提供了3中机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：

1. 普通流（标准流）
   ◾ 块级元素独占一行，从上向下顺序排列（比如：div、p、h1~h6、ul、ol、from、table）；
   ◾ 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行（比如：如：span、a、i、em等）。

2. 浮动
   ◾ 概念：
   元素的浮动是指设置了浮动属性的元素会浮起来，脱离标准流的控制，移动到指定位置。
   ◾ 作用：
   可以让多个盒子水平排列成一行，使得浮动称为布局最重要的手段，也可以实现盒子的左右对齐等。
   ◾ 语法：

选择器 {
	float: none | left | right;/*不浮动（默认值） 左浮动 有浮动*/ 
}

注意:

• 浮动的元素，会把自己原来的位置让给下面标准流的其他元素，就是不再占有原来的盒子，脱离标准流的。

• float属性会改变元素的display属性。任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素，生成的块级框和行内块极其相似。

• 浮动元素默认之间没有缝隙，与行内块是有区别的。

• 浮动的元素会相互贴靠在一起，如果父级宽度装不下这些浮动的元素，多出的元素会另起一行对齐。

• 浮动的元素与父盒子的关系：子盒子的浮动参照父盒子对齐、不会与父盒子的边框重叠、也不会超过父盒子的内边距

• 浮动元素与兄弟盒子的关系：在一个父级盒子中，如果当前盒子是浮动的，那么当前盒子会与前一个盒子的顶部对齐；如果前一个兄弟盒子是普通流，那么当前盒子会显示在前一个兄弟盒子的下方

3. 定位
   将盒子固定在浏览器的某一个位置。

   定位详解

    定位也是用来布局，它有两部分组成：定位 = 定位模式 + 边偏移
   

   1). 边偏移：简单来说，我们定义盒子是通过边偏移来移动位置的。在CSS3中，通过top、bottom、left、right 属性定义元素的边偏移：方位名词
   2). 定位模式：在CSS3中。通过position 属性定义元素的定位模式，语法如下：

    	选择器 {
    		position: 属性值；
    	}
   

   定位模式是有不同的分类的，再不同的情况下，我们选着用不同的定位模式来解决问题。

   （1）静态定位（static）：元素默认的定位方式，无定位的意思。按照标准流特性摆放位置，他没有边偏移，在布局时几乎不用。
   （2）相对定位（relative）：相对定位是相对于它原来在标准流中的位置来说的。
   
   注意：相对定位后，原来在标准流的区域继续占有，后面的盒子仍以标准流的方式对待他。
   （3） 绝对定位（absolute）：绝对定位是元素以带有定位的父级元素（或者祖先）来移动位置的。
   
   注意：

• 绝对定位的盒子完全脱离标准流，不占有位置。

• 子绝父相：子元素不占有位置，用绝对定位；父元素占据位置，不能影响后面元素的正常显示，使用相对定位。

  （4） 固定定位（fixed）：固定定位与父级元素无关，以浏览器可视窗口为准，不随滚动条滚动。固定定位的元素也不占位置。