CSS(2) | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第11天。

Position

1.定位的简介

定位（position）

• 定位是一种更加高级的布局手段
• 通过定位可以将元素摆放到页面的任意位置
• 使用position属性来设置定位 可选值： static 默认值，元素是静止的没有开启定位 relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘滞定位
• 偏移量（offset）
• 当元素开启了定位以后，可以通过偏移量来设置元素的位置

top

• 定位元素和定位位置上边的距离

bottom

• 定位元素和定位位置下边的距离
• 定位元素垂直方向的位置由top和bottom两个属性来控制 通常情况下我们只会使用其中一
• top值越大，定位元素越向下移动
• bottom值越大，定位元素越向上移动

left

• 定位元素和定位位置的左侧距离

right

• 定位元素和定位位置的右侧距离
• 定位元素水平方向的位置由left和right两个属性控制

通常情况下只会使用一个

• left越大元素越靠右
• right越大元素越靠左

2.相对定位

• 相对定位：相对与元素在文档流里原始的位置
• 当元素的position属性值设置为relative时则开启了元素的相对定位
• 相对定位的特点： 1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化 2.相对定位是参照于元素在文档流中的位置进行定位的 3.相对定位会提升元素的层级 4.相对定位不会使元素脱离文档流 5.相对定位不会改变元素的性质，块还是块，行内还是行内

3.绝对定位

绝对定位

• 当元素的position属性值设置为absolute时，则开启了元素的绝对定位
• 绝对定位的特点： 1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化 2.开启绝对定位后，元素会从文档流中脱离 3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开 4.绝对定位会使元素提升一个层级 5.绝对定位元素是相对于其包含块进行定位的

包含块( containing block )

• 正常情况下： 包含块就是离当前元素最近的祖先块元素

• 绝对定位的包含块: 包含块就是离它最近的开启了定位的祖先元素， 如果所有的祖先元素都没有开启定位则根元素就是它的包含块
• html（根元素、初始包含块）

4.固定定位

固定定位：

• 将元素的position属性设置为fixed则开启了元素的固定定位
• 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样 唯一不同的是固定定位永远参照于浏览器的视口进行定位 固定定位的元素不会随网页的滚动条滚动

5.粘滞定位

粘滞定位

• 当元素的position属性设置为sticky时则开启了元素的粘滞定位
• 粘滞定位和相对定位的特点基本一致， 不同的是粘滞定位可以在元素到达某个位置时将其固定

6. 元素居中的一个方法

当我们开启了绝对定位后: 布局等式就需要添加left 和 right 两个值 此时规则和之前一样只是多添加了两个值： 当发生过度约束： 如果9个值中没有 auto 则自动调整right值以使等式满足 如果有auto，则自动调整auto的值以使等式满足

• 可设置auto的值 margin width left right
• 因为left 和 right的值默认是auto，所以如果不指定left和right 则等式不满足时，会自动调整这两个值

这是元素居中的一个方法

7.元素的层级

对于开启了定位元素，可以通过z-index属性来指定元素的层级 z-index需要一个整数作为参数，值越大元素的层级越高 元素的层级越高越优先显示

如果元素的层级一样，则优先显示靠下的元素

祖先的元素的层级再高也不会盖住后代元素

flex

1.flex弹性盒的简介

flex(弹性盒、伸缩盒)

• 是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局
• flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

2.弹性容器

• 弹性容器

  • 要使用弹性盒，必须先将一个元素设置为弹性容器
  • 我们通过 display 来设置弹性容器 display:flex 设置为块级弹性容器 display:inline-flex 设置为行内的弹性容器

flex-direction 指定容器中弹性元素的排列方式 可选值：

• row 默认值，弹性元素在容器中水平排列（左向右） 主轴 自左向右
• row-reverse 弹性元素在容器中反向水平排列（右向左） 主轴 自右向左
• column 弹性元素纵向排列（自上向下）
• column-reverse 弹性元素方向纵向排列（自下向上）

主轴：弹性元素的排列方向称为主轴 侧轴：与主轴垂直方向的称为侧轴

flex-wrap: 设置弹性元素是否在弹性容器中自动换行 可选值： nowrap 默认值，元素不会自动换行 wrap 元素沿着辅轴方向自动换行 wrap-reverse 元素沿着辅轴反方向换行

justify-content

• 如何分配主轴上的空白空间（主轴上的元素如何排列）
• 可选值： flex-start 元素沿着主轴起边排列 flex-end 元素沿着主轴终边排列 center 元素居中排列 space-around 空白分布到元素两侧 space-between 空白均匀分布到元素间 space-evenly 空白分布到元素的单侧

align-items:

• 元素在辅轴上如何对齐
• 元素间的关系
• 可选值： stretch 默认值，将元素的长度设置为相同的值 flex-start 元素不会拉伸，沿着辅轴起边对齐 flex-end 沿着辅轴的终边对齐 center 居中对齐 baseline 基线对齐

3.弹性元素

• 弹性元素

  • 弹性容器的子元素是弹性元素（弹性项）
  • 弹性元素可以同时是弹性容器

弹性元素的属性：

• flex-grow 指定弹性元素的伸展的系数 当父元素有多余空间的时，子元素如何伸展 父元素的剩余空间，会按照比例进行分配
• flex-shrink 指定弹性元素的收缩系数 当父元素中的空间不足以容纳所有的子元素时，如果对子元素进行收缩
• flex-basis 指定的是元素在主轴上的基础长度 如果主轴是 横向的 则 该值指定的就是元素的宽度 如果主轴是 纵向的 则 该值指定的是就是元素的高度
• 默认值是 auto，表示参考元素自身的高度或宽度
• 如果传递了一个具体的数值，则以该值为准

flex 可以设置弹性元素所有的三个样式 flex ：增长 缩减 基础; initial "flex: 0 1 auto". auto "flex: 1 1 auto" none "flex: 0 0 auto" 弹性元素没有弹性

order 决定弹性元素的排列顺序

font

1.字体相关的样式

color 用来设置字体颜色 font-size 字体的大小 和font-size相关的单位 em 相当于当前元素的一个font-size rem 相对于根元素的一个font-size

font-family 字体族（字体的格式） 可选值： serif 衬线字体 sans-serif 非衬线字体 monospace 等宽字体 指定字体的类别，浏览器会自动使用该类别下的字体

font-weight 字重 字体的加粗 可选值： normal 默认值 不加粗 bold 加粗 100-900 九个级别（没什么用）

font-style 字体的风格 normal 正常的 italic 斜体

• font-family 可以同时指定多个字体，多个字体间使用,隔开 字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推

2.图标字体

图标字体（iconfont）

• 在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常的不灵活
• 所以在使用图标时，我们还可以将图标直接设置为字体， 然后通过font-face的形式来对字体进行引入
• 这样我们就可以通过使用字体的形式来使用图标

fontawesome 使用步骤 1.下载 fontawesome.com/ 2.解压 3.将css和webfonts移动到项目中 4.将all.css引入到网页中 5.使用图标字体

• 直接通过类名来使用图标字体 class="fas fa-bell" class="fab fa-accessible-icon"

通过伪元素来设置图标字体 1.找到要设置图标的元素通过before或after选中 2.在content中设置字体的编码 3.设置字体的样式 fab font-family: 'Font Awesome 5 Brands';

fas font-family: 'Font Awesome 5 Free'; font-weight: 900;

3.行高

行高（line height）

• 行高指的是文字占有的实际高度
• 可以通过line-height来设置行高 行高可以直接指定一个大小（px em） 也可以直接为行高设置一个整数 如果是一个整数的话，行高将会是字体的指定的倍数
• 行高经常还用来设置文字的行间距 行间距 = 行高 - 字体大小

字体框

• 字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度

行高会在字体框的上下平均分配

可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中

font 可以设置字体相关的所有属性 语法：font: 字体大小/行高 字体族 行高 可以省略不写 如果不写使用默认值

4.文本的样式

text-align 文本的水平对齐 可选值： left 左侧对齐 right 右对齐 center 居中对齐 justify 两端对齐

vertical-align 设置元素垂直对齐的方式 可选值： baseline 默认值 基线对齐 top 顶部对齐 bottom 底部对齐 middle 居中对齐

text-decoration 设置文本修饰 可选值： none 什么都没有 underline 下划线 line-through 删除线 overline 上划线

white-space 设置网页如何处理空白 可选值： normal 正常 nowrap 不换行 pre 保留空白

设置多余文字用省略号显示

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

background

1.背景

background-color 设置背景颜色 background-color: #bfa;

background-image 设置背景图片

• 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
• 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
• 如果背景的图片大于元素，将会一个部分背景无法完全显示
• 如果背景图片和元素一样大，则会直接正常显示

background-image: url("./img/1.png");

background-repeat 用来设置背景的重复方式 可选值： repeat 默认值 ， 背景会沿着x轴 y轴双方向重复 repeat-x 沿着x轴方向重复 repeat-y 沿着y轴方向重复 no-repeat 背景图片不重复

background-size 设置背景图片的大小 第一个值表示宽度 第二个值表示高度

• 如果只写一个，则第二个值默认是 auto

cover 图片的比例不变，将元素铺满 contain 图片比例不变，将图片在元素中完整显示

background-position 用来设置背景图片的位置 设置方式：通过 top left right bottom center 几个表示方位的词来设置背景图片的位置 使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center

通过偏移量来指定背景图片的位置：水平方向的偏移量 垂直方向变量

设置背景的范围 background-clip 可选值： border-box 默认值，背景会出现在边框的下边 padding-box 背景不会出现在边框，只出现在内容区和内边距 content-box 背景只会出现在内容区

background-origin 背景图片的偏移量计算的原点 padding-box 默认值，background-position从内边距处开始计算 content-box 背景图片的偏移量从内容区处计算 border-box 背景图片的偏移量从边框处开始计算

backgound 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置 并且该样式没有顺序要求，也没有哪个属性是必须写的

注意： background-size必须写在background-position的后边，并且使用/隔开 background-position/background-size

background-origin background-clip 两个样式 ，orgin要在clip的前边

2.渐变

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果 渐变是图片，需要通过background-image来设置

线性渐变，颜色沿着一条直线发生变化 linear-gradient() linear-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过渡区域

• 线性渐变的开头，我们可以指定一个渐变的方向 to left to right to bottom to top deg deg表示度数 turn 表示圈 1turn=360deg 0.5turn=180deg
• 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布， 也可以手动指定渐变的分布情况

repeating-linear-gradient() 可以平铺的线性渐变

background-image: repeating-linear-gradient(to right ,red, yellow 50px);

radial-gradient() 径向渐变(放射性的效果)

默认情况下径向渐变的形状根据元素的形状来计算的 正方形 --> 圆形 长方形 --> 椭圆形 我们也可以手动指定径向渐变的大小 circle ellipse

• 也可以指定渐变的位置
• 语法： radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置) 大小：
• circle 圆形
• ellipse 椭圆
• closest-side 近边
• closest-corner 近角
• farthest-side 远边
• farthest-corner 远角

位置：top right left center bottom background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa)

补充

1. 设置变量

css原生也支持变量的设置

/*设置变量*/
--color: #ff0;
--length: 200px;
/*使用变量*/
width: var(--length);
height: var(--length);
color: var(--color);

2. 计算函数

calc()计算函数 数字与符号之间一定要加空格

calc(200px * 2);
calc(100% - 50px)