这是我参与[第五届青训营]伴学笔记创作活动的第2天。本堂课的重点知识主要讲了CSS是什么、CSS的语法以及其与HTML的联系和CSS的各种元素意义与用法。
CSS用来定义页面的样式 CSS本身是由一条条样式规则组成 样式规则：选择器 属性值 声明
html负责内容，css负责样式
外链 将css放在单独的一个文件里，用link标签去进行引入*（推荐用，能让内容和样式分离）*
嵌入 将css样式标签嵌入进代码中
内联 直接讲标签属性写在style里（不太推荐，样式和具体某一个标签绑定起来）（这样就不需要写选择器）
css一般放在head里的title下一个标签中，给body中的内容进行样式定义
浏览器先加载html，再解析html，创建dom树和加载css一起，然后css加载完要解析css，然后再给dom树的渲染树，再进行页面的展示
①选择器：找出页面中的元素，以便给他们设置样式。
使用多种方式选择元素：
按照标签名、类名、id
按照属性
按照dom树中的位置
通配选择器：
<style>
*{......
......}
</style>
A.
标签选择器
id选择器（常用）：#设置的id名 例 id=“logo”，#logo{...}
类选择器（常用）：这一般是多个标签等样式较为通用的时候用，一般用 .设置的类名 例：.done{......} <li class="done">...</li>
属性选择器：例如input里有disabled，则style里可以用 [disabled]{......} 或者input的type="password"，则style里可以input[type="password"]{.......} 或者匹配内容，例如a[href^="#"]{......}、a[href$=".jpg"]{......}
B. 伪类：不基于标签和属性定位元素，通常有 状态伪类、结构性伪类。
状态性的伪类：不是具体的指某一个元素，还要让这个元素处于某一个状态才能被选中，比如链接有访问和没访问过，还有鼠标移到或者没移到。这个能让访问过的链接变色之类的，鼠标移过去变色，鼠标按下去变色之类的，还有输入框输入时变色之类的。link（链接原始态），visited（访问过态），hover（鼠标移动到目标上态），active（鼠标在目标按下态），focus（输入框被点击要输入态）
结构性的伪类：例如父子级中第几个变化可用。
C.
组合：
例如：标签选择器+类选择器 例如 input.error{........}
直接组合：AB 满足A同时满足B 例如：input:focus
后代组合：A B 选中B，如果他是A的子孙 例如：nav a ←所有a标签出现在nav（nav本身也是一个标签）下的都会被选中
亲子组合：A>B 选中B，如果他是A的子元素 例如：section>p ←section下的直接子元素p标签才会被选中。
兄弟选择器：A~B 选中B，如果它在A后且和A同级 例如：h2~p ←选中h2后的所有p标签。且h2和p都在同一个父级下，p在h2下才会选中p。
相邻选择器：A+B 选中B，如果他紧跟在A后面 例如：h2+p ←h2紧跟的p标签才会选中，后面的p标签不会被选中
D.
选择器组：选择器,选择器,选择器,......{......}
例：[type="a"],[type="b"],......{......}
②格式化文本内容
A.
颜色（RGB）：rgb(..., ..., ...)(三个值都是0~255)或#......（16进制写法）
颜色（HSL）：色相（H）是色彩的基本属性，范围0~360，饱和度（S）是指色彩鲜艳程度，范围0~100%，亮度，范围0~100%；所以例：hsl（..., ...%, ...%）
颜色：直接指定颜色值，例：blue，white，......
透明度（alpha）（一般不强制需要写）：例：rgba(..., ..., ..., ...) 或 hsla(..., ...%, ...%, ...) 或 16进制写法也能。
B.
字体
font-family：通用字体族（有这些元素后设备会从电脑的字体库自动匹配对应类型的字体进行显示）：serif（衬线体）和 sans-serif(常用)（无衬线体）、cursive（手写体）、fantasy（夸张一些的）、monospace（等宽字体）。（不同设备上访问的字体库有限，所以一般是多字体，用层级关系来进行展示，所以也叫font-family）
中英文混排时尽量英文写在中文前，因为浏览器渲染时按字符顺序来找字体，避免中英文只显示中文字体的问题。
使用web fonts：可以用src:url（...）format（'......'）到某一个连接中找对应文本的字体并去尝试下载这个字体进行引用显示。（一般用于渲染blogs）
中文用web fonts会比较大，所以尽量裁切出所需要的文本内容所需要的字体进行体量减小。
font-size：关键词：small，medium，large。长度：px，em。百分数：相对于父元素字体大小（比如section 和 section.note，section.note就会根据section的字体大小进行百分化形成改标签下的字体大小）。
font-style（字体效果）：normal，italic（斜体）。
font-weight(字重，字体的粗细)：范围100~900 400效果同为normal，700效果同为bold（←和字体本身相关，有些不一定是这样）。
line-height(行高，默认行高一般不适合阅读，所以基本要设置)：一般指两行字体底线的差距高，没有单位时，一般行高会默认为字体大小的所给数字倍数。例如字体大小20px，给的行高为1.6，则实际为32。（1.6这个行高是推荐，当然有更好的肯定更好）
以上属性都可以浓缩在font属性里，font里都可以设置。
C.
排版
对齐：castline：里面元素有居中、居左、分散等（对最后一行可能不生效）
文字间距：letter-spacing word-spacing
文本装饰：可以加上下划线，删除线等
html对空白符：多个空格和换行会合并成一个，可通过white-space（内有normal、nowrap（强制不换行）、pre（保留所有，写的什么样就什么样）、pre-wrap（行内显示不下会自动换行，会保留空格）、pre-line（需要合并空格，但保留换行）这些选项）进行控制
ctrl+shift+I可在浏览器内选元素进行调试。（便于学习别人好的效果）
深入css
选择器优先级问题：根据特异度的值来决定谁生效。（特异度：根据选择器的id、伪类、标签数来进行数值的判定 例如id有1个，伪类2个，标签2个，则该选择器的特异度为122）
例如 class="btn"和class="btn primary"，style里 .btn{......}和 .btn.primary{......}，由于.btn.primary的特异度高，所以.btn.primary有的属性会覆盖掉.btn里的。
继承：某些属性会自动继承其父元素的计算值，除非显示指定一个值
例如：<p>里有<strong>，则<strong>......</strong>所显示的东西会继承<p>......</p>的属性
和文字相关属性都能继承（color、font-size等），盒模型有关的都不可继承
显示继承：例如：*{box-sizing:inherit;} html{box-sizing:border-box;} .some-widget{box-sizing:content-box;} （inherit让原本不可继承的变成可继承的）
初始值：每一个属性都有一个初始值，可食用inital关键字显示重置为初始值。
css的求值过程（这个过程很长） 声明值通常都是一组（0~多个）。 cascading来按照来源等等进行选出优先级最高的一个属性值（这个值为层叠值）。
布局（Layout）：确定内容的大小和位置的算法。依据元素、容器、兄弟节点和内容等信息来计算。
布局相关技术：常规流（有块级和行级的规则）、浮动（可做图片和文字的点击效果）、绝对定位（盖在常规流上，不会对常规流有影响）
常规流：行级、块级、表格布局、FlexBox、Grid布局。
B.
盒模型：margin（外边距。和其他容器的边距）最外层、border（边框）、padding（外边距）、content（内边距）是最里层、width（content box宽度，取值为长度、百分数、auto）和height（content box宽度，取值为长度、百分数、auto，容器有指定的高度时，百分数才生效）。
padding-top、left、right、bottom→padding可设一、二、四个值（百分数相当于容器宽度）
border可设置边框的粗细、虚实、颜色
border-width（设置四个方向边框的粗细）、style（实线还是虚线等）、color（颜色）三个属性 border-top、right、bottom、left四个方向 也可以有border-left-width、color等组合
当把容器高度和宽度都设置为0时，可以得到一个由四个三角形构成的正方形，通过将三边设置成透明可以得到一个三角形。（技巧）
margin也可以指定四个方向的边距，取值可是长度、百分数、auto（可使用auto水平居中）
margin collapse（margin垂直方向边距的合并，将上下边框的边距取最大作为边框中间边距）（有利有弊）
box-sizing:border-box（包含border和padding在内的宽、高）（更符合直觉，推荐）
overflow控制内容溢出，有visible（超出可看）、hidder（超出影藏无滚动条不可看）、scroll（超出影藏有滚动条可看）、auto（超出影藏无滚动条）
C.
块级vs行级
块级不和其他盒子并列摆放 行级和其他行级盒子一起放在一行或拆开成多行
使用所有的盒模型属性 盒模型中的width、height不适用
块级元素：生成块级盒子（body、article、div、main、section、h1~h6等）（display:block）
行级元素：生成行级盒子。内容分散在多个行盒中（span、em、strong、cite、code等）（display:inline）
diplay属性：block（块级盒子）、inline（行级盒子）、inline-block（只能放在一行里，不会被拆成多行）（本身行级，可放在行盒中。可以设置宽、高。作为一个整体不会被拆散成多行）、none（排版时完全被忽略）
常规流Normal Flow 行级排版上下文（IFC）：只包含行级盒子的容器会创建一个IFC。 IFC内的排版规则：盒子在一行内水平摆放。一行放不下时换行显示。text-align决定一行内盒子的水平对齐。vertical-align决定一个盒子在行内的垂直对齐。避开浮动（float）元素
块级排版上下文（BFC）：某些容器会创建一个BFC（根元素、浮动、绝对定位、inline-block、Flex子项和Grid子项、overflow值不是visible的块盒、display:flow-root;） BFC内的排版规则：盒子从上到下摆放。垂直margin合并。BFC内盒子的margin不会与外面的合并。BFC不会和浮动元素重叠。（可用第三个方法让两个盒子底边距不合并，给其中一个再加一层div变成两个不同的内外盒子即可）
css不允许一个盒子里既有块级又有行级，所以会将块、行分开排版。 块级和行级布局方式比较简单，css提出了更新的排版→Flex Box
D. Flex Box（单一方向布局，一维）（灵活，泛用）：一种新的排版上下文。它可以控制子盒子的摆放方向、摆放顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许拆行。 display:flex ←默认排版从左到右
主轴、侧轴 主轴水平（从左到右）、侧轴垂直主轴（从上到下）
justify-content{ flex-start：从左到右排，最右边留空格 flex-end：从右到左排，最左边留空格 center：居中排，左右留空格 space-between：最左、中间、最右排，缝隙插空格 space-around：三分居中，左中右排，左右空格一样多，缝隙插空 space-evenly：居中三分散开排，最左最右以及排版缝隙插空格 }
align-items{ flex-start：上条状图式 flex-end：下条状图式 center：中条状图式 stretch：条状图式，但是默认每个条高低和框高一样，填满 baseline：基于基准线条状图式 }
flexibility：可以设置子项弹性（当容器有剩余空间时，会伸展，容器空间不够时，会收缩） flex-grow：有剩余空间时伸展的能力 flex-shrink：容器空间不足时收缩的能力 flex-basis：没有伸展或收缩时的基础长度 例：.a{flex-grow：2;} .b{flex-grow:1;} ←这里的2、1不是指2比1空间分配，而是将原本空余的空间经过拉伸后a得到2比例的空间，b得到1比例的空间，这个2比1比例是基于剩余空间。 flex-shrink同理。
flex:1 flex-grow:1; flex:100px flex-basis:100px; flex:2 1 flex-grow:2; flex-shrink:1; flex:1 100px flex-grow:1; flex-basis:100px; flex:2 0 100px flex-grow:2; flex-shrink:1; flex-basis:100px; flex:auto flex:1 1 auto; flex:none flex:0 0 auto;
E.
Grid布局（二维方向布局）：从左到右，从上到下
display:grid（使元素生成一个块级的Grid容器，使用grid-template相关属性将容器化分为网格，设置每一个子项占哪些行/列）
相关属性：grid-template-column、rows；(可px，可auto，可%，可fr）
grid line网格线（写法例如：grid-rows-start:1; grid-column-start:1; grid-rows-end:3; grid-column-end:3;）
(也可这样写：grid-area:1/1/3/3;)
布局基本都可以用grid方式实现
float：写法：float：left（等等）; ←（float能做出图片被文字环绕的视觉效果，常用。仅此而已,现在grid都能等效实现大部分以前float功能）
position属性：static（默认值，非定位元素）、relative（相对自身原本位置偏移，不脱离文档流）、absolute（绝对定位，脱离常规文档流，相对非static祖先元素定位）、fixed（相对于视口绝对定位）
position:relative;（在常规流里面布局，相对于自己本应该在的位置进行偏移（但原本的位置也会占据，所以算占据了原本后位移后两个位置），使用top、left等设置偏移长度，流内其他元素当它没有偏移一样布局）
position:absolute;(脱离常规流，相对于最近的非static祖先定位，不会对流内元素布局造成影响)
position:fixed;（不怎么考虑，总是相对于窗口（当前可视区域）进行定位，例如滚动滚动条时，导航栏和返回顶部不会因为滚动条滚动看不到，而是吸附在导航栏该在的位置）
遵循规则排版，或者脱离常规流定位。可嵌套使用。
建议：充分利用MDN和W3C CSS规范。CSS新特性仍不断出现，多学习。
