1.BFC
（1）、BFC的成因
- 根元素或者其他包含它的元素
-浮动元素
-绝对定位元素
-内联块
-表格单元格
-表格标题
-*具有overflow ，且不是 visible 的元素
-diplay:inline-block/table-cell/table-caption/flex/inline-flex/grid/inline-grid
（2）BFC的特点/规则
-内部的box将会独占宽度，且在垂直方向，轮流排列
-box 垂直方向的间距由 margin 决定，但在同一个BFC的两个相邻 box 的 margin ，会出现*** 边距折叠 ****现象
-每个 box 水平方向上左边缘，与BFC的左边缘对齐，即使存在浮动，也是如此
-BFC 区域不会与浮动元素重叠，而是依次排列。
-BFC区域内是一个独立的渲染容器，容器内的元素和 BFC 区域外的元素不会形成干扰
-浮动元素的高度也参与到BFC高度计算中。
经典css题
1.两个元素，左侧元素浮动，固定宽度，如何让右侧元素自适应宽度，答：根据BFC 的规则，将自适应的元素添加overflow：hidden;属性
2.
3.边距折叠解决方法：将其中一个形成一个新的BFC，在其中一个元素添加一个父元素包裹，添加overflow：hidden；
2.背景、阴影、滤镜
background 非常常用的一个属性。
-X-color、-X-image、-X-repeat 图像的平铺方式、-X-attachment： scroll/fixed、-X-position、-X-clip、-X-size、-X-origin、-X-blend-mode
background的连续规则
background:color image repeat attachment position/size
阴影
box-shadow
offsetX 水平偏移
offsetY 垂直偏移
blur 模糊半径
spread 扩展距离
color 投影颜色
position 投影位置
text-shadow
offsetX 水平偏移
offsetY 垂直偏移
blur 模糊半径
color 投影颜色
3 .滤镜
filter 一共有十个函数
- blur 模糊
- brightness 两端
- contrast 对比度
- drop-shadow 阴影
- grayscale 灰度
- hue-rotate 色相旋转
- opaticy 透明度
- saturate 饱和度
- invert 反相
- sepia 褐色
4 .定位
属性
- fixed 相对于浏览器窗口定位
- absolute 相对于第一个父级元素不为static的元素定位
- relative 不改变文档流，直接基于原有位置切换
- static normal
- sticky css3 fixed 和 relative 切换
第二部分
css 的优先级是什么？
！important > 内联样式(style="") > ID选择器 > 类选择器 = 属性选择器 = 伪类 > 标签选择器 = 伪元素选择器
*****层级选择器
- foo bar 后代选择器，元素的后代元素
- foo > bar 子代选择器，元素的子代元素
- foo + bar 相邻同胞选择器
- foo ~ bar 通用同胞选择器
- foo，bar 并集选择器
- foo.class 交集选择器
*****条件选择器
:lang 具体语言标记的元素
:dir() 指定编写方向的元素
:has 包括指定元素的元素
:is 指定条件的元素
:not 非指定条件的元素
:where 指定条件的元素
*****状态选择器
:active
:hover
:link
:visited
:focus
*****表单
:valid
:invalid
:checked
*****结构选择器
:root 文档的根元素
:empty 无子元素的元素
:nth-child(n) 元素中指定顺序索引的元素。 odd/even
:nth-last-child(n) 倒序索引
:first -child 元素中为首的元素
:last-child 元素中为尾的元素
:only-child 仅有该元素的元素
*****属性选择器
[attr] 指定属性的元素
[attr=val] 属性等于指定值的元素
[attr*=val] 包括指定元素的元素
[attr^=val] 包括开头
[attr$=val] 包括结尾
*****伪元素
::before 在元素前加入
::after 在元素后面加入
::first-letter
::first-line
::backdrop 全屏模式的元素（Document.fullscreen）
::placeholder
*****flex 布局
flex ---- flexble box 弹性布局。
display:flex
*****容器属性
flex-direction 主轴方向
--row --- default
---column
flex-wrap 如果一个轴线排不下，如何换行
-nowrap --- default
-wrap
-wrap-reverse
-flex-flow 是以上两者的简写
-justify-content
-flex-start
-flex-end
-center
-space-between
-space-around
-space-evenly
-align-items
-center
-flex-start
-flex-end
- center
-baseline 项目的第一行文字对齐
-stretch 占满高度
*****项目属性
- order
- 属性定义项目的排列顺序，数值越小，排列越靠前，默认为0
- flex-grow
- 放大比例，剩余空间。默认为0
- flex-shrink
- 缩小比例，剩余空间，默认为1
- flex-basis
-定义在分配多余空间之前，项目占据的空间。
- flex
-- flex：1 是什么意思
- 如果直接赋值数字，flex：1 --- flex：1 1 0%；
- 如果给 auto，flex：auto --- flex： 1 1 auto
- flex：none flex：0 0 none；
*****动画和变换
transform，transition，animation
*****transform
变换，2d变换，3d变化
- transform
-- flat
-- preserve-3d
*****translate 平移
--translate（x，y）
--translate3d(x,y,z) -- translateZ(0)
*****scale 缩放
scale（x，y）
scale3d（x，y，z）
*****skew 扭曲
*****rotate 旋转
rotate(x,y)
rotate(x,y,z,a)
*****transition
--transition-property
-- all
-- none
-- string
- transition-duration
持续时间
-transition-timing-function
-transition-delay
*****animation
--name
动画名称
--duration
持续时间
-- timing-fuction 动画曲线
-- delay 延时
--播放次数
