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:项目间保留一定间距地在主轴排列。第一个和最后一个项目会被挤到容器边沿。例如,在行中第一个项目会紧贴着容器左侧,最后一个项目会紧贴着容器右侧,然后其他项目均匀排布