这是我参与「第四届青训营 」笔记创作活动的的第2天
1、css是由很多的样式规则组成
2、页面使用css的三种方法
外链（推荐使用）
<link rel="stylesheet" href="/assets/style.css">
嵌入 <style></style>
内联，即行内样式
3、CSS如何运行？
解析顺序
当拉取到html资源时，遇到外链的css文件，浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
浏览器会解析 HTML 并创造一个 DOM，然后解析 CSS。浏览器处理规则会非常快！把同样的规则直接使用在对应标签上，然后渲染出图像到屏幕。
js加载时间线
现代浏览器为了更好的用户体验，渲染引擎将尝试尽快在屏幕上显示的内容。它不会等到所有HTML解析之前开始构建和布局渲染树。部分的内容将被提前解析并显示。也就是说浏览器能够渲染不完整的dom树和cssom，尽快的减少白屏的时间。
外链放置的先后顺序有讲究！假如我们将js放在header，js将阻塞解析dom，dom的内容会影响到First Paint，导致First Paint延后。所以说我们会将js放在后面，以减少First Paint的时间，但是不会减少DOMContentLoaded被触发的时间。
浏览器遇到无法解析的css？
浏览器什么都不做，忽略错误的代码，继续执行下去。
4、五种选择器
-
统配选择器 *
-
标签选择器 .class
-
id选择器 #id
-
属性选择器 （节点内含有value属性） [value]{}
在前面可以加上标签，来精准匹配，或者不加，只要符合[]括号内的条件，就会进行样式渲染；
^代表开头为#的属性；$代表结尾为.jpg的属性；
-
伪类选择器：不基于标签和属性定位元素；两种伪类，状态伪类（某种状态下才会触发样式）、结构性伪类
<a href="http://example.com"> example.com </a> <label> 用户名： <input type="text"> </label> <ol> <li>你猜</li> <li>这是</li> <li>什么</li> </ol> <style> /* 默认状态 */ a:link { color: black; } /* 访问过 */ a:visited { color: gray; } /* 鼠标略过 */ a:hover { color: orange; } /* 鼠标点击 */ a:active { color: red; } /* 触发任意标签的focus状态 */ :focus { outline: 2px solid orange; } /* first-child 第一个子节点 */ /* last-child 最后一个子节点 */ /* em 相对于当前对象内文本的字体尺寸 */ li { list-style-position: inside; border-bottom: 1px solid; padding: 0.5em; } li:first-child { color: coral; } li:last-child { border-bottom: none; } </style> -
选择器组
取消标签自带的默认边距，或者要选中的属性，都可以用逗号相连
body, h1, url, ol, li { margin: 0; padding: 0; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
5、颜色
hsla(色相，饱和度，亮度， 透明度)百分率
rgba(红，绿，蓝，透明度)0-255
#红 绿 蓝 透明度 00-ff
6、字体
在设置的字体后，要加上通用的字体，以防用户浏览器没有设置字体；
英文字体要写在中文字体前，css文件是一个个字符读取的，以防浏览器展示中文字体的英文。
h1 {
font-family: Optima, Georgia, serif;
}
使用Web Fonts字体放在服务器上
在网站生成css字体链接时，将要使用的字裁出来，将字体包压缩到最低。
format：浏览器是不能根据字体url后缀去自动识别字体格式的，所以使用format属性来帮助浏览器识别字体格式。
字体格式：woff、truetype、svg
/* 使用font-face从浏览器上下载字体文件 */
/* 中文字体资源包比较大，将需要用到的字符拆出来 */
@font-face {
/* 给下载的字体命名 */
font-family: "Megrim";
src: url('http://cdn.repository.webfont.com/webfonts/nomal/149644/45803/62dfea9bf629d801648b387f)format('woff2');
}
h1 {
font-family: Megrim, Cursive;
}
font-size
- 关键字：small medium large
- 长度： px em
- 百分数：相对于父元素字体大小
font-style正常是normal，斜体是italic
font-weight字体粗细 100-900，不是所有字体都设置了9个自重样式！
line-height行高
letter-spacing字间距
em
em 相对于当前对象内文本的字体尺寸；可以作用在width、height、line-height、margin、padding、border等样式的设置上。浏览器中的文本一般默认为16px = 1em，可以直接改变 body 内的font-size，使子元素的em随着变化。
本身设置了font-size，看自身；自身没有，看父元素；
常用于设置文字边框。
控制段落文字的换行和空白
white-space
- nomal 只保留一个空格
- nowrap 不保留，不换行
- pre 保留
- pre-wrap 保留空格，自动换行
- pre-line 合并空格，保留换行
7、CSS权重
①id 唯一性（不能与其他选择器叠加样式，可以用style和！important，主要看优先级）
②若多个class并列在一起，写在css里靠后的样式会重写之前的样式
8、CSS继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值。
initial（初始值）
box-sizing：
元素的总高度和宽度包含内边距和边框(padding 与 border)
content-box：容器加上padding和border，但width保持不变。（默认值）
border-box：边框和内边距的值是包含在 width 内的
inherit:指定box-sizing属性值，从父元素继承
例如，box-sizing无法继承，那设置通配符*为inherit，其他标签可以再次设置覆盖属性值。
9、CSS求值过程
计算值和使用值的区别？
resolving:通过计算可以得到的数值（计算值）
formatting:计算不能得到的数值，需要放在实际场景中才能算出（使用值）
10、布局Layout
常规流、浮动、绝对定位
width
height
padding
border
可以通过设置边透明，来制作三角形。
margin
当margin左右边距皆为 auto时，容器会水平居中
margin collapse
margin间距会融合，取最大边距。
在两个容器外分别套上一层div，解决margin融合
box-sizing: border-box;
通配符内使用border-box，将padding和border算在width:100%内
块级&&行级
行级可以通过display:block转换为块级；
display属性
inline-block ,可以理解为图片，可以和文字放在一行，但是不会被拆分为多行。里面的内容生成了一个块级的盒子。
行级排版上下文
长单词自动换行，使用 overflow-wrap: break-word
块级排版上下文
Overflow
控制内容溢出元素框时，在对应的元素区间内添加滚动条。
overflow属性有以下值：
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 超出的内容不可见 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
注意: overflow 属性只工作于指定高度的块元素上。
Flex Box
justify-content：摆放样式
align-items：子容器对齐的标准
flex-grow：设置比例瓜分剩余空间
flex-shrink：空间不够的收缩能力
flex-basis：没有伸缩的基础长度
Grid布局
grid line网格线
使用线编号
grid-area网格区域
grid布局分为容器属性和项目属性；
columns 列（从上到下）
rows 行（从左到右）
网格线，从上到下，从左到右，都是从1开始命名；
容器属性：
1、行列宽 grid-template-~
grid-template：areas、rows、columns三个属性的简写
grid-template-columns 列（从上到下），也可理解为列宽
grid-template-rows 行（从左到右），行宽
为了表示网格比例，使用fr关键字(fraction 的缩写，意为"片段”)
grid-template-columns: 100px 100px 100px; // 显示为三列，每一列宽度100px
grid-template-columns: 30% 100px 100px; // 也可以使用百分比
grid-template-columns: repeat(3,100px); //重复
grid-template-columns: repeat(auto-fill,100px);// 属性auto-fill，单元格自动填充容器
//fr
grid-template-columns:repeat(4,1fr); // 宽度平均分成四等份
grid-template-columns:1fr 2fr 3fr; // 列宽这样是分成6份各占 1 2 3 份
//伸缩尺寸的上下线 => minmax()
grid-template-columns: 1fr minmax(150px，1fr); // 第一个参数最小值,第二个最大值
grid-template-columns: 100px auto 100px;//auto自动分配
//定义网格线别名
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
2、行列间隔 gap
column-gap、row-gap、gap
3、区块命名 grid-template-areas
4、区块排序 grid-auto-flow
- row
- 多的格子从左到右陈列。默认值。
- column
- 多的格子从上到下排列。
- dense
- 空的格子被填补。
可以指定区块的grid-column，将某一行空出来；在此基础上，使用dense可以填补特意空出来的区块，使区块排序不同。
5、区块justify-items(水平方向)/ align-items(垂直方向)
place-items : start end； 这是两个属性的简写
start end center stretch
6、容器justify-content (水平方向)/ align-content(垂直方向)
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
//水平方向
align-content: start | end | center | stretch | space-around | space-between | space-evenly; // 垂直方向
7、grid-auto-columns / grid-auto-rows
用来设置多出来的区块宽和高
网格线属性：
1、规定区块的四条网格线 grid
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
- grid-column(1和2的简写形式)
- grid-row(3和4的简写形式)
2、矩阵表示区块grid-template-areas
3、区块内容justify-self / align-self / place-self
start end center stretch
float浮动
使用float，实现图片文字混排的效果。（最常用的地方）
position属性
往上层找非static属性的元素，作为定位祖先
fixed滚动的时候，元素会固定在指定的区域，用于导航栏
粘性定位sticky
sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合： sticky能够形成"动态固定"的效果。比如，百度新闻首页的导航栏，初始加载时在自己的默认位置（relative定位）；滚动条下滑变成固定定位；页面滚回去又会变成相对定位。
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位。
