寒假集训——四

五十二、多列布局

1、column-count
说明:
显示的列数
属性规定元素应该被分隔的列数
适用于:除table外的非替换块级元素, table cells, inline- block元索
2、column-gap
说明:
调整列间距
说明:属性规定列之间的间隔大小
3、 column-rule
说明:
列边框
设置或检索对象的列与列之间的边框。复合属性。
column-rule-color规定列之间规则的颜色。
column-rule-style规定列之间规则的样式。
column-rule-width规定列之间规则的宽度。
4、列高度统一
column-fill
auto把父盒子占满
5、调整列宽
column-width
6、column-span
all横跨所有列
7、break-inside
禁止盒子内部折行

五十三、响应式布局

常见的布局方案

固定布局:
以像素作为页面的基本单位，不管设备屏幕及浏览器宽度,只设计一套尺寸;
可切换的固定布局:
同样以像素作为页面单位，参考主流设备尺寸,设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局;
弹性布局:
以百分比作为页面的基本单位，可以适应-定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果;
混合布局:
同弹性布局类似，可以适应-定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果;只是混合像素、和百分比两种单位作为页面单位。
布局响应:
对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式: pc优先(从pc端开始向下设计) ;
移动优先(从移动端向上设计) ; 无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化(发生布局改变的临界点称之为断点)，
（1）模块中内容：挤压-拉（布局不变）
（2）模块中内容：换行-平铺（布局不变）
（3）模块中内容：删减-增加（布局不变）
（4）模块位置变换（布局改变）
（5）模块展示方式改变：隐藏-展开（布局改变）

响应式布局特点

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

媒体查询

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

media_type	设备类型说明
all	所有设备
aural	听觉设备
braille	点字触觉设备
handled	便携设备，如手机、平板电脑
print	打印预览图等
projection	投影设备
screen	显示器、笔记本、移动端等设备
tty	如打字机或终端等设备
tv	电视机等设备类型
embossed	盲文打印机

screen是媒体类型里的一种, CSS2.1定义了10种媒体类型
and被称为关键字，其他关键字还包括not(排除某种设备), only(限定某种设备)
(min-width: 400px)就是媒体特性，其被放置在一对圆括号中。
/* PC客户端或大屏幕设备: 1028px至更大*/
@media only screen and (min-width: 1029px) {}
/竖屏/
@media screen and (orientation:portrait) and (max width: 720px) {対应样式}
/横屏/
@media screen and (orientation:landscape){对应样式}

五十四、em与rem

em：相对单位，相对于父元素的字体大小
rem：相对单位，相对于根元素（html）字体大小

五十五、rem布局准备工作

font-size=当前设备的css布局宽度/物理分辨率（设计稿的宽度）*基准font-size
rem====等比例缩放布局

五十六、vh与vw

vh view-height
100vh=视口的高度
vw view-width
100vw=视口宽度
注：
没有滚动条的时候100vw===100%
有滚动条
100vw 包含滚动条，窗口大小
100% 刨除滚动条 剩余的空间占满

五十七、CSS3渐变

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

1、线性渐变

语法: background: linear-gradient(direction, color-stop1, color-stop2, …);
**说明: ** direction:默认为to bottom,即从上向下的渐变;
stop:颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。
1.支持多颜色渐变
2.支持方向，to left， ，，，，
3.支持角度的写法
示例: to left、top right、to bottom、to top
div { background:linear-gradient(to left, red , blue) }
div { background:linear-gradient(to right, red , blue) }
div { background:linear- gradient(to bottom, red , blue) }/浏览器默认值/
div { background:linear-gradient(to top, red , blue) } :
分别产生“从右到左”、”从左到右” 、“从上到下” 、“从下到上” 的”红色-绿色”渐变

2、径向渐变

径向渐变不同于线性渐变，线性渐变是从“一个方向"向“另一个方向”的颜色渐变，而径向渐变是从"一个点”向四周的颜色渐变
语法: background; radial-gradient(center, shape, size, start- color, …, last-color);
说明: center: 渐变起点的位置，可以为百分比，默认是图形的正中心。
shape:渐变的形状，ellipse表示椭圆形，circle表示圆形。 默认为ellipse, 如果元素形状为正方形的元素，则ellipse和circle显示一样。
size:渐变的大小，即渐变到哪里停止，它有四个值，closest-side: 最近边;
farthest side:最远边; closest- corner:最近角: farthest corner:最远角
示例：多颜色点均匀分布
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); }
示例:多颜色节点不均匀分布
div{background: radial-gradient(red 5%, green 15%, blue 60%);}
示例:设置渐变形状
div { background: radial-gradient(circle, red, yellow, green); }
div { background: radial-gradient(ellipse, red, yellow, green); }
circle:渐变为最大的圆形; ellipse: 根据元素形状渐变,元素为正方形是显示效果与circle无异。
示例:不同尺寸的渐变
size指定了渐变的大小，即渐变到哪里停止，它有四个值。
closest-side:最近边; farthest-side: 最远边; closest-corner: 最近角; farthest-corner: 最远角
div { background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, closest-corner, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black); }

3、重复渐変

(1)重复性线性渐变
div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }
说明: 10%的位置为yellow, 20%的位置为green,然后按照这20%向下重复
(2)重复性径向渐变
div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }

五十八、动画过渡属性

复合属性: transition 取值: all 5s linear 3s
含义: css3的transition允许css的属性值在一定的时间区间内平滑地过渡。 这种效果可以在鼠标单击、获得焦点被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值
all=单一属性: transition-property:检索或设置对象中的参与过渡的属性（除了display:none/block属性）
5s=单一属性: transition-duration: 检索或设置对象过渡的持续时间
3s=单一属性: transition-delay: 检索或设置对象延迟过渡的时间
linear=单一属性: transition-timing-function: 检索或设置对象中过渡的动画类型
简写:
transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型

五十九、动画过渡类型

transition-timing-function:检索或设置对象中过渡的动画类型
linear
匀速
ease
逐渐慢下来
ease-in
加速
ease- out
减速
ease-in-out
先加速后减速
贝塞尔曲线:
属性值: cubic-bezier() 贝塞尔曲线网址: http://cubic-bezier.com/逐帧动画: transition-timing-function:steps(动画执行的步数);

六十、2D属性-transform

1、translate()平移

将元素向指定的方向移动，类似于position中的relative。
水平移动:向右移动translate(tx,0)和向左移动translate(-tx,0);
垂直移动:向 上移动translate(0, ty)和向下移动translate(0,ty);
对角移动:右下角移动translate(tx,ty)、 右上角移动translate(tx, -ty)、左上角移动translate(-tx,-ty)和左下角移动translate(-tx,ty)。
translateX():水平方向移动一个对象。对象只向X轴进行移动,如果值为正值,对像向右移动;如果值为负值，对像向左移动。
translateY(): 纵轴方向移动一个对象。对象只向Y轴进行移动，如果值为正值，对象向下移动;如果值为负值，对像向上移动。
这两个函数和前面介绍的translate()函数不同的是每个方法只接受一个值。
所以
transform:translate(-100px,0)实际上等于transform:trancelateX(-100px)；
transform:translate(0,-100px)实际上等于transform:translateY(-100px)。
注：
设置left属性会频繁的造成浏览器回流重排，而transform和opacity 属性不会，因为它是作为合成图层发送到GPU上，由显卡执行的渲染，这样做的优化如下

• 可以通过亚像素精度得到一个运行在特殊优化过的单位图形任务上的平滑动画并且运行非常快。
• 动画不再绑定到CPU重排，而是通过GPU合成图像。 即使运行一个非常复杂的JavaScript任务，动画仍然会很快运行。

2、scale()缩放

让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值， 使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。负值-倒向放大效果
缩放scale()函数和translate()函数的语法非常相似，他可以接受一个值, 也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。
例如，
scale(1,1)元素不会有任何变化，而scale(2,2)让元素沿X轴和Y轴放大两倍。
scaleX(): 相当于scale(sx,1)。 表示元素只在X轴(水平方向)缩放元素，其默认值是1。
scaleY):相当于scale(1,sy)。 表示元素只在Y轴(纵横方向)缩放元素,其默认值是1。
transform-origin改变中心点的位置
center
left top
left bottom
left center
right top
right bottom
right center

3、rotate()旋转

旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。 它主要在二维空间内进行操作，接受一个角度值， 用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转;如果这个值为负值，元素相对原点中心逆时针旋转。
rotateZ====rotate 中心
rotateX()方法，元素围绕其X轴以给定的度数进行旋转
rotateY() 方法，元素围绕其Y轴以给定的度数进行旋转

4、skew()

倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一 定的角度倾斜。
一个参数时:表示水平方向的倾斜角度;
两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度
skewX 正值，拽右下角，往右边拉动，形成30deg
skewY
skew(x,y) 正值，拽右下角，往右下边拉动，形成30deg