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

CSS简介

CSS是什么

负责样式层

Cascading Style Sheets 层叠样式表
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

组成

选择器Selector

声明Declaration（属性Property ：属性值Value）

h1{
  color：white;
  font—size：14px；
}

使用方法

外链（首选）
- link标签引入css链接
- eg.<link rel=“stylesheet” href=“/assets/style.css”>
直接嵌入
- <style>样式</style>
内联（不推荐）
- 以style属性形式写在标签内部
- eg.<p style=“margin: 0”>Example</p>
- 缺点：不便于内容与样式分离

CSS如何工作

选择器

作用

找出页面中元素，便于设置样式

使用方法

标签名、类名、id
属性
DOM树中的位置

一般选择器类型

通配选择器*
标签选择器
id选择器#
类选择器.
属性选择器[属性] or [属性=“属性值”] or 属性规则

eg. a[href^=“#”]表示以#开头的href属性
a[href$=“.jpg”]以.jpg结尾的href属性

伪类选择器

不基于标签和属性定位元素
几种伪类
- 状态伪类（交互时的状态）
  
  a标签 :link默认状态，:visited访问过，:hover鼠标移上，:active按下鼠标
  
  :focus聚焦状态
- 结构性伪类（DOM节点位置）
  
  :first-child
  
  :last-child

组合

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A>B	选中B，如果它是A的子元素	section>p
兄弟选择器	A~B	选中B，如果它在A后且和A同级	h2~p
相邻选择器	A+B	选中B，如果它紧跟在A后面	h2+p
选择器组	A，B，C	选中ABC	h1,p,a

颜色

颜色- RGB

rgb（255,0,0）红色

#ffffff白色

缺点：名称与颜色无法直接联系起来

颜色-HSL

hsl（220，100%，50%）

alpha 透明度

#ffffffff

rgba(255,0,0,0.99)

hsla(0,100%,50%,1)

1为不透明

0为透明

放在上述颜色代码最后

字体（font-family）

字体族，便于不同浏览器展示

最后一定要加上通用字体

中英字体混排时，英文字体写前面

web font

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

font-size：字体大小

font-weight：字重

line-height：行高（两行文字基准线的距离）（不带单位的数字值表示字体大小的倍数）

text-indent：首行缩进

规避html空白符合并：white-space

调试CSS

浏览器右键检查
快捷键
- Ctrl+Shift+I【windows】
- Cmd+Opt+I【Mac】

CSS选择器的特异度

下面列表中，选择器类型的优先级是递增的：

[类型选择器]（例如，h1）和伪元素（例如，::before）
[类选择器] (例如，.example)，属性选择器（例如，[type="radio"]）和伪类（例如，:hover）
[ID 选择器]（例如，#example）。

通配选择符（universal selector）（*）关系选择符（combinators）（+, >, ~," ", ||）和 否定伪类（negation pseudo-class）（[:not()]）对优先级没有影响。（但是，在 :not() 内部声明的选择器会影响优先级）。

继承

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

一般文字相关继承，盒模型相关不继承

inherit设置显式继承

初始值

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

CSS计算过程

布局Layout

确定内容的大小和位置的算法
根据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

常规流
- 行级
- 块级
- 表格布局
- FlexBox
- Grid布局
浮动
绝对定位

盒模型

width

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

height

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

padding

指定元素四个方向的内边距（上右下左）
百分数相对于容器宽度

border

指定容器边框样式、粗细和颜色
三种属性
- border-width
- border-style
- border-color
四个方向
- border-top
- border-right
- border-bottom
- border-left

当四条边框颜色不一致时

margin

指定元素四个方向的外边距
取值可以是长度、百分数、auto（水平居中）
百分数相对于容器宽度
margin collapse
- 垂直方向上取上下两者中的较大值

box-sizing: border-box

width、height包含border
推荐在开发中使用

overflow

overflow = 
  [ visible | hidden | clip | scroll | auto ]

visible:超出padding部分可见
hidden:超出padding部分不可见，不可滚动，但支持编程的方式滚动
clip:超出padding部分不可见，不可滚动，不支持编程的方式滚动
scroll:超出padding部分不可见，浏览器显示滚动条，支持滚动
auto:内容超出padding时提供滚动条，内容不超出时与visible类似

块级&行级

Block Level Box	Inline Level Box
不和其它盒子并列摆放	和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性	盒模型中的width、height不适用

块级元素	行级元素
生成块级盒子	生成行级盒子内容分散在多个行盒(linebox)中
body、article、div、main、section、hl·6、p、ul、li等	span、em、Strong、cite、code等
display:block	display:inline

display属性

block:块级盒子
inline:行级盒子
inline-block:本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none:排版时完全被忽略

常规流（Normal Flow）

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

行级排版上下文

Inline Formatting Context (IFC)
只包含行级盒子的容器会创建一个IFC
IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动（float）元素

块级排版上下文

Block Formatting Context(BFC)
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display：flow-root
BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠

span内的div

Flex BOX

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

flex-direction

主轴与侧轴

justify-content

align-items

align-self

order

Flexibility

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

flex属性	等价
flex:1	flex-grow:1
flex:100p×	flex-basis:100p×
flex:2 1	flex-grow:2；flex-shrink:1
flex:1 100px	flex-grow:1；flex-basis:100px
flex:2 0 100p×	flex-grow:2；flex-shrink:0；flex-basis:100px
flex:auto	flex:1 1 auto
flex:none	flex:0 0 auto

Grid布局

display:grid使元素生成一个块级的Grid容器
使用grid-template相关属性将容器划分为网格
设置每一个子项占哪些行/列

grid line网格线

grid area网格区域

以下两者等价

.a {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 3;
}

.a{
  grid-area: 1/1/3/3;
}

float浮动

现在一般用于文本环绕排版
float:left向左浮动
float:right向右浮动

position

属性

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

position:relative

在常规流里面布局
相对于自己本应该在的位置进行偏移
使用top、left、bottom、right设置偏移长度
流内其它元素当它没有偏移一样布局

position:absolute

脱离常规流
相对于最近的非static祖先定位
不会对流内元素布局造成影响

学习链接： MDN W3C CSS规范选择器小游戏

CSS | 青训营笔记

CSS简介

CSS是什么

组成

使用方法

CSS如何工作

选择器

作用

使用方法

一般选择器类型

伪类选择器

组合

颜色

颜色- RGB

颜色-HSL

alpha 透明度

字体（font-family）

调试CSS

CSS选择器的特异度

继承

初始值

CSS计算过程

布局Layout

布局相关技术

盒模型

width

height

padding

border

margin

box-sizing: border-box

overflow

块级&行级

display属性

常规流（Normal Flow）

行级排版上下文

块级排版上下文

Flex BOX

flex-direction

主轴与侧轴

justify-content

align-items

align-self

order

Flexibility

Grid布局

float浮动

position

属性

position:relative

position:absolute