文档流：
浮动：用于布局
给三个浮动的盒子加上一个父元素并设置宽高，以免影响其他的盒子和内容
margin:0 auto;居中
在盒子里插入图片：
1.为父元素设置宽高，给图片设置宽100%，图片会充满盒子
2.给盒子加上背景图片，并为背景图设置宽高，加上cover，覆盖
在父盒子里插入子盒子：由外到内布局：
先为父盒子设置宽高，再为子盒子设置，盒子中间有空隙
快捷键：
清除浮动：1
2.给父元素.box加上overflow：hidden；//里面的浮动元素会撑开父元素的高度
定位：
固定定位（fixed）：脱离文档流，根据浏览器窗口进行定位
position：fixed；
top:0;
right:0;
bottom:0;
蓝色盒子：先定位
黑色盒子：后定位
按照顺序应该是蓝色在下，黑色在上，就是按照默认顺序，如果不定义层级，谁先定位，谁在下面。
改变层级：可以改变蓝色盒子和黑色盒子的上下顺序
给.box5加上z-index:2; .box6加上z-index:1;
定位要跟着top值来定位，要不然没有用
相对定位（relative）：没有脱离文档流（根据自身来定位）
意义：单纯用相对定位是没有意义的。它的作用在于和绝对定位配合着使用的。
绝对定位（absolute）：口诀：子绝对父相对。
脱离文档流，根据已有定位元素的父元素进行定位
设置光标样式：
二级导航：
解决样式继承：用直接选择器>
找网站题目的logo方法：
背景图在css里找
常见问题：
1.CSS的引入方式有几种，各有什么优缺点？
行内：会使页面变的混乱，不容易查错
内联：使用方便，适用于小demo
外联：html和css分离，使页面更加整洁，适用于大项目
2.列举出你所学的基本CSS选择器？
通配符选择器
标签选择器
类名选择器
id选择器
其余是高级选择器
3.各种选择器的优先级是如何计算的？
根据权重
通配符是0<标签选择器1<类名选择器10<id选择器100
4.在选择器优先级相同的情况下，不同引入方式之间的优先级遵循什么原则？
行内引入优先级最高，其余就近原则
5.说说你对固定定位、绝对定位和相对定位的理解？
固定定位：脱离文档流，相对于浏览器窗口进行定位
绝对定位：脱离文档流，根据已有定位元素的父元素进行定位
相对定位：不脱离文档流，根据自身原本的位置进行定位
6.盒子模型由哪几部分组成的？
内容-内边距-边框-外边距
7.如何让一个盒子在网页中居中？
margin: 0px auto;
8.谈一谈精灵图的好处？
减少浏览器请求次数，减轻服务器压力
9.说出常见的几种图片格式，最少三种。
jpg png gif
10.列出你所学的关于背景图片的几种css？
background-repeat
background-attachment
background-position
background-image
字体加粗值：400-900之间
特效：
2D:
平移：可以为负值，单位px
transform：translateX(200px) translateY(200px);
简写：transform：translate(200px,20px);
transform:scalex(取值范围为0-1，超出范围则放大)
角度：单位：deg(度)可以为负值，无最大值
transform：rotateX() rotate();
倾斜：单位：deg(度)
transform：skewX（） skewY();
简写：transform：skew（45deg,45deg）;
原点变换（旋转）：支持top、left、right、bottom、center
transform-origin：left top;//左上角旋转
过渡：
transition-property:width,height,background-color;
// 指定过渡的属性
transition-delay:1000ms;//指定过渡延迟的时间，单位是毫秒
transition-duration：3s;//指定过渡的时间，单位是秒
transition-timing-function:cubic-bezier(0,1.05,.99,.02)//指定过渡时候的过渡效果，贝塞尔曲线。
transition：all 3s;//指定所有过渡
风车案例：
图片加圆角:border-ridius:10px;
动画：
定义动画的名字：animation-name
定义动画的延迟时间：anmination-delay
定义动画的持续时间：anmiation-direction
定义动画执行的效果（贝赛尔曲线）;animation-timing-function:linear;
定义动画的状态running（开始）、paused(暂停)：anmiation-play-state：running；
定义动画的执行次数：infinite无限次：anmiation-iteration-count：infinite；
定义动画的执行结束会返回来：anmiation-direction：alternate;
transform-style:preserve;让其子元素保持3D位置。
perspective:指定3D元素与视图之间的距离
backface-visibility：hidden;//指定元素背对着自己的时候
弹性盒子：
flex-wrap:wrap;//当父元素空间不足时,子元素会自动向下换行.
设置主轴方向：
flex-direction：column-reverse;//让子元素
设置横向方向为主轴：flex-direction：row-reverse；//改变主轴方向，让子元素改变反向排列
设置子元素在主轴方向上的对齐方式:
设置子元素在副轴方向上的对齐方式:
案例://设置在子元素里面的
align-items:strentch;//默认值如果子元素设置高度或设为auto，则会拉伸子元素。以适应父元素的高度。
设置子元素在主轴上的换行方式：
#parent{
设置子元素在主轴方向上的排列顺序:
设置子元素怎样放大来分配父元素剩余空间:
Sublime的快捷键:可以提高工作效率
#box>ul>li*3>p
.box${我是box$}*9
{}内容
+ 同级
> 子级
* 乘
$ 代表数字
排列组合
例子:
#box>ul>li*3
#box>ul>li*3+p
ctrl+D 选择相同元素
按住Ctrl 可以获取多个光标
Ctrl+shift+D 复制当前行
Ctrl+shift+上下键 调整当前行（可将当前行上下移动）
按住鼠标滚轮往下拖
Ctrl+/ 注释