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

1、CSS是什么？

Cascading Style Sheets

用来定义页面元素的样式

设置字体和颜色
设置位置和大小
添加动画效果

前端三剑客：CSS(样式)、HTML（内容）、JavaScript（行为）

2、CSS代码组成：

2、在页面中使用CSS：外链（推荐）、嵌入、内联

<link rel="stylesheet" href="/assets/style.css">
<!-- 嵌入 -->
<style>
    li{margin: 0;list-style: none;}
    p{margin: lem 0;}
</style>
<!-- 内联 -->
<p style="margin: 0em;">Example  Content</p>

4、CSS是如何工作的？

5、选择器

通配选择器
标签选择器
id选择器
类选择器
属性选择器

6、伪类

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

7、组合

8、选择器组

9、颜色-RGB 、HSL

color:三原色 red、green、blue；
rgb(133,123,222) or #8fac77
Hue(色相0-360)\Saturation(饱和度0-100%)\Lightness(亮度0-100%)

10、字体 font-family

11、使用Web-Font字体、font-size：字体大小

12、选择器的特异度

13、继承

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

1、显示继承

2、初始值

·CSS中，每个属性都有一个初始值 ·background-.color的初始值为transparent ·margin-left的初始值为0 ·可以使用initial关键字显式重置为初始值 background-color:initial

3、CSS的求值过程问题

4、布局(layout)是什么？

1、确定内容的大小和位置的算法
2、依据元素、容器、兄弟节点和内容等信息来计算。
3、布局涉及的相关技术：常规流、浮动、绝对定位。
4、常规流：行级、块级、表格布局、FlexBox、Grid布局。

width

指定content box 宽度
取值为长度、百分数、auto
auto由浏览器根据其它属性确定
百分数相对于容器的content box宽度

height

指定content box 高度
取值为长度、百分数、auto
auto取值由内容计算得来
百分数相对于容器的 content box 高度
容器有指定的高度时，百分数才生效.

padding

指定元素四个方向的内边距
百分数相对于容器宽度

border

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

margin

指定元素四个方向的外边距
取值可以是长度、百分数、auto
百分数相对于容器宽度 使用margin:auto水平居中

块级vs.行级 行级元素：生成行级盒子，内容多分散在多个行盒(line box)中. 块级元素：生成块级盒子

display属性

block:块级盒子 inline：行级盒子 inline-block:本身是行级，可以放在行盒中;可以设置宽高；作为一个整体不会被拆散成多行

常规流 Normal Flow

根元素、浮动和绝对定位的元素会脱离常规流
其他元素都会在常规流之内
常规流中的盒子，在某种排版上下文中参与布局

position属性

static：默认值，非定位元素
relative：相对自身原本位置偏移，不脱离文档流
absolute:绝对定位,相对于非static祖先元素定位

fixed：相对于视口绝对定位

Flex Box是什么？

一种新的排版上下文
它可以控制子级盒子的：
摆放的流向
摆放顺序
盒子宽度和高度
水平和垂直方向的对齐
是否允许折行

学习CSS的几点建议：

充分利用MDN和W3C CSS规范
保持好奇心，善用览器的开发者工具
持续学习，CSS新特性还在不断出现

[前端与CSS|青训营笔记]