CSS基础

position 定位

简记：默认是static定位，static按照代码顺序定位，此时top，left属性无效。relative定位是相对于static默认位置的定位。absolute相对于父元素定位，但是父元素不能是static定位。

position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。

• static
• relative
• fixed
• absolute
• sticky

下面主要介绍前四个常用的值。

static 属性值

static是position属性的默认值。

这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。

注意，static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right这四个属性无效。

relative，absolute，fixed属性值

relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。

relative 属性值

relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置，不会影响正常的页面文档流。

它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。

div {
  position: relative;
  top: 20px;
}

absolute 属性值

absolute表示，相对于父元素进行偏移，即定位基点是父元素。但是父元素不能是static定位。
absolute定位会把元素移出正常的文档流。

它有一个重要的限制条件：父元素一般不能是static定位，否则定位基点就会变成整个网页的根元素html。一般我们会将父元素的定位设置为relative。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。

/*
  HTML 代码如下
  <div id="father">
    <div id="son"></div>
  </div>
*/

#father {
  positon: relative;
}
#son {
  position: absolute;
  top: 20px;
}

注意，absolute定位的元素会被"正常页面流"忽略，即在"正常页面流"中，该元素所占空间为零，周边元素不受影响。

fixed 属性值

fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。

它如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。

Flex布局

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），它的所有子元素自动成为容器成员，称为 Flex 项目。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器的属性

flex-direction
flex-wrap
justify-content
align-items

flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）。

flex-direction: row（默认） | row-reverse | column | column-reverse;

flex-wrap

flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-wrap: nowrap | wrap | wrap-reverse;

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

justify-content

justify-content属性定义了项目在主轴上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items

align-items属性定义项目在交叉轴上如何对齐。

align-items: flex-start | flex-end | center | baseline | stretch;

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

z-index属性

如果父 div 元素设置了 z-index:100 属性，
子 div 元素的行为将取决于其自身的 z-index 值和定位方式。

子 div 元素没有显式设置 z-index：

如果子 div 元素没有设置 position 属性，或者设置为 static，则子元素的层叠顺序将继承自父元素，并且父元素的 z-index 值（100）将影响子元素。
如果子 div 元素设置了其他定位方式（如 relative、absolute、fixed），则子元素的层叠顺序将相对于同级元素进行决定，而不受父元素的 z-index 影响。

子 div 元素显式设置了 z-index：

如果子 div 元素设置了比父元素更高的 z-index 值，则子元素将覆盖在父元素之上，无论父元素的 z-index 值如何。
如果子 div 元素设置了比父元素较低或相同的 z-index 值，则会根据它们在 DOM 中的位置决定层叠顺序。
总结：父 div 设置 z-index: 100 会影响子 div 元素的层叠顺序，但最终的层叠顺序还会受到子元素自身的 z-index 和定位方式的影响。如果子元素没有显式设置 z-index，则父元素的 z-index 值将起作用。

长度单位

CSS 中，一般有两种用于长度和尺寸的单位：绝对单位和相对单位。

绝对单位

绝对长度单位是基于一个实际的物理单位，通常被认为是跨设备的相同尺寸。
下面是 CSS 中一些常见的绝对长度单位：
px:像素，是 CSS 中最常见的长度单位之一。
在 CSS 中，1 像素被正式定义为 1/96 英寸。所有其他的绝对长度单位都是基于这个像素的定义。

相对单位

相对长度单位是相对于另一个元素的大小或设置。例如，一个元素的相对字体大小可以用父元素的字体大小来计算。
下面是一些常见的相对长度单位：

em

多用于字体大小，CSS 的 em 单位的名字来自于一个排版单位。在字体排印学中，em 这个词“最初是指所使用的字体和尺寸中大写字母 M 的宽度”。
当与 font-size 属性一起使用时，em 继承其父元素的 font-size 大小：

.container {
  font-size: 16px;
}

.container p {
  font-size: 1em;
}

.container h2 {
  font-size: 3em;
}

.container h3 {
  font-size: 2em;
}

在这个例子中，p 的 font-size 是 16px（16 * 1）。同时，h2 的 font-size 为 48px（16 * 3），h3 为 32px（16 * 2）。
如果 em 与另一个属性（如 width）一起使用，em 是用目标元素的大小来计算的，也是由字体大小计算宽度。

rem

根 em。这种相对单位不受父元素的大小或设置的影响，而是以文档的根为基础。对于网站来说，文档的根是 html 元素。

p {
  font-size: 1.25rem;
}

在大多数浏览器中，默认的字体大小是 16，所以 html 元素的 font-size 是 16px。所以在这种情况下，p 是 20px（16 * 1.25）。

%

百分比，或相对于父级大小的百分比大小：

div {
  width: 400px;
}

div p {
  width: 75%;
}

由于父级的宽度是 400px，所以内部段落的宽度是 300px（400 * .75）。

vw和vh

当你使用 vw 和 vh 单位设置元素的大小时，元素的大小会随着浏览器窗口的缩放而变化。

vw
视图宽度，1vw 是视口宽度的 1%。视口指的是浏览器窗口或设备的可见区域。
比如说：

body {
  width: 100vw;
}

由于 body 元素被设置为 100vw，即视口宽度的 100%，所以它将占用它所能获得的全部宽度。因此，如果你把浏览器的大小调整为 690 像素宽，那么 body 就会占据所有 690 像素的宽度。

vh
视图高度，1vh 是视口高度的 1%。
例如：

div {
  height: 50vh;
}

该 div 将填充视口高度的 50%。因此，如果浏览器窗口的高度是 900 像素，那么该 div 的高度将是 450 像素。