html寒假120-128、141-163

怪异盒模型（很重要，可以省去调padding撑开的大小）

怪异盒模型会挤压内部空间

弹性盒

非常适合做移动端布局，适合折行。
display：flex
影响：
1.子元素默认横向排列
2.子元素如果是行内元素会变成块级元素

可以通过flex-direction改变主轴方向
如：
row, column ,row-reverse,column-reverse

flex-wrap：折行
调整折行后行间距

align-content：flex-start 控制折行后的行间距
flex-start
flex-end
center
space-around
space-between

项目对齐方式

.div1{
align-self: flex-start;}
.div2{
align-self: flex-end;}
.div3{
align-self: center}
.div4{align-self:strech}  会撑满高度，单是自身需要不设置高度或宽度

项目调整顺序

older：数值
比如：
older：-1 会使得块在最前面

项目剩余宽高

.div2{flex:1}  //占满剩余空间

多列布局

div{
height: 300px;
background:
yellow;
/*显示的列数*/
column-count: 5;
/*调整列间距*/
column-gap:30px;
/*裂边框*/
red;
column-rule:2px solid
/*列高度统一*/
 column-fill: auto;
/*auto 把父盒子占满*/
/*调整列宽*/
column-width: 500px;
}

div>h1k
column-span: all;
text-align: center;
/*a11横跨所有列*/

多列布局案例笔记（禁止盒子内部折行）

.box div{
border:3px solid
green;
padding:5px;
margin-bottom: 10px;
break-inside: avoid;
/*禁止盒子内部折行*/

响应式布局

媒体查询

媒体查询的含义：
询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查
嫫
询中可用于检测的媒体特性有width、height和color（等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
1、媒体查询操作方式
实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，如果表达式结果为假，媒体查询内的CSS将被忽略。
2、媒体查询结构

@media all and (min-width:320px) {
body { background-color:blue;}

/*PC客户端或大屏幕设备：1028px至更大
*/ @media only screen and (min-width: 1029px) (
/*竖屏*/
@media screen and(orientation:portrait) and(max-width:720px)(对应样式}
/*横屏*/
@media screen and(orientation:landscape)(对应样式}

3、响应式布局特点
设计特点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

横竖屏检测

em和rem（解决移动端 等比例缩放）

px , em , rem之争
1.px:50px
2.em：相对单位，相对于父元素的字体大小。div width:10em；
3.rem：相对单位，相对于根元素（html）字体大小，div width：10rem；

rem布局准备工作

<script>
//fontsize 计算
document.documentElement.style.fontSize=document.documentElement.
clientWidth/750 * 100 +'px'
</script>
.box{width:3.75em}

可以通过JS代码使得适应移动端不同的大小
使font-size适应

//fontsize 计算
document.documentElement.style.fontSize=document.documentElement.
clientWidth/320 * 20 +'px'
//fontsize=当前设备的css布局宽度/物理分辨率（设计稿的宽度)*基准font-size
//rem====等比例缩放布局

vw和vh

vh ：view-height 视口的高度
vw ：view-width 视口的宽度
即此时 屏幕的宽度与高度

iphone6 100vw 375px 1vw =3.75px

iphone6 plus 100vw =414px 1Vw = 4.14px
即也为等比例缩放

单位转换笔记

html{
font-size: 26.67vw;}


在越大的设备上就会有越大的px值

320px ===·100vw

16px===?VW

线性渐变linear-gradient

CSS3渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果，现在通过使用CSS3的渐变（gradients)即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient)是由浏览器生成的。

div{
width: 300px;
height:300px;
border:10px solid
gray;
background:linear-gradient(to bottom right,red,green}
或者background:linear-gradient(90deg right,red,green
/*1支持多颜色渐变
  2支持放箱单
  3支持角度的写法*/

径向渐变

示例1：多颜色点均匀分布

div { background: radial-gradient(red, green, blue); }

以中心(50%50%)为起点，到最远角(farthest-corner)，从red到green、blue的均匀渐变
EG:

div {background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue);}或 div {background: -webkit-radial-gradient(center, farthest-
corner, red, green, blue); }

示例2：多颜色节点不均匀分布

div { background: radial-gradient(red 5%, green 15%, blue 60%); }

重复渐变

太极案例笔记

思路如图：
1.设置白色黑色渐变各位百分之五十的线性渐变
background:linear-gradient(50%black，white50%);

2.设置一前一后的伪元素（需注意将其display：block让其有宽高）
3.将大块display：flex 并且align：center让其居中
3.设置伪元素的渐变 {black
background:radial-gradient(white25%black25%）

动画过度属性

transition:all 2s linean;
/＊
a11所有属性
2s动画时间
1inear匀速
*/

除了display：none/block是没有动画效果的
那如何下拉菜单可以实现动画效果？

div ul{
margin-top:50px;
transition:all 1s;
height: Opx;}

div:hover ul{
height: 200px;
overflow:hidden;

即：一开始让ul高度为0并隐藏溢出

动画过度类型

动画过度单一属性

div{
width: 200px;
height: 200px;
background:
yellow;
transition-property: height background;
transition-duration: 2s;
div:hover{
height: 600px;
background:
red;

可以通过空格隔开 ：transition-property: height background;

2d

平移

还可以transform：translateY（）

设置left 属性会频繁的造成浏览器回流重排，而transform 和 opacity属性不会，因为它是作为合
成图层发送到GPU上，由显卡执行的渲染，这样做的优化如下
·可以通过亚像素精度得到一个运行在特殊优化过的单位图形任务上的平滑动画，并且运行非常
快。
·动画不再绑定到CPU重排，而是通过GPU合成图像。即使运行一个非常复杂的JavaScript
任务，动画仍然会很快运行。

缩放

可以在图片放大的时候使用，不会只是左上角右上角的放大
负值的设置可以形成倒像的放大效果
设置元素中心点：

transform-origin:left top;

旋转

正值：顺时针
负值：逆时针
ratateX（）三维空间转

ratateZ（）中心旋转

同理可以改变转变的点

transform-origin:left top;

折射效果笔记

思路：
1.9块li 绝对定位到父容器中
2.运用nth-child快速的添加每一块的背景色
3.transform-origin调整中心点到bottom center
4.按照图片调整角度
5.border-radius圆角
6.添加动画效果transition：all 2s；
7.如何实现7在最上面的效果？
答：给除了7的加上透明色opacity：0
移动后的效果opacity：1；

多属性笔记

注意：先缩放后位移，位移的是缩放后的距离

倾斜

记忆方法：想象成从右下角拉