深入CSS|青训营笔记

页面使用css三种方法：外链、嵌入、内联 一般推荐用外链

选择器Selector

用来找出页面中的元素，以便给他们设置样式 可以使用多种方式选择元素例如按照标签名、类名或id；按照属性；按照DOM树中的位置。

通配选择器*（匹配所有）

标签选择器（用标签设置样式）

id选择器，设置时id在此页面需是唯一的值

类选择器

属性选择器：通过这个元素的属性值来设置

^=表示如果以某个符号开头则被选上，$=表示如果以某个符号结尾则被选上

伪类：不基于标签和属性定位元素，可分为状态伪类（该元素处于特定状态）和结构性伪类（根据动节点在动树种出现的位置来决定石佛选择这个元素）。

组合方式

选择器组：用逗号隔开的选择器

rgb可用来表示颜色，括号中从左到右为红绿蓝大小为0到255，rgb（红，绿，蓝）

hsl也可用来表示颜色，通过颜色的特点来表示（色相、饱和度、亮度）即hsl（H，S，L）H数字为0到360，S与L数字均为0~100

alpha透明度（0~1）为1的时候不透明，写在rgb或hsl后面一位

字体font-family

如图设置多个字体是因为可能多个用户访问，他们字体不一样。

通用字体族

添加的字体一定要有一种通用字体族，展示英文字符需把英文写在中文前面（建议）

也可用web fonts来加入字体

font-size（设置字体大小）

方法：关键字例如small、medium、large

长度例如：px、em

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

font-weight来表示字重，即字的粗细（从100到900）其中400为normal，700为bold。但是还要看该字体设置的字重的范围。

line-height（行高）

html中连续空格与换行可能会合并成一个，可通过css中white-space来规避

normal即正常情况，连续空格或换行会合并成一个

nowrap则会强制不换或不空格

pre表示保留所有空格和换行

pre-wrap表示一行内显示不下的时候会进行换行，但是会保留空格

pre-line表示合并空格但是保留换行

调试CSS

右键点击页面选择检查或者使用快捷键ctrl+shift+I(windows), cmd+opt+I(Mac)

深入CSS

选择器优先级问题（根据其特异度来决定）

id>（伪）类>标签

继承：某些属性会自动继承其父元素的计算值，除非显示指定一个值。后面为个人理解（若一个元素没有设置任何东西，就会看向其父元素的样式来进行继承）例子：

一般和文字相关的属性可以继承，但是盒模型一般不可以例如：宽度

显式继承（inherit)

如果父级也没设置，则会用到初始值

CSS求值过程

注：继承中，一般继承的是父级的计算值

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

布局相关技术：常规流（行级、块级、表格布局、FlexBox)、浮动、绝对定位

盒模型

padding

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

margin 使用margin:auto水平居中

box-sizing:border-box 使用border-box和不使用的区别，实际情况下会用border-box

若指定了框的宽度和高度但是里面内容超出了框，可以使用overflow来解决

visible:还是会展示出来；hidden：会剪掉隐藏；scroll：有滚动条

块级vs.行级

行级宽度和高度由里面内容决定

行级排版上下文

块级排版上下文

其中排版规则

Flex Box

根据主轴的对齐方式（主轴是方向向右的一条线）

justify-content

align-items

Flexibility flex-grow规则：将该容器刨去的一部分按照比例分配的两个不同容器当中，不是他们容器的比例（个人理解）

一些缩写

Grid布局（划分格子将内容放入其中）

如何划分格子

columns是列方向的划分，rows是行方向的划分，fr表示一份的意思

grid line 网格线

可标记线，通过线的编号来划分区域

float浮动（实现文字环绕的效果）

绝对定位

relative

absolute 相对于relative的父级来定位，如果都没有就根据根源来定位

fixed用法举例 其导航部分不会随着滚动条而改变位置