Web前端开发工程师知识体系_17_CSS

Posted 2021-09-12 小马学前端

一、浮动和文档流

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的值，在同一个层叠上下文领域，层叠水平值大的覆盖小的；
        - 后来的在上：当元素的层叠水平一致时，在文档流中处于后面的元素会覆盖前面元素。