关于CSS

额，我作为菜鸟对于CSS的浅理解是这样的：

（选择器1）{

          （选择器2）：属性值/声明

}

外链

就是把CSS写在一个单独的文件，用一个<link>标签把它引入页面里面

嵌入

就是直接把CSS写到<style>标签里面

内联

就是把CSS用style="...."，写到当前标签里面

一些选择器

通配选择器、id选择器、类选择器、属性选择器、伪类选择器（状态伪类：当具有某种状态才选择；结构伪类：根据DOM节点在DOM树中的位置做选择）

组合

直接组合// AB //满足A和B
后代组合// A B //当A为后代，选择B
亲子组合// A>B//当B为A子元素，选择B
兄弟选择器//A～B//当B在A后且与A同级，选择B -相邻选择器//A+B//当B紧跟A，选择B

选择器的组

可以用“,”把选择器隔开形成一个选择器的组

（选择器),(选择器),(选择器),(选择器),(选择器){

          （选择器2）：属性值/声明

}

为文字设置颜色

rgb函数

#xxxxxx（16进制表示）

rgb(x,x,x)（“x”取值0～255）

HSL模型

H指色相，0-360

S指饱和度，0—100%

L指亮度，0—100%

hsl(x,x%,x%)

除了以上方式，你还可以简单粗暴地使用关键字

透明度

在16进制中加在最后两位0-255

在rgba、hsla中加在最后0-1

字体

font-family // 你可以写多个，根据实际情况和先后顺序选择，通常来说以防万一，会在字体最后写上通用字体族，英文字体放在中文字体前面

使用Web Fonts

font-family:"字体";
src:
url(一段链接....woff2)format('woff2');

font-size // 字体的大小

关键字 small 、medium 、 large
长度 px 、 em
百分数相对于父元素字体大小

font-style // 设置斜体

italic 斜体

font-weight//设置字体粗细

取值可以从100-900（400-normal 700-bold）如果没有系统会取一个最接近的值

line-height//行高，也就是基线距离

text-align//对齐方式

left center right justify（两端对齐）

spacing//间距

字母间距：letter-spacing 单词间距：word-spacing

text-indent//文字缩进

text-decoration//文字装饰

none、 underline 、line-through 、 overline

white-space//空格

normal 合并多个
nowrap 不换行
pre 保留所有
pre-wrap 能显示下的情况下不换行
pre-line 合并空格，保留换行

调试CSS

ctrl+shift+I（win） cmd+opt+I（Mac）

选择器特异度

#id（1）.类（2）E标签（2）

高优先级会覆盖低优先级里的内容

继承

某些属性会自动继承父元素的计算值，除非显式指定一个值

显式继承例

*{
box-sizing: inherit;
}

布局

常规流、浮动、绝对定位

设置属性值时，依照从上开始，顺时针的顺序

对于content，容器有指定高度时，百分数才生效。

对于padding，百分数相对于容器的宽度。

对于border，有三种属性

border-width
border-style
border-color 四个方向可以单独设置

对于margin，百分数相对于容器的宽度，可以用auto来实现朴素的水平居中，垂直方向上margin会合并

box-sizing：border-box

宽高变为了border-box的宽高

overflow//溢出 visible（溢出显示）hidden（溢出隐藏）scroll（溢出滚动）

块级

不和其他盒子并列摆放

适用于所有盒模型属性

行级和其他行级盒子放在一行或拆开成多行

盒模型中的width、height不适用

display属性

block 块级盒子
inline 行级盒子
inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none排版时完全被忽略

行级排版上下文

只包含行级盒子的容器会创建一个IFC

IFC内的排版规则

盒子在一行内水平摆放
一行放不下时，换行显示
text- align决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动（float）元素

块级排版上下文某些容器会创建一个BFC

根元素
浮动、绝对定位、inline-block
Flex子项和Grid子项
overflow值不是visible的块盒
display：flow-root BFC内的排版规则
盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠

Flex Box是一种新的排版上下文

它可以控制盒子的

摆放顺序
摆放的流向（右左上下）
盒子的宽度和高度
水平和垂直方向的对齐
是否允许折行

flex-direction//控制子元素的摆放方向

row 从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

justify-content//主轴的对齐方式

flex-start 左对齐
flex-end 右对齐
center 居中
space-between 前后顶满，平均空格
space-around 两头空白少，中间空白多
space-evenly 平均分配空格

align-items//侧轴对齐方式 -flex-start 上对齐

flex-end 下对齐
center 居中 -stretch 拉伸填满
baseline 文字基线对齐

align-self、order//设置单个元素的对齐方式

Flexibility//设置子项的弹性 -flex-grow 伸展能力

flex-shrink 收缩能力
flex-basis 基础长度

Grid布局

display：Grid生成一个块级的Grid容器
使用grid-template把容器分成网格
设置每个子项占据的行和列 columns划分列 rows划分行

grid-area：x/x/x/x；（右上左上右下左下）

position属性

static 默认值，非定位元素
relative 相对于自身原位置偏移，不脱离文档流
absolute 绝对定位，相对于非static祖先元素定位
fixed 相对于视口绝对定位

菜鸟的不完全笔记之CSS