CSS入门——第三章

10 布局的三种机制

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

浮动:
    让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。

定位:
    将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。
    什么是浮动以及浮动的特点(float)（重要）
    概念：元素的浮动是指设置了浮动属性的元素会

11 浮动、清除浮动
理解浮动：

 在CSS布局中分为内联元素(display:inline)和块状元素(display:block)，块状元素默认会占据一行，可设置高度宽度以及边距，而内敛元素不会也不能设置。常见的内敛元素有：a、span、input、select，常见的块状元素有：h1-h6，p,div，ul，table。
 浮动元素是设置float为非none值的元素，这时该元素会自动被设置成块元素，可以设置宽度、高度以及边距。浮动元素，顾名思义，使该元素浮动在其他元素之上，离开了原来的文档流，直到浮动到父元素的左右边距（上下边距不受限制）或者左、右方遇到其他设置了float的元素。而其附近设置的浮动元素会跟其边距相邻，表面上跟内联元素似的。而非浮动元素则相对复杂一些，分一下两种情况：浮动元素后边的元素若是非浮动行内元素且因为定位产生重叠时，行内元素边框、背景和内容都在该浮动元素“之上”显示，若是非浮动块级元素跟在浮动元素后边且在定位后产生重叠时，该块级元素边框和背景在该浮动元素“之下”显示，只有内容在浮动元素不在非浮动元素的部分显示。

浮动的特征：

1. 浮动的元素脱离标准文档流
2. 浮动的元素相互贴靠
3. 浮动的元素具有“字围”现象
4. 浮动的元素会对后面的元素造成影响。

清除浮动影响：

语法：

  选择器 {clear: 属性值;}

12 定位模式

CSS的定位机制有3种：普通流、浮动和定位。

 相对定位, 即相对于元素在文档流中位置进行偏移. 但保留原占位。所以position:relative是很好的创建定位祖先元素的方法.,因为它不会离开常规流。使用这种方法，能够创建出既保持常规流又实现绝对定位的布局。相对定位自己通过定位跑开了还占用着原来的位置

 绝对定位, 即完全脱离文档流, 使元素相对于常规流的位置或最近定位祖先元素的位置偏移一定聚距离，即如果某一元素设置为定位元素后，那么它就成为了最近的绝对定位后代元素的定位参考点。如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据 body 对象左上角作为参考进行定位。绝对定位对象会让出自己原先占用位置.

 静态定位,  取消元素的定位设置，使之恢复为原先在常规流中的显示方式。static是position的默认值

固定定位,   即完全脱离文档流，使元素相对于视口偏移一定的距离。

堆叠顺序

   CSS使用z-index控制元素的堆叠顺序。Z-index只能工作在被明确定义了absolute，fixed或relative 这三个定位属性的元素中。静态定位元素安装文档出现顺序从后往前进行堆叠的。设定位置元素则忽略文档出现顺序，根据z-index值由小到大的顺序从后往前堆叠。设置为负值z-index的设定位置元素位于静态定位元素和非设定位置浮动元素之下。z-index值不必是连续的，其默认值是auto.

13 元素的显示与隐藏
display显示

display: none; 隐藏某个元素
特点：隐藏之后，不保留位置
display: block; 显示某个元素

visibility可见性

visibility: hidden; 隐藏某个元素
特点：隐藏之后，位置仍然保留
visibility: visible; 显示某个元素

overflow溢出隐藏

overflow: visible; 当文字内容超出盒子大小时依旧显示
overflow: hidden; 当文字内容超出盒子大小时，超出的部分直接隐藏
overflow: scroll; 当无论文字是否超出盒子大小都显示滚动条
overflow: auto; 文字内容没有超出盒子内容时没有滚动条，当超出时显示滚动条