CSS 知识点汇总

一、语法

常见事件

1、表单事件：

onblur失焦、onchange表值变化、onfocus聚焦、onselecet选择文本、onsubmit表单提交

2、window事件（疑问点：与框架中钩子函数的区别）：

onerror错误发生时运行的脚本、onload页面结束加载运行的脚本  

3、Mouse 事件

onclick点击事件、onmousemove鼠标移动触发的事件

标签分类以及常见的标签

1、标签种类：

• 行内标签、块级标签、行内块标签分别对应inline、block、inline-block
• 行内标签不可以设置宽高、不可以设置上下边距、由于显示盒子会根据内容撑开宽高所以不会换行显示，块级标签默认独占一行,内容撑满宽度会换行显示
• 行内标签设置高度通过line-height 属性进行设置
• 块级标签宽度继承父级标签宽度，
• 行内块标签可以设置宽高

2、常见的标签

• 块级标签：h1、p、ul、div、form
• 行内标签：span、br、a、img
• 行内块标签; img、inpu

BFC

触发BFC的方式（一下任意一条就可以）

• float的值不为none
• overflow的值不为visible
• display的值为table-cell、tabble-caption和inline-block之一
• position的值不为static或者releative中的任何一个

普通文档流布局规则

• 浮动的元素是不会被父级计算高度
• 非浮动元素会覆盖浮动元素的位置
• margin会传递给父级
• 两个相邻元素上下margin会重叠

BFC布局规则

• 浮动的元素会被父级计算高度（父级触发了BFC）
• 非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）
• margin不会传递给父级（父级触发了BFC）
• 两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）

盒里面元素水平垂直居中

• 利用定位+margin:auto
• table布局，设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中
• 弹性布局
• grid网格布局

两栏布局、三栏布局

两栏布局

a.解决方案 

• 使用 float 左浮左边栏
• 右边模块使用 margin-left 撑出内容块做内容展示
• 为父级元素添加BFC，防止下方元素飞到上方内容

b.解决方案

• 弹性布局 align-items: stretch、align-items: flex-start

三栏布局

a.解决方案;  两边使用float, 中间使用margin

b.解决方案：两边使用absolute, 中间使用margin

c.解决方案：

• 仅需将容器设置为display:flex;，
• 盒内元素两端对其，将中间元素设置为100%宽度，或者设为flex:1，即可填充空白
• 盒内元素的高度撑开容器的高度

弹性盒模型

容器内属性

• flex-direction 设置主轴排列方向 row   column  row-reverse  column-reverse起点反转
• align-content：多根交叉轴对齐，只有一根轴不生效
• align-items: 交叉轴对齐
• justify-content：主轴对齐
• flex-flow flex-direction 和 flex-wrap 简写
• flex-wrap  设置主轴排列的元素是否可换行，默认nowrap、wrap换行、wrap-reverse反转换行

回流与重绘

回流操作：几何发生改变

• 添加或删除可见的DOM元素
• 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
• 页面一开始渲染的时候（这避免不了）
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
• 元素的位置发生变化

重绘操作：与几何无关属性发生改变

• 颜色的修改
• 阴影的修改
• 文本方向的修改

预编译处理器

css 预编译语言的三大优秀预编译处理器： sass(Scss)、less、stylus

• 父级选择器&
• 变量声明@
• 混入

positation

• absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
• fixed ：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
• relative：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。（待理解）
• static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。（待理解）
• inherit：规定应该从父元素继承 position 属性的值。

overflow

visible、hidden、scroll  不隐藏、隐藏、以滚动条形式隐藏