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

了解CSS

CSS是什么？

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

选择器

选择器Selector{

选择器Property:属性值Value;

声明Declaration;}

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
[属性]或[属性="值"] ^属性值以某值开头 $属性值以某值结尾
- 按照DOM树中的位置
- 通配选择器

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p{color:red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav{color:red;}
id选择器	一次只能选择1个标签	ID属性只能在每个HTML文档中出现一次	一般和js搭配	#nav{color:red;}
通配符选择器	选择所有标签	选择的太多，有部分不需要	特殊情况使用	*{color:red;}

伪类(pseudo-classes)

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

选择器组用,隔开

名称	语法	说明	示例
直接组合	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

引入方式

外链：<link>标签（推荐）

嵌入：<style>标签

内联：标签内的style样式

通过将DOM树的每一个结点解析出来得到一个渲染树，得到每一个结点的样式是什么样，然后再渲染成页面，HTML和CSS单独解析，再将解析结果附加到DOM树上，形成一个渲染树展示出来。

颜色

RGB 红黄蓝三原色（十六进制表示）

HSL 色相饱和度亮度(360,100%,100%)

alpha透明度（0-1）

字体

设置多个字体，依次取匹配

font:font-style font-weight font-size/line-height font-family;

对空白符的处理：默认情况下，多个连续的空格或者换行会被合并成一个

white-space：normal默认情况，nowrap强制不换行，pre保留所有空白符，pre-wrap保留空格，超出自动换行，pre-line合并空格，超出自动换行

调试CSS

右键点击页面，选择检查
使用快捷键
- Ctrl+Shift+I(Windows)
- Cmd+Opt+I(Mac)

深入CSS

选择器的优先级（特异度）

选择器	选择器权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=””	1,0,0,0
!important	无穷大

权重叠加：如果是复合选择器，就会有权重叠加，需要计算权重

某些属性会自动继承其父元素的计算值，除非显式指定一个值（和文字相关的一般可以继承，和盒模型相关的一般不能继承）

显式继承：inherit关键字，可以从父级继承，可以使用initial关键字显式重置为初始值

CSS求值过程

需要实际布局决定的值会放到formatting去计算，继承到的是父级的计算值而不是使用值

布局是什么？

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

布局相关技术

常规流

行级，块级，FlexBox,Grid布局

width指定content box宽度，height指定content box高度

margin:auto水平居中， margin collapse外边距合并

box-sizing:border-box带边框盒子的大小

overflow：visible，hidden，scroll

CSS三角

div{      width:0;
          height:0;
          line-height:0;
          font-size:0;
          border:50px solid transparent;
          border-left-color:pink;}//多用于聊天框小三角

行级排版上下文

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

块级排版上下文

Block Formatting Context(BFC)
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display:flow-root;

BFC内的排版规则

盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠

Flexibility

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

浮动

绝对定位

理解CSS | 青训营笔记