shift+alt
1：padding
padding 不会撑开盒子大小：不给他高度和宽度，他就不会撑开盒子大小
2:margin
外边距可以让盒子水平居中，但必须满足两个条件
1：盒子必须指定宽度（with）
2：盒子左右的边距都设置为auto
3:行内元素，行内块元素水平居中
给他们的父元素添加 text-align:center
4:外边距合并
使用margin定义块级元素的垂直外边距时，可能出现外边距合并
主要有两种情况
1：相邻块级元素垂直外边距的合并
当上下相邻的两个块级元素（星弟关系）相遇时，
如果上面元素有下边距，下面元素有上边距，
则他们之间的垂直距离不是margin-botom+matgin-top之和，
取两者之间较大者吗，这种现象被称为相邻会计元素垂直外边距合并
解决方案：尽量只给一个盒子添加margin值
2：嵌套块级元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块级元素，父元素上有外边距，子元素也有外边距，此时父元素会塌陷较大的外边距值
解决方案
1：可以父元素定义上边框
2：可以为父元素定义内边距
3：可以为父元素添加overflow:hidden
5:清除内外边距
* {
margin:0;
padding:0;
}
6:opacity:这个属性可以设置不透明度，值从0.0（完全透明）到1（不透明），默认1
7：box-shadow 盒子阴影
语法：box-shadow:h-shadow v-shadow blur spread color inset
h-shadow 必需，水平阴影位置，允许负值
v-shadow 必需，垂直阴影位置，允许负值
blur 可选模距离(虚的还是湿的)
spread 可选阴影尺寸
color 可选阴影颜色
inset 可选，将外部阴影（outset）改为内部阴影
width() = a；
innerWidth() = a+padding;
outerWidth() = a+padding+border;
outerWidth(true) = a+padding+border+margin;
8：定位
1：相对定位：相对定位是元素在移动位置的时候，相对于他原来位置来说
语法：选择器 {position:relative}
1.1:保留原来的位置，不脱标，他的最典型的应用就是给绝对定位当爹的
2：绝对定位
选择器 {position:absolute}
2.1:相对于父元素来说，如果没有祖先元素，或者祖先元素没有定位，则以浏览器为标准（Document）
2.2:如果祖先元素有定位（相对，绝对，固定），则以最近一级的定位元素为参考点移动位置
2.3：绝对定位脱标
2.4：固定定位随版心
2.4.1：让固定定位的盒子left:50%,走到浏览器可视区（也可以看做版心）的一半位置
2.4.2：让固定定位盒子margin-left版心宽度的一半距离，躲走版心宽度一般的位置
3：粘性定位
选择器 {position:sticky;
top:10px
}
3.1:以浏览器的可视窗口为参照移动元素
3.2：粘性定位占有原先位置
3.3：必须添加top,left,right,bottom其中一个才有效
3.4:行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度
3.5：块级元素添加绝对定位，或者固定定位，如果不给宽度或者高度，默认大小是内容大小·1
9：显示隐藏
visibility 可见性
visibility:visible 元素可视
visibility：hidden 元素隐藏
visibility 隐藏元素后，继续占有原来的位置
overflow 溢出
overflow:auto 在需要的时候添加滚动条
overflow:hidden 溢出部分隐藏
overflow:scroll 总是添加滚动条
10：HTML5的新特性
1.1：html5新增的语义化标签
1.2: 多媒体标签
音频：
视频：
autoplay autoplay 视频自动播放（谷歌浏览器需要议案家muted来解决自动播放）
controls controls 显示播放控件
width plxels(像素) 设置播放器宽度
height plxels(像素) 高度
loop loop 循环播放
auto（预先加载）
preload none(不应加载视频) 规定是否预加载视频，有qutoplay就·忽略该视频
、src url 地址
poster imgurl 加载等待画面图片
muted muted 静音播放
您的浏览器不支持video标签
11：html5 新增表单属性
required required 内容必须为空
placholder 提示文本 表单提示信息
autofocus autofocus 自动聚焦
autocompete off/on 当用户在字段开始键入时，浏览器基于之前键入过的值，应显示出在字段中填写的选项
默认已经打开，autocomplete = "on" 关闭autocomplete
12移动布局：
meta视口标签
属性
width 宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale 初始缩放比，大于0的数字
maximum-scale 最大缩放比，大于0的数字
minimum-scale 最小缩放比，大于0的数字
user-scalable 用户是否可以缩放，yse或no(1或0)
css3 属性选择器
E[att] 选择具有att属性的E元素
E[att="val"] 选择具有att属性且值等于val的E元素
E[att^="val"] 选择具有att属性且值以val开头的E元素
E[att$="val"] 选择具有att属性的且值以val结尾E元素
E[att*="val"] 选择具有att属性且值含有的E元素
结构伪类选择器-选择地n个元素
E：first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中最后一个E元素
E:nth-child(n) 匹配父元素中第n个子元素
E：first-of-type 指定类型的第一个
E:last-of-type 指定类型的最后一个
E:nth-of-type 指定类型E的第n个
区别：nth-child：会把所有的盒子都排序，执行的时候先看 :nth-child（1）之后回去看店面的div
nth-of-type: 会把指定的盒子排列序号，执行的时候先看 div指定的元素 之后回去看 :nth-of-type（1）
nth-child：对父元素所有的孩子进行排序选择，先找到第n个孩子，然后再去看是否匹配
nth-of-type：对父元素指定的子元素进行排序选择，先去匹配E再根据E找第N个孩子
nth-child(n):
1:n可以是数字，关键字，和公式
2：n如果是数字，就是选择第n个子元素，里面的数字是从1开始
3：n可以是关键字：even偶数，odd奇数
4：n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第00各元素或者超出了元素的个数就会被忽略）
2n 偶数
2n+1 奇数
5n 5,10,15....
n+5 从第5个开始（包含第五个）到最后
-n+5 前5个（包含第5个）....
14：微元素选择器
伪元素选择器可以帮助我们利用css创建新标签元素，而不是HTML标签，从而简化HTM结构
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
语法：element::before{}
1:before和after必须有content属性
2：before在父元素前面创建元素，after在父元素后面插入
3：伪元素选择器和标签选择器一样，权重为1
4：行内元素，不能设置宽高
div::before{
content:'我'
}
15：字体图标
1：轻量级：一个字体图标比一系列图像要小，一旦字体加载了，图标就会马上渲染出来，减少服务器请求
2：灵活性：本质是文字，可以随意改变颜色，产生阴影，透明效果，旋转
3：兼容性：几乎支持所有的浏览器
4：不能替代精灵图技术
16:"三角的做法
1：设置一个盒子，宽和高都设置成0
2：四条边加上边框，例如做一个向下的三角，那么其余三边背景颜色设置成透明，然后单独给border-top-color设置颜色
17：vertical-align属性
css的vertical-align属性经常用于设置图片活着1表单（行内块）和文字垂直对齐
官方解释：用于设置一个元素的垂直对齐方式，但是只针对行内元素，和行内块元素
语法：vertical-align：baseline|top|middle|bottom
baseline 默认，元素放在父元素的基线上
top 把元素的顶端与行内最高元素的顶端对齐
middle 把此元素放置在父元素的中部
bottom 把元素的顶端与行中最低的元素的顶端对齐
18：单行文本益处，省略号显示
1：先强制一行内显示文本
white-space:nowrap;(默认normal自动换行)
2：超出部分隐藏
overflow:hidden
3:文字用省略号代替超出部分
text-overflow:ellipsis
19:多行文字益处，省略号显示
1: overflow:hidden;
2:text-overflow:ellipsis
3:弹性伸缩盒子模型显示
display:-webkit-box；
4：限制在一个块元素显示的文本的行数
-webkit-line-clamp:2
5:设置或检索伸缩盒子对象的子元素的排列方式
-webkit-box-orient:vertical;
1:css3盒子模型
css3中可以通过box-sizing来指定盒模型，有两个值：1：context-box,border-box，这样我们计算盒子大小的方式就发生了改变
可以·分为两种情况
box-sizing:content-box 盒子大小为 width + padding + border（以前默认的）
box-sizing:border-box 盒子大小为width
如果盒子模型我们改变为box-sizing:border-box，那么padding和border就不会撑大盒子（前提padding和border不会超过widyh宽度）
以后可以直接设置为*{
box-sizing:border-box
}
2:css3滤镜filter
filter css 属性将模糊或颜色偏移等图形效果应用于元素
filter:函数() 例如： filter:blur（5px）;blur模糊处理，数值越大越模糊
3:css3 calc函数
calc()函数让你在声明css属性值时执行一些计算
width:calc(100% - 80px);
括号里可以使用+-*/来进行计算
4:css3过度
transiion:要过度的属性 花费的时间 运动曲线 何时开始
注意 一般与：hover搭配
1：属性：就是想要变化的css属性，宽松度高度，背景颜色 内外边距都可以。如果想要所有的属性变化过度，写一个all就可以
2：花费时间：单位是秒（必须写单位） 比如0.5s
3:运动曲线：默认ease (可以省略)
4:何时开始：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s(可以省略)
5：谁做过度给谁加
5：2D转换
5.1 2D转换之移动 translate
2D移动是2d转换里面的一种移动，可以改变元素在页面中的位置，类似定位
5.1：语法
transform:translate(x,y);或者分开写
transform:translateX(n);
transform:translateY(n);
5.1:重点
定义2D转换中的移动，沿着X和Y轴移动
translate最大优点不会影响其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%)
对行内标签没有效果
5.2 2D转换之旋转 rotate
2d旋转指的是让元素在2位平面内瞬时镇旋转或者逆时针旋转
5.2：语法
translate:rotate(度数)
rotate里面跟着是度数，单位是deg比如rotate(45deg)
角度为正时，顺时针，负时为逆时针
默认旋转的中心点是元素的中心点
5.2:2D转换设置中心点 transform-origin
我们可以设置元素的中心点
5.2：语法
transform-origin:x y
注意后面的参数x y用空格隔开
xy默认的转换中心点是元素的中心点（50% 50%）
还可以给想x y 设置像素或者方位名词（top bottom left right center）
5.3:2D转换之缩放
语法 transform:scale(x,y);
注意：1：xy用逗号隔开
2：transform:scale(1,1)放大一倍，相当于没有缩放
3：transform:scale(2,2),宽高放大2倍
4：transform:scale(2)相当于（2,2）
5：transform:Scale(0.5,0.5):缩小
6：scale缩放最大优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
5.4:2D转换综合写法
1：同时使用多个转换，其格式为：transform:translate() rotate() scale()
2:顺序会影响转换效果，先旋转会改变坐标轴方向
3：同时有位移和其他全属性，把位移放到最前面
6：动画
1：0%动画开始，100%动画完成
2：在@keyframes中规定某项css样式，就能创建当前样式逐渐改为新样式动画效果
3：动画可以改变任意多的样式和次数
用百分比规定变化时间，也可以用from to相当于0% 100%
6.2：动画常用属性
属性
@keyframes 规定动画
animation 所有动画的简写属性，除了animation-play-stste属性
animation-name 规定东华1名称（必须）
animation-duration 规定东华完成一个周期所花费的时间（必须）
animation-timing-function 动画速度曲线，默认ease
animation-delay 动画何时 开始默认0
animation-iteration-count 动画播次数 默认1，还有infinite
animation-direction 动画下一周期逆向播放，默认是normal,alternate逆向播放
animation-play-state 规定动画是否正在运行或暂停·，默认running 还有pasue
animation-fill-mode 规定动画结束后状态，保持forwards,回到起点backewards
动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态
6:3D转换
3D转换我们主要学习3D位移和3D转换
主要知识点
1:3D位移：translate3d(x,y,z)
2:3D旋转：rotate3d(x,y,z)
3:透视：perspective
4:3D呈现：transform-style
6.1:3D位移
语法：translform:translateX(100px):仅仅在X轴上移动
translform:translateY(100px):仅仅在Y轴上移动
translform:translateZ(100px):仅仅在Z轴上移动(注意：translateZ一般用pxd单位)
transform:translate3d(x,y,z)：xyz分别指要移动轴方向的距离
6.2：透视 perspective
1:如果需要3d效果需要3d
2:透视写在被观察元素的父盒子上
d:就是视距，
z:z轴，z轴越大，我们看到的物体越大（注意：透视越小，就是我们距离屏幕的距离越小，物体越大）
6.3:3D旋转
transform:rotateX（45deg）沿着X轴
transform:rotateY（45deg）沿着Y轴
transform:rotateZ（45deg）沿着Z轴
transform:rotate3d（x，y，z,45deg）沿着自定义轴用0和1表示
6.4:3D呈现transform-style
控制子元素是否开启三维立体环境
transform-style:flat 子元素不开启3D立体空间默认
transform-style:preserve-3d;子元素开启立体空间
代码，但影响的是子盒子
移动端开发
1：流式布局
二配图：
因为手机像素与电脑像素不一样，同样一张图片，放到手机上会模糊
，这时就会用到二倍图
例如：我们需要一个div，div里面需要一张50*50的图片，如果我们直接放一张50*50的图片
那么在手机上就会模糊，他会给你放大二倍，这时，我们直接放一张100*100的图片，然后再把这张图片手动width和height缩小2倍，这时再展示
2：flex布局
一下6个属性是父元素设置的
1：flex-direction：设置主轴方向
2：justify-content:设置主轴上子元素的排列方式
3：flex-wrap:设置子元素是否换行
4：align-content:设置侧周上子元素排列方式(多行)
5:align-items:设置侧周上子元素排列方式（单行）
6：flex-flow:复合属性，相当于同时设置flex-direction和flex-wrap
2.1:flex-direction决定主轴方向
属性 说明
row 默认值从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
2.2:justify-content 设置主轴上子元素的排列方式
属性 说明
flex-start 默认值从头部开始，如果主轴是x轴，则从左到右显示
flex-end 从尾部开始排列
center 在主轴居中对齐（如果x轴是主轴，则水平居中）
space-around 平分剩余空间
space-between 先两边贴边，再平分剩余空间
2.3:flex-wrap 设置子元素是否换行
默认情况下，项目都在一条线上，默认不换行，如果装不开，会缩小子元素的宽度，放到子元素上
属性 说明
nowrap 默认值，不换行
wrap 换行
2.4：align-items 设置侧周上子元素排列方式（单行）
属性值 说明
flex-start 从上到下
flex-end 从下到上
center 加在一起居中（垂直居中）
strech 拉伸
2.5：align-content 设置侧轴上子元素的排列方式（多行）
属性值 说明
flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴的中间开始排列
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布两头，再平分剩余空间
strech 设置子项元素高度平分父元素高度
2.6：flex 布局子项常见属性
flex 子项目占得分数
align-self 控制子项目在自己的侧轴的排列方式
order 属性定义子项目的排列顺序（前后顺序）
3：rem布局
1：em与rem区别
em是相对于父元素的字体大小来说，rem是相对于html字体大小来说
2：媒体查询
媒体查询（Media Query）
1：使用@media查询，可以针对不同媒体类型定义不同样式
2：@media可以针对不同屏幕尺寸设置不同样式
3：当你重置浏览器大小的过程，页面也会根据浏览器的宽度和高度重新渲染页面
语法规范
@media mediatype and|not|only(media feature){
css-Code;
}
1:用@media开头 注意@符号
2：mediatype 媒体类型
3：关键字 and not only
4:media feature 媒体特性 必须要有小括号
mediatype查询类型
all 用于所有设备
print 用于打印机和打印预览
scree 用于电脑屏幕，手机，平板电脑
关键字
and可以将多个媒体特性连接到一起，相当于且
not排除某个媒体类型，相当于非，可以省略
only指定某个特定的媒体类型，可以省略
媒体特性
width 定义输出设备中页面可见区域的宽度
min-width 定义输出设备中页面最小的可见区域宽度
max-width 定义输出设备中页面最大可见区域宽度
为了防止混乱媒体查询一般按照从小到大或者从大到小的顺序的来，一般我们我们喜欢从小到大来写，这样代码更简洁
引入资源
当样式比较繁多时，我们可以针对不同的媒体使用不同的stylesheets(样式表)
原理，就是直接在link中判断设备尺寸，然后引用不用的css文件
语法规范
例如
4：Less基础
1: Lsee变量
语法基础
@变量名：值
变量名规范
必须以@为前缀
不能包含特殊符号
不能以数字开头
大小写敏感
//例如定义一个粉色变量
@color：pink；
body{
bgc:@color;
}
2:Less编译
需要把less编译成css文件，安装 Easy less
1：嵌套
.head{
width:200px;
height:200px;
a{
color:red;
}
}
2:如果有伪类，交集选择器，伪元素选择器，我们内层选择器前加&
.head{
width:200px;
height:200px;
a{
color:red;
&:hover{
color:blue;
}
}
}
3：less计算
1:乘号（*）除 （/）
2：运算符中间左右有个空格隔开1px + 5
3:对于两个不同单位的值之间的运算，运算符结果的值取第一个值得单位
4：如果两个值之间只有一个单位，则运算符结果就取该单位
4:remm适配方案
1：动态设置html-size大小
1：假设设计稿是750px
2：假设我们的屏幕划分为15等分（划分标准不同，可以是20等分，也可能是10等份）
3：每一份作为html字体大小，这里就是50px
4:那么在320px设备的时候，字体大小为320/15就是21.33px
5:用我们页面元素的大小除以不同的html字体大小就会发现他们比例还是相同的
6：比如我们以750为标准设计稿
7：一个100*100页面元素在750屏幕下，就是100/50转换为是2rem * 2rem比例是1:1
8：320屏幕下，html自提大小为21.33 则2rem就是42.66px 此时宽和高都是42.66 比例还是1:1
9：但是已经能实现不同屏幕下页面元素盒子等比例缩放效果