这是我参加[第五届青训营]伴学笔记创作活动的第2天
本堂课重要内容
- 了解CSS的概述、选择器和工作原理，设置文本样式
- 了解CSS布局，比如盒模型，flex布局，grid和定位
CSS
CSS有选择器，选择器中有一条条的声明，一条声明由选择器和属性值构成，
css在代码中的位置有三种：
- *外联 -
<link rel="stylesheet" href="./link.css" type="text/css" > - 嵌入-
<style></style> - 内联-
<p style=""></p>
CSS如何工作
选择器
常见的选择器有：通配、标签名、类名或id（.或#）、属性、伪类
属性选择器：input[disabled/type=""]
属性选择器不一定寻找完全匹配的，可以使用^/$=来匹配指定内容开头或结尾的。
伪类选择器：
- 状态伪类--某一元素处于某一状态，最常见的是a标签的四个状态，（必须按固定顺序），还有input的focus状态
- 结构伪类--DOM节点在DOM树中的位置，最常见是li标签中first-child和last-child
也可以多个选择器组合使用，我给自己编了一个顺口溜以便记忆：同时满足就紧挨，后代需要敲空格，亲子组合知辈分，兄弟相似如三角，相邻如同1+1
多个选择器共用同一个样式使用","隔开
选择器权重
选择器的特异度：分别计算id,(伪)类,标签选择器的个数，分别代表百分位，十分位和个位的数字。
这个突然能联想到他们所说什么id选择器的权重是100之类，这样讲解感觉更能理解，他们权重代表某个数字的含义。
继承：某些属性会自动继承其父元素的计算值，一般盒模型相关的属性无法继承。如果想要继承需要通过显示继承的方式，可以在通配选择器中指定需要继承的不可继承属性设值为inherit。
其他需要注意的属性
1.颜色RGB/HSL
2.字体
font-family需要最后添加以下某一种通用字体族，并且英文字体放在中文字体前面，因为部分中文字体包括字母，这样不同浏览器渲染时能够正确
@font-face{font-family: ;src：;}--使用web fonts
font:font-style font-variant font-weight font-size/line-height font-family;
font-size和font-family的值是必需的,从可读性来说line-height也是需要的
3.空格换行white-space
overflow-wrap
调试css样式除了F12调试工具外还可以使用Ctrl+Shift+I（windows）快捷键
CSS布局
常规流或文档流，浮动，绝对定位
盒模型
padding中间隔使用百分数所对应的值是对于容器宽度
border:border-width border-style (required) border-color
将盒子的长宽为0，四条边框为不同颜色后可以设置由三角形组成的不同形状
块级VS行级
| 比较面 | 块级 | 行级 |
|---|---|---|
| 是否并排 | 不和其他并列 | 同行或多行 |
| 标签 | body,article,div,main,section,h1-6,p,ul,li等 | span,em,strong,cite,code等 |
| 更改方式 | display:block | display:inline |
| 排版上下文 | BFC | IFC |
盒子是css的概念，元素是html的概念，虽然都可以说块级元素或块级盒子，但还是略有不同
dispaly:inline-block本身行级，可放行盒，可设宽高；作为整体不会拆散成多行
flex box
纵轴justify-content:flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;
横轴align-items:stretch|center|flex-start|flex-end|baseline|initial|inherit;
这三个都可以缩写成flex： -grow -shrink -basis;
gird
1.开启网格 display:grid | inline-grid;
2.划分网格然后填充一定数量的格子
- grid-template-rows:100px 1fr 1fr 定义每一行的行高。
- grid-template-columns: 100px 1fr定义每一列的列宽。 3.通过网格线来划定区域，从1开始横竖进行标记 grid-area:1/1/2/3 文字环绕图片，将图片设置float
position
static|relative|fixed|absolute|sticky
