移动端

移动端第一天

1、控制文本中的字母：text-transform
2、3d转换属性：3d旋转（沿着x轴或y轴进行旋转）3d平移（沿着z轴进行平移）
3、perspective(给父元素添加) transform-style:preserve-3d(元素本身添加)
4、animation-direction:alternate(交替进行)
5、animation-fill-mode（动画的结束状态）:如果没有设置，默认回到开始状态；forwards(让动画在结束状态停止)
6、animation-play-state(动画的播放状态) 默认是播放 可以取值paused

移动端第二天

1、saturation(饱和度) gradient(梯度) ease(速度变化的移动) skew(斜的) keyframes(关键帧) animation(动画片) skate(规定，状态) iteration(反复)
2、space-around(子元素均分对齐，边缘有空格) space-between(子元素均分对齐，边缘无空格) justify(整理版面) display(展现) fluid(流式) em(相对长度单位)
3、定义动画需要考虑动画由几个状态
4、定义动画执行的次数：animation-iteration-count:infinite;
5、定义动画的执行方向：animation-direction:normal/reverse/alternate;
6、定义动画结束的状态：animation-fill-mode:默认回到原点/forwards
7、动画的执行/播放状态：animation-play-state:默认播放/paused (配合鼠标事件使用)
8、css3私有前缀(兼容性处理)：
谷歌、苹果浏览器:-webkit-
火狐浏览器：-moz-(Mozilla)
IE浏览器：-ms-(微软)
欧朋浏览器:-o-
9、移动端：浏览器一般只需要兼容webkit内核即可
10、移动端布局：流式布局(百分比布局宽度自适应)
11、viewport(视口)是一个盛放网页的容器 默认是980px 可以缩放，类似网页和手机之间的一个中间商
12、width=device-width设置视口的宽度等于屏幕的宽度 initial-scale=1.0 初始缩放比为一倍(不缩放) user-scalable=no; 禁止用户缩放 maximum-scale=1.0（不缩放）minimum-scale=1.0（不缩放）
13、设置视口快捷键：meta:vp
14、流式布局特点：
盒子高度写死，宽度自适应，并不是100%还原设计图
小图片小图标文字大小一般写死
一般大图片 宽度自适应(100%)，高度默认等比例缩放
15、经典流式布局套路：
左侧固定，右侧自适应
右侧固定，左侧自适应(浮动元素写上面)
两侧固定，中间自适应(浮动元素写上面)
等分布局：边框会撑大盒子(box-sizing:border-box;)
移动端布局中:会给每个盒子都添加一个box-sizing:border-box;
16、浮动+overflow:hidden
17、触发了BFC的盒子：不会被浮动元素所盖住，会被浮动元素挤到一边去
18、京东移动端：
二倍图：设置样式手动除以2/图片也要手动除以2
a标签：-webkit-tap-highlight-color:rgba(0,0,0,0);(设置颜色为透明色去除a标签在移动端点击高亮的效果)/transparent
全局容器(container)宽高可以不用写，但是为了开发方便，可以设置一个高度
全局容器有一个最大宽度：640px（max-width:640px;）
全局容器有一个最小宽度(min-width:320px)

移动端第三天

1、clearfix (清除浮动) default (默认) flat (平面) itration (反复) justify (整理版面) space-around (子元素均分对齐，边缘有空格) space-between (子元素均分对齐 边缘无空格)
2、图层：在精灵图后面添加图层 alt +backspace
3、盒子与盒子之间层叠的现象用定位
4、脱标的元素宽高由内容设置撑开
5、一个元素固定定位 宽度就像对于浏览器了 所以需要设置最小宽度和最大宽度
6、固定定位不设置方位名词，默认在原来的地方呆着
7、类似input标签居中，以后就少设置行高 麻烦
8、行内元素设置上下margin和padding会失效
8、clearfix元素是给浮动元素的父元素设置
9、…给元素的父元素设置
10、字体会有默认的边距，所以最好给要设置字体的文本一个固定的高度，防止对后面的元素造成影响
11、移动端布局 倍数、视口、全局容器
12、flex布局(弹性布局、伸缩布局)（给父元素设置）
给父元素设置一个属性：display：flex;（此时父元素叫弹性盒子）
弹性盒子：
主轴：默认水平向右
侧轴：和主轴垂直
默认垂直向下

弹性盒子的布局规则：
在弹性盒子中的子元素默认会沿着主轴方向排布
设置主轴方向的对齐方式：justify-content:center;
设置侧轴方向的对齐方式：align-items:center;

给父元素设置
flex布局中的属性：
1、设置主轴方向：
flex-direction: row(默认水平向右)/row-reverse(水平向左)/column(垂直向下)/column-reverse(垂直向上)

**2、设置主轴对齐方式：
justify-content:**flex-start(向主轴开始方向对齐)/flex-end(向主轴结束方向对齐)/center(在主轴的中间对齐)/space-around(空白环绕 让空白环绕盒子显示)/space-between(空白只在盒子中间 只在盒子中间才有空白 两端没有)

2、设置单行侧轴对齐方式：align-items:flex-start(向侧轴的开始方向对齐)/flex-end(向侧轴的结束方向对齐)/center(居中对齐)/stretch(默认值 让子元素的高度拉伸显示如果需要看到拉伸的效果，不要设置子元素的高度 如果高度没写死 就会拉伸)
在弹性盒子中，他的子元素不会换行，如果子元素宽度之和大于父元素的宽度，此时会压缩显示**(死活不换行)**
flex布局换行相关的属性：
3、设置子元素是否换行**flex-wrap:nowrap(**不换行)/wrap(如果子元素一行放不下才换行)
默认有几行高度就等分成几份，子元素在上面

4、设置多行侧轴对齐方式
align-content:flex-start(向侧轴的开始方向对齐)/flex-end(向侧轴的结束方向对齐)/center(居中对齐)/stretch(默认值 让子元素的高度拉伸显示如果需要看到拉伸的效果，不要设置子元素的高度 如果高度没写死 就会拉伸 把所在行的高度占满)/space-around(空白环绕盒子显示)/space-between(空白只在盒子中间显示)
如果子元素没有换行，只有一行，就用align-items;如果子元素有多行，就用align-content

flex布局中给子元素设置的相关属性：
1、分配剩余宽高：flex:份数
特点：优先分配具体的数值，剩下的空间才会按照份数分配(很容易完成圣杯布局)
2、子元素的排序:order(默认是0):取值数字，数字越小 排在前面
3、设置单个子元素侧轴对齐方式：align-self:取值和单行侧轴对齐方式一样 flex-start(向侧轴的开始方向对齐)/flex-end(向侧轴的结束方向对齐)/center(居中对齐)/stretch(默认值 让子元素的高度拉伸显示如果需要看到拉伸的效果，不要设置子元素的高度 如果高度没写死 就会拉伸)

弹性盒子是一种全新的显示模式，没有行内块级行内块标准流非标准流
结构伪类选择器：n从0开始，1、2、3…
flex布局需要换行时，可以设置flex-wrap:warp; 然后可以给弹性盒子里的子元素设置强制宽度，注意不能设置flex:数字；这样不会换行

移动端第四天

1、响应式布局：一个网页能够适配不同的设备(检测设备用js)
原理：动态地根据当前屏幕的宽度，自动改变盒子的宽度，盒子的显示和隐藏
优点：开发成本较低 网页适配不同终端
缺点：代码多，网页加载速度较慢，一个页面需要适配不同终端，考虑情况多，开发效率慢
现状：国内不流行，国外多，简单的网页，可以考虑用响应式，复杂的网页一般不用；新建的项目，有可能也可以考虑使用响应式
2、响应式开发的屏幕分类：
第一刀：768px
第二刀：992px
第三刀：1200px
超小屏(手机)，小屏(平板)，中屏(大屁股电脑)，大屏(现代电脑)
3、媒体查询的介绍：
怎么根据屏幕的宽度改变元素的样式？
媒体查询：
语法：根据条件的是否成立控制里面的选择器是否生效
注意媒体查询只能控制选择器是否生效，但是不能提升选择器的优先级，媒体查询中可以写多个条件，条件之间用and连接
@media screen and (条件) {
选择器
}
条件：
1、min-width:样式生效的最小宽（当屏幕宽度大于或等于该宽度时，此时样式可以生效）
2、max-width:样式生效的最大宽（当屏幕宽度小于或等于该宽度时，此时样式可以生效）
3、width:样式生效的宽度：当屏幕的宽度正好等于该宽度时，此时样式可以生效

4、bootstrap:bootstrap依赖于H5和C3,js功能以依赖于jQuery
less(css预编译语言)
sass
bootstrap.css使用步骤：先引入文件，然后给对应标签添加一个类即可
学习bootstrap–>学习每一个类的含义
注意：在bootstrap中已经做了一些简单的样式初始化，一般开发中不需要引入其他的base.css
如果觉得bootstrap中的样式不好，此时可以通过自己的代码覆盖

5、bootstrap中的布局容器：
响应式布局.container
特点：1、在不同屏幕下有不同的版心，当移动端后，宽度100%
2、在布局容器中有左右默认的15px的padding
流式布局(fluid): .container-fluid
特点： 1、让盒子宽度自适应
2、默认有左右默认的15px的padding
抵消父元素左右15px padding的类： .row
原理：给子元素设置左右-15px的margin来抵消父元素的padding

5、bootstrap的栅格系统
底层原理：浮动，+ 宽度百分比设置 + 媒体查询
语法：.col-取值1-取值2
取值1：lg(在大屏及以上屏生效)
md(在中屏及以上生效)
sm(在小屏及以上屏幕生效)
xs(在超小屏及以上屏幕都生效)可以看作所有屏幕都生效，不设置效果的话，默认占满一行
取值2：表示份数

6、bootstrap的全局css样式阅读：
①排版中的对齐：
.text-left:左对齐
.text-center:居中
text-right:右对齐
②表格：.table(基本类) .table-striped(条纹状表格)
③按钮：.btn(基本类) btn-default(默认白色) btn-primary(蓝色) btn-success(绿色) btn-info(一般信息天蓝色) btn-warning(橙色警告) btn-danger(危险红色) btn-link(链接按钮)
按钮大小：btn-lg,btn-sm,btn-xm 默认是中按钮

响应式工具：(控制元素的溢出隐藏)
底层原理：媒体查询+display:none;
bootstrap类：
.hidden(所有屏幕都隐藏)
.hidden-lg只在大屏中隐藏
.hidden-md只在中屏中隐藏
.hidden-sm只在小屏中隐藏
.hidden-xs只在超小屏中隐藏

7、bootstrap的组件样式阅读(代码写好 要用直接拿过去用)
①字体图标:在bootstrap中已经内置好了

8、响应式项目的布局思路：
①先看有没有响应式的版心，如果有的话 设置container
②在响应式版心中分配每一个盒子的空间
③设置整体大模块是否有显示和隐藏，直接给大模块设置hidden相关属性即可

ctrl+shift+>
alt光标

aria-开头的属性；role属性，该属性可以直接删除 有sr-only类的标签删除

移动端第五天

1、less:css的预处理语言，在less中可以直接写css
2、浏览器并不认识less，所以需要手动将less文件转换为css
3、less的语法：
1、less的注释
css的注释/**/：在编译之后仍然存在
less的注释//:less的注释在编译之后就消失了(一般推荐使用less中的注释)
2、less中的变量: @变量名：变量值；
3、less中的嵌套：
后代选择器：通过嵌套的关系来表示后代
子代选择器：通过嵌套和>表示子代
并集选择器：通过逗号隔开，省略了父级选择器
交集选择器：&在less中表示当前这一级的选择器
链接伪类选择器：&:hover
伪元素：&::after
结构伪类选择器：&:nth-child(1)
4、less中的计算:配合rem布局使用
5、less中的函数：能解决重复的代码–》把重复的代码抽取成函数–》使用：在对应的选择器中使用函数
语法： .函数名() {重复的样式}
函数中可以传参
6、变量能替换一个值；函数可以替换多行代码

4、flex优先分配具体的数值，然后按份数分配，子盒子没设置高度，拉伸显示

5、rem布局：
1、em的认识：1em == 当前元素的font-size的大小
2、rem(root:根)：1rem = html标签的font-size的大小
3、屏幕越大，页面中元素的大小越大，屏幕越小，页面中的元素大小越小
4、布局原理：屏幕越大，html标签的font-size变大；屏幕越小，html标签的font-size越小
（结合媒体查询动态改变html标签的font-size大小）
5、rem布局里面的每个盒子都是等比例缩放的

6、使用rem布局进行适配：
1、把px单位转换为rem单位–》根据设计图的尺寸，先自定义一个html标签的font-size的大小(越好算越好)
2、配合媒体查询当屏幕宽度变大，把html标签的fort-size的值变大–》不同屏幕的适配，rem布局中进行的是等比例的缩放：
比例 = 屏幕的宽度/html标签的font-size
7、方法：round() 进行四舍五入到整数位 round(值，位数)