1.css常见选择器

• id
• class
• 标签
• div p 后代选择器  
• div > p 子带选择器
• div+p 相邻选择器 div相邻的右边的第一个  同级别
• div～p 兄弟选择器 div后面所有的p  同级别
• div, p 分组选择器（两个都选择）
• 伪类关键字 选择器  : hover {} 不是真实存在一个样式 划过去加一个 （优先级和类一样，也可以像类一样写多个）
• 伪元素关键字 选择器 ::或：  div::after{}  div   允许你对被选择元素的特定部分修改样式
• 属性选择器 div[a]

2.css优先级别

import>内联>style link >id > class 伪类 属性选择器 >元素 伪元素>通配符 > 继承 > 浏览器默认属性

3.float

元素浮动了 就脱离文档流，就不占空间了

浮动有一个塌陷方式

解决方案（清除浮动）

1.父元素创建bfc overflow

2.父元素float

3. 同级写一个空白块级标签div  class= clear：both

3.main::after {content:‘‘; display:‘block‘; clear:both} main是父元素class

4.已知父元素高，加一个高度就可以

4.定位position

static 默认的

absolute 相对自己的祖先元素非static 空间释放

relative 相对于自身 空间不释放

fiexd 相对于浏览器 空间释放

sticky 粘性定位 吸顶效果

5.盒模型

标准盒模型（默认）

box-sizing: content-content；

怪异ie盒模型（ie6 以下 不设置DOCTYPE声明文档内省）

box-sizing: border-content；

6.外边距合并

兄弟元素合并大的外边距

父子元素合并 外边距就合并大的

解决外边距方式

1.父元素加overflow：hidden/auto

2.父元素浮动 父元素position 不为static和relative 加边框

3.子元素浮动 子元素position 不为static和relative 

BFC 块级格式化上下文

有自己的一套渲染规则

7.重排与重绘（回流）

重排：dom结构变化，浏览器重新计算元素的几何属性

窗口变化，文字大小，内容，宽高。（整体结构变化）

重绘： 一个元素的外观改变，但没有改变布局（宽高）

outline 背景色 vesibility（位置还在）（input内输入）

回流：当浏览器发现某个部分发生变化影响了布局，需要倒回去重新渲染。

8 display属性

flex table grid table-cell 

9.显示隐藏

display： none block （物理位置不占用）

opacity： 0 1 （物理位置占用）

vesibility：hidden visible（物理位置占用）（这个元素不能被绑定事件）

原文：https://www.cnblogs.com/-constructor/p/12364813.html