CSS笔记

1. 选择器优先级

行内样式>id选择器>类选择器>标签选择器，!important权重最高

2. 复用和继承

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

3. 布局

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

4. 布局相关技术

常规流、浮动、绝对定位
常规流：行级、块级、表格布局、FlexBox、Grid布局

5. 盒模型

内容区域content（width、height）+ 内边距区域padding +边框区域border + 外边框区域margin
使用margin:auto水平居中

6. box-sizing的属性定义了如何计算元素的总宽度和总高度，分为content-box和border-box

在CSS盒模型中，盒子宽度和高度会加上设置的边框和内边距值，默认content-box。border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。

7. overflow属性：visible、hidden、scroll

8. 块级盒子和行级盒子（内联盒子）

块级盒子：不会和其他盒子并列摆放，适用所有的盒模型属性
行级盒子：和其他行级盒子一起放在一行或拆开成多行，盒模型中的width、height不适用
块级元素：生成块级盒子，比如body、artical、div、main、section、h1-6、ul、li等，display：block
行级元素：生成行级盒子，比如span、em、strong、cite、code等，display:inline
display属性：block、inline、inline-block、none

9. 行级格式上下文IFC

只包含行级盒子就会创建IFC
排版规则：盒子在一行内水平摆放，一行放不下换行显示，text-align决定一行内盒子的水平对齐，vertical-align决定一个盒子在行内的垂直对齐，避开浮动元素

10. 块级格式上下文BFC

某些容器会创建一个BFC：
·根元素
·浮动、绝对定位、inline-block
·Flex子项和Grid子项
·overflow值不是visible的块级
·display：flow-root

BFC内的排版规则：
盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠

11. Flex Box

一种新的排版上下文
可以控制子级盒子的摆放的流向、摆放顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许折行。
创建flex布局：display:flex或inline-flex
flex:flex-grow、flex-shrink、flex-basis

12. Grid布局

display:grid使元素生成一个块级的Grid容器
使用grid-template相关属性将容器划分为网格
设置每一个子项占哪些行/列

13.float浮动

可以用于图片排版

14. position属性

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