CSS -- 基础复习

CSS基础

1. CSS中的样式优先级

!important > 内联 > ID > Class|属性|伪类 > 元素选择器

2. CSS中的选择器

[attr=value]属性选择器: 使用特定的属性值来匹配和设置元素样式；

3. CSS中的绝对单位和相对单位

3.1 绝对单位：

px: px就是固定的像素,一旦设置无法因为适应页面而改变

3.2 相对单位：

em和rem更具有灵活性，他们是相对长度单位，长度不是固定的，更适应于响应式布局
em是相对于父元素，rem是相对于根元素
em：子元素字体大小的em是相对于父元素字体大小
rem：rem是全部的长度都相对于根元素em是全部的长度都相对于根元素，元素。通常做法是给html元素设置一个字体大小。
即1rem = html 中的 font-size

4. CSS中创建变量

4.1 创建一个自定义 CSS 变量：

只需要在变量名前添加两个破折号，并为其赋值，例子如下：
–penguin-skin: gray;
这样会创建一个–penguin-skin变量并赋值为gray（灰色）

4.2 使用一个自定义的 CSS 变量

创建变量后，CSS 属性可以通过引用变量名来使用它的值。
background: var(–penguin-skin);

5. 给元素添加阴影：

box-shadow属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。
box-shadow属性的每个阴影依次由下面这些值描述：
offset-x阴影的水平偏移量；
offset-y阴影的垂直偏移量;
blur-radius模糊距离；
spread-radius阴影尺寸；
颜色。
其中blur-raduis和spread-raduis是可选的。

6.float属性

它通过元素的float属性来设置。浮动元素不在文档流中，它向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。通常需要用width属性来指定浮动元素占据的水平空间。

7. CSS弹性盒子

简介：CSS3 引入了 Flexible Box，简称 flexbox（弹性盒子），它特别适合用来创建弹性的页面布局。
弹性布局以一种可预见的方式排列元素，使其适用于不同尺寸的设备。

7.1 flex-direction

添加了display: flex的元素会成为 flex 容器。只要把flex-direction属性添加到父元素，并设置其为 row 或 column 即可轻易横或竖排列它的子元素。设为 row 可以让子元素水平排列，column 可以让子元素垂直排列。
flex-direction的其他可选值还有 row-reverse 和 column-reverse

7.2 使用 justify-content 属性对齐元素

flex 容器里的 flex 子元素有时不能充满整个容器，所以我们需要告诉 CSS 如何以特定方案排列和调整 flex 子元素。我们有justify-content属性处理这个问题。但在介绍justify-content的可选值之前，我们要先理解一些重要术语。

把 flex 容器设为一个行，它的子元素会从左到右逐个排列，把 flex 容器设为一个列，它的子元素会从上到下逐个排列。子元素排列的方向被称为 main axis（主轴）。对于行，主轴水平贯穿每一个项目；对于列，主轴垂直贯穿每一个项目。

关于 flex 子元素在主轴排列方式，可以选择以下值：其中一个很常用的是justify-content: center;，可以让 flex 子元素排列在 flex 容器中间。其他可选值还有：

flex-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠左放，对于列是把项目都靠顶部放。

flex-end：从 flex 容器的后端开始排列项目。对行来说是把项目都靠右放，对于列是把项目都靠底部放。

space-between：项目间保留一定间距地在主轴排列。第一个和最后一个项目会被挤到容器边沿。例如，在行中第一个项目会紧贴着容器左侧，最后一个项目会紧贴着容器右侧，然后其他项目均匀排布