自验积累（2）-css

2. css

2.1 flex布局

• flex-direction：定义主轴方向（row | row-reverse | column | column-reverse | initial | inherit;）
• flex-wrap：定义 flex 容器是单行或者多行（nowrap | wrap | wrap-reverse | initial | inherit;）
• justify-content： 横向对齐方式（flex-start | flex-end | center | space-between | space-around | initial | inherit;）
• 纵向对齐方式：
  • align-content：只对多行 flex 容器中内容生效（stretch | center | flex-start | flex-end|space-between | space-around | initial | inherit;）
  • align-items：加在 flex 容器上，它规定的是 flex 容器中 item 在交叉轴中的对齐方式（stretch | center | flex-start | flex-end | baseline | initial|inherit;）
  • align-self：加在 flex 容器中的 item 上，覆盖了外部容器规定的 align-items 属性（auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;）

2.2 四种定位的区别

• static：默认值，没有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
• relative：相对定位，相对于自身原有位置进行偏移，仍处于标准文档流中。经过 top , bottom , left , right 的设置相对于其正常（原先自己）位置进行定位。可经过 z-index 进行层次分级。
• absolute：绝对定位，相对于 static 定位之外的第一个父元素进行定位。元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。可经过 z-index 进行层次分级。
• fixed：固定定位，相对于浏览器窗口进行定位。元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。可经过 z-index 进行层次分级。

relative 与 absolute 的主要区别：

• 首先，是上面已经提到过的在正常流中的位置存在与否。 其次，relative定位的层老是相对于其最近的父元素，不管其父元素是何种定位方式。以下图：

图中，红色背景层为relative定位，其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。

而若是红色背景层定位为absolute，则情形以下：

能够看到，红色背景层依然定义top:20px；left:20px；但其相对的元素变为定位方式为absolute或relative的黄色背景层。

所以，对于absolute定位的层老是相对于其最近的定义为absolute或relative的父层，而这个父层并不必定是其直接父层。若是其父层中都未定义absolute或relative，则其将相对body进行定位，如图：

除top、left、right、bottom定位外，margin属性值的定义也符合上述规则。

2.3 水平垂直居中

1. 第一种：

   #container{
       position:relative;
   }
   
   #center{
       width:100px;
       height:100px;
       position:absolute;
       top:50%;
       left:50%;
       transform: translate(-50%,-50%);
   }
   复制代码

2. 第二种：

   #container{ 
       display:flex; 
       justify-content:center; 
       align-items: center; 
   }
   复制代码

2.4 什么是文档流？

将窗体自上而下分红一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。       只有三种状况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。

2.5 z-index属性

z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，固然这是指同级元素间的堆叠，若是两个对象的此属 性具备一样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。 须要注意的是，父子关系是没法用 z-index 来设定上下关系的，必定是子级在上父级在下。