理解CSS | 青训营笔记这是我参与「第五届青训营」笔记创作活动的第3天【温故而知新，可以为师矣。】一、本堂课重点

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

【温故而知新，可以为师矣。】

一、本堂课重点内容：

了解CSS的基本概念和工作原理，在页面中使用CSS（一些常用的CSS属性）
CSS选择器
BFC
flex布局

二、详细知识点介绍：

2.1 CSS基本概念

CSS是用于控制页面样式的语言，（Cascading Style Sheets）。 CSS用来定义页面元素的样式：设置字体和颜色、设置位置和大小、添加动画效果

2.2 在页面中使用CSS

<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">

<!-- 外链 -->
<style>
 li { margin: 0; list-style: none; }
 p { margin: 1rem 0; }
</style>

<!-- 内联 -->
<p style="margin: 1rem 0">Example Content</p>

2.3 CSS工作原理

2.4 选择器

找出页面中的元素，以便给他们设置样式；使用多种方式选择元素 1.通配选择器、2.标签选择器、3.id选择器、4.类选择器、5.属性选择器、6.伪类

// 通配选择器
* {
  color: red;
  font-size: 20px;
}

// 标签选择器
h1 {
  color: orange;
}

// id选择器
#logo {
  font-size: 60px;
  font-weight: 200;
}

// 类选择器
.done {
  color: gray;
  text-decoration: line-through;
}

// 属性选择器
 [disabled] {
   background: #eee;
   color: #999;
 }
   input[type="password"] {
    border-color: red;
    color: red;
  }
 a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }

伪类：不基于标签和属性定位元素，几种伪类（状态伪类、结构性伪类）

a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

a:focus {
  outline: 2px solid orange;
}

li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}

input.error {
    border-color: red;
 }

组合：

  article p {
    color: black;
  }

  article > p {
    color: blue;
  }

  h2 + p {
    color: red; 
  }

2.5 颜色

RGB
HSL Hue:色相是色彩的基本属性； Saturation:饱和度是指色彩的鲜艳程度，越高越鲜艳； Lightness:亮度指颜色的明亮程度；越高颜色越亮；
alpha透明度

2.6 字体

font-family

字体列表最后写上通用字体簇
英文字体放在中文字体前面

  h1 {
    font-family: Optima, Georgia, serif;
  }
  body {
    font-family: Helvetica, sans-serif;
  }

使用Web Fonts

  @font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }

font-size 关键字：small \ medium \ large 长度：px \ em 百分数：相对于父元素字体大小

line-height、text-align、spacing、text-indent、text-decoration、white-space

选择器的特异性

2.7 继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值。显式继承

2.8 布局相关技术：

2.9 块级 VS 行级

2.10 BFC

2.11 Flex Box

flex(弹性盒、伸缩盒)：是css中的又一种布局手段，它主要用来代替浮动来完成页面。 flex可以使元素具有弹性，让元素可以跟随页面得到大小的改变而改变

弹性容器要使用弹性盒，必须先将一个元素设置为弹性容器，通过display来设置弹性容器
```
display:flex; //设置为块级弹性容器
display:inline-flex; //设置为行内的弹性容器
```
弹性元素弹性容器的子元素是弹元素（弹性项），一个元素可以同时是弹性容器和弹性元素

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

☻ 弹性容器的样式：

flex-direction 指定容器中弹性元素的排列方式（主轴方向）可选值： row 默认值，弹性元素在容器中水平排列（自左向右） row-reverse 弹性元素在容器中反向水平排列（自右向左） column 弹性元素纵向排列（自上向下） column-reverse 弹性元素反向纵向排列（自下向上）
flex-grow 指定弹性元素的伸展系数当父元素有多余空间时，子元素如何伸展
flex-shrink 指定弹性元素的收缩系数当父元素中的空间不足以容纳所有子元素时，如何对子元素进行收缩
flex-wrap 设置弹性元素是否在弹性容器中自动换行可选值： nowrap 默认值，元素不会自动换行 wrap 元素沿着辅轴方向自动换行 wrap-reverse 元素沿着辅轴反方向换行

★flex-flow 是 flex-wrap和flex-direction的简写属性,例如：flex-flow: row wrap;

justify-content 如何分配主轴上的空白空间（主轴上的元素如何排列）可选值： flex-start 元素沿着主轴的起边排列 flex-end 元素沿着主轴的终边排列 center 元素居中排列 space-around 空白分布到元素的两个 space-between 空白均匀分布到元素间 space-evenly 空白分布到元素的单侧
align-items 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式（元素间关系）可选值： stretch 默认值，将元素的长度设置为相同的值 flex-start 元素不会拉伸，沿着辅轴起边对齐 flex-end 元素不会拉伸，沿着辅轴终边对齐 center 居中对齐 baseline 基线对齐 ** align-self 用来覆盖当前弹性元素上的align-items

☻ 弹性元素的样式：

弹性元素的缩减系数：缩减系数的计算方式比较复杂，缩减多少是根据缩减系数和元素大小来计算（flex-grow和flex-shrink）。
元素基础长度 flex-basis 指定的是元素在主轴上的基础长度。如果主轴是横向的，则该值指定的就是元素的宽度，如果主轴是纵向的，则该值指定的就是元素的高度。默认值是auto，表示参考元素自身的高度或宽度。如果传递了一个具体的数值，则以该值为准。

★flex可以设置弹性元素所有的三个样式。格式：flex: 增长缩减基础；（例如：flex: 1 1 auto;）

order 决定弹性元素的排列顺序（依据order指定的数值）。

三、实践练习例子：

见上述代码。

四、课后个人总结：

重新梳理flex布局的内容，BFC，选择器的知识。对CSS有了更深刻的理解。

五、引用参考：

字节青训营-理解css
课程课件