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

理解CSS[青训营笔记]

一、走进前端技术栈 - CSS

1.css是什么

Cascading Style Sheets

用来定义页面元素的样式：设置字体和颜色；设置位置和大小；添加动画效果

JavaScript：行为
css：样式
html：内容

2.选择器：

Selector（h1）
property（color）

3.在页面中使用css

外链、嵌入、内联

4.css是如何工作的

5.选择器selector

找出页面中的元素，以便给他们设置样式

使用多种方式选择元素：按照标签名、类名或者id；按照属性；按照DOM树中的位置

6.通配选择器、标签选择器、id选择器、类选择器、属性选择器

*{ }（通配选择器）

7.伪类

不基于标签和属性定位元素

几种伪类：状态伪类；结构性伪类

8.组合

9.颜色 color属性

rgb（红色，绿色，蓝色）或 #红绿蓝（16进制）

HSL：

H（Hue）色相是色彩的基本属性，如红色、黄色等；取值范围是0-360
S（Saturation）饱和度是指色彩的鲜艳程度，越高越鲜艳，取值范围0-100%
L（Lightness）亮度指颜色的明亮程度，越高颜色越亮；取值范围是0-100%

10.alpha透明度

11.字体 font-family

字体列表最后协商通用字体族

英文字体放在中文字体前面

12.font-size

关键字：small、medium、large

长度：px、em

百分数：相对于父元素字体大小

13.调试CSS

右键点击页面，选择检查

使用快捷键：Ctrl+Shift+I（window）、Cmd+Opt+I（mac）

二、深入理解CSS

1.继承

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

2.初始值

CSS中，每个属性都有一个初始值：background-color的初始值为transparent；margin-left的初始值为0

可以使用initial关键字显式重置为初始值：background-color：initial

3.CSS求值过程

4.布局是什么

确定内容的大小和位置的算法

依据元素、容器、兄弟节点和内容等信息来计算

5.布局相关技术

6.height

指定content box高度

取值为长度、百分数、auto

auto取值由内容计算得来

百分数相对于容器的content box高度

容器有指定的高度时，百分数才生效

7.width

指定content box高度

取值为长度、百分数、auto

auto由浏览器根据其他属性确定

百分数相对于容器的content box宽度

8.padding

指定元素四个方向的内边距

百分数相对于容器宽度

9.border

指定容器边框样式、粗细和颜色

三种属性：border-width；border-style；border-color

四个方向：border-投票；border-right；border-bottom；border-left

10.margin

指定元素四个方向的外边距

取值可以是长度、百分数、auto

百分数相对于容器宽度

使用margin:auto水平居中

margin collapse 决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。

11.块级 vs 行级

12.display属性

13.常规流Normal Flow

14.行级排版上下文

15.块级排版上下文

16.BFC内的排版规则

17.Flex Box是什么

一种新的排版上下文

它可以控制子级盒子的：摆放的流向，盒子宽度和高度，水平和垂直方向的对齐；是否允许折行

18.flex-direction

19.flexibility

可以设置子项的弹性：当容器有剩余空间时，会伸展，容器空间不够时会收缩
flex-grow有剩余空间时的伸展能力
flex-shrink容器空间不足时收缩的能力
flex-basis没有伸展或收缩时的基础长度

理解CSS | 青训营笔记