Web前端开发工程师知识体系_17_CSS（五）_前端小马的进阶之路~

irpas 02-07 7493

一、浮动和文档流

1.默认文档流

????????流就是文档布局的自身特性,而定位机制可能就会打破原有流的特性；默认文档流有内联元素（从左向右排列）、块级元素（从上向下排列）。

2.脱离文档流

????????文档一旦脱离文档流，就不再受文档流布局约束，在算其父元素高度时不包括自身；

????????以下情形会导致元素脱离文档流：float 浮动、position 定位(绝对定位、固定定位)。

3.浮动

????????子元素在父元素中浮动时，会使其脱离文档流，导致父元素失去管理能力。属性： ????????float：none ?默认不浮动 ????????float：left ?左浮动 ????????float：right ?右浮动

（1）浮动的特点

????????· 元素浮动后不再撑起父级的高度 ????????· 元素浮动后可以在父元素的左侧或右侧排列 ????????· 元素浮动后不再自占一行 ????????· 元素浮动后会对后面的文档流中的兄弟元素产生影响，会遮盖其后的兄弟元素 ????????· 内联元素浮动后，自动变成块级元素 ????????· 元素浮动后虽不在撑起父级的高度，但仍受父级影响，还在父级范围内 ????????· 父元素内所有元素均浮动，元素们宽度相加大于父元素宽度时，会自动换行 ????????· 元素浮动后不自占一行，会向前占位，前方空值位置属自己所有，后方的元素换行时，不能占据 ????????· 元素浮动时，原则会盖住其后方文档流中的兄弟元素，但文字、图片等（行内元素和行内块）不会被盖住 ????????· 文字不会被盖住而是环绕浮动元素四周显示。

2.清除浮动

? ? ? ? 元素在父元素中浮动时，会导致父元素的高度坍塌（无高度）、元素布局错位，页面产生混乱、文字环绕，图片环绕等；清除浮动可以使块级元素横向布局，因为块级元素的默认排列是垂直方向的、而且还会变化文档流布局的方向，可以更加多样化。

????????需要注意的是清除浮动并不是去除浮动，而是将浮动带来的负面效果解决掉。

? ? ? ? 通常写完浮动之后，最好马上找到父元素做清除浮动处理 ?overflow: hidden; ?防止布局错位。

二、定位

1.position属性

????????position属性是定位属性，用于指定一个元素在文档中的定位方式，top、right、bottom、left属性值决定了该元素的距离四边的位置，可以为负值。常用取值：relative 相对定位、absolute 绝对定位、fixed ?固定定位。

2.相对定位 -?position: relative;

????????相对定位不会脱离文档流，可使用top、right、bottom、left做偏移，元素相对的位置是自己本来的位置，移动不改变页面布局；相对定位属性不会影响周围的布局，但会出现新的层叠顺序。

.box img { position: relative; bottom: 130px; right: -150px; }

当四个方向值发生重合时，以top和left为优先。

3.绝对定位 -?position: absolute;

????????元素会脱离文档流，其他元素不为该元素预留空间，可使用top、right、bottom、left做偏移，绝对定位的元素可以设置外边距，且不会与其他边距合并。

????????让子元素在父元素内绝对定位时，先为父元素设置相对定位属性 position: relative;，然后本身进行绝对定位 position: absolute；

eg：使用绝对定位让子元素在父元素中水平垂直居中

.baba { width: 100%; height: 300px; position: relative; } .baba div { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; }

4.固定定位 -?position: fixed;?（它的父级始终是html）

????????元素会脱离文档流，但不用找父级；固定定位参照的是浏览器窗口，可使用top、right、bottom、left做偏移。

5.z-index -?层叠顺序

????????该属性必须在元素有定位属性(相对或绝对)的前提下指定，没有定位的元素指定z-index无效。取值直接设置没有单位的整数，可以为负值，值越大层级越高。

.d1 { background-color: red; position: relative; z-index: 1; }

层叠领域的准则： ????????- 值大的在上：z-index的值，在同一个层叠上下文领域，层叠水平值大的覆盖小的； ????????- 后来的在上：当元素的层叠水平一致时，在文档流中处于后面的元素会覆盖前面元素。