HTML+CSS复习（五）

五十一、怪异盒模型

含义:更改原有布局盒子模型的计算方式通过box-sizingl属性的取值进行吏改
属性: box-sizing
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
属性值: content-box（普通）
这是由CSS2.1规定的宽度高度行为。宽度和高度分别应用刭元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

属性值: border-box（怪异）
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

 
 

五十二、弹性盒

display:flex;
  影响：
1、子元素默认横向排列
2．行内元素，变成了块级元素（如，span）

flex-direction:（改变排列方向）
  row 默认值，横向
  row-reverse 主轴在横向，项目反方向显示
  column 主轴在纵向，项目正向显示
  column-reverse 主轴在纵向，项目反方向显示

justify-content:（主轴的对齐方式）
  flex-start 默认值，主轴的开始位置显示
  flex-end 主轴的结束位置显示
  center 主轴的居中位置显示
  space-between 主轴两端对齐
  space-around 主轴的两端环绕，即项目之间的距离是贴边项目与容器之间距离的两倍
  space-evenly 主轴的间距均分

align-item:（侧轴的对齐方式）
  flex-start 默认值，交叉轴的开始位置显示
  flex-end 交叉轴的结束位置显示
  center 交叉轴的居中位置显示
  baseline 交叉轴的基线位置显示，与flex-start效果一致
  stretch 有拉伸效果，前提是项目没有设置高度，或高度是自适应的
 
 

五十三、折行和行间距

flex-wrap:（折行）
  nowrap 默认值，不折行
  wrap 折行显示

align-content:（行间距）
  flex-start 侧轴的开始位置显示，没有行间距
  flex-end 侧轴的结束位置显示，没有行间距
  center 侧轴的居中位置显示，没有行间距
  space-between 侧轴的两端对齐，即首行和尾行贴边显示，中间的间距自动平分
  space-around 侧轴的行间距环绕，即行与行之间的距离，是贴边行距离容器之间距离的2倍
  space-evenly 侧轴的行间距均分
 
 

五十四、项目

（一）对齐方式

align-self:
  flex-start 侧轴的开始位置显示
  flex-end 侧轴的结束位置显示
  center 侧轴的居中位置显示
  baseline 侧轴的基线位置，与flex-start效果一致
  stretch 有拉伸效果，前提是项目没有设置高度，或高度是自适应的
 

（二）调整顺序

需要使用属性 order ，取值为数值。order的默认取值为auto（等于0），order的值可以取正、负数，取值越小排列越靠前；取值越大排列越靠后。
 

（三）剩余宽高

flex：1

1. 主轴在横向的时候
   如果项目不设置高度，默认高度是拉伸的，项目添加 flex:1; 实现的是占剩余宽度的所有。若给所有项目添加 flex:1; ，所有项目平分了容器的宽度。
2. 主轴在纵向的时候
   如果项目不设置宽度，默认宽度是拉伸的，项目添加 flex:1; 实现的是占剩余高度的所有。若给所有项目添加 flex:1; ，所有项目平分了容器的高度。
    
    

五十五、多列布局

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:列高度自适应内容
balance:所有列的高度以其中最高的一列统一

5、column-span
设置或检索对经元素是否横跨所有列。
none:不跨列
all:横跨所有列

6、column-width
设置或检索对象每列的宽度

（break-inside: avoid;禁止盒子被破坏）
 
 

五十六、响应式布局

– 常见的布局方案
固定布局:
以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸;

可切换的固定布局:
同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局;

弹性布局:
以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果;

混合布局:
同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果;只是混合像素、和百分比两种单位作为页面单位.

布局响应:
对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式: pc优先（从pc端开始向下设计);
移动优先(从移动端向上设计);D无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化(发生布局改变的临界点称之为断点)。

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

媒体查询的含义:
媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)）为其设定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){对应样式}
 
 

五十七、em和rem

em:·相对单位，相对于父元素的字体大小。div width : 10em
rem:·相对单位，相对于根元素（html）字体大小，·div width : 10rem
 
 

五十七、vw和vh

vw视口的宽度
vh视口的高度
如：
iPhone6 100vw === 375px
iPhone6 plus 100vw === 414px
 
 

五十八、单位转换

没有滚动条的时候,
100vw === 100%

有滚动条
100vw包含滚动条,窗口大小
100%刨除滚动条 剩除的空间占满。
 
 

五十九、渐变

（一）线性渐变

语法:background: linear-gradient(direction, color-stop1, color-stop2, …-);
说明:direction: 默认为to bottom，即从上向下的渐变;
stop:颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。

示例1: to left、top right、to bottom、to top、数字deg

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)}
div { background:linear-gradient(50deg, red ,blue)}

分别产生“从右到左”、“从左到右”、“从上到下”、“从下到上”的“红色-绿色”渐变

 

（二）径向渐变

径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变。

语法: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:最远角

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

div { background: radial-gradient(red, green, blue); }
以中心（50% 50%）为起点，到最远角〈farthest-corner), 从red到green、blue的均匀渐变

EG:div ( background:-webkit-radia-gradient50%50%,farthestcomner 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%);}

示例3:设置渐变形状
div { background: radial-gradient(circle, red,yellow, green); }
div { background: radial-gradient(ellipse, red, yellow, green);}
circle:渐变为最大的圆形; ellipse:根据元素形状渐变，元素为正方形是显示效果与circle无异。

示例4:不同尺寸的渐变
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);}

（三）重复渐变

(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的transiton允许css的属性值在一定的时间区间内平滑地过渡，这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中帷发，并园滑地以动画效果改变CSS的属性值

all ====== 单一属性: transition-property:检索或设置对象中的参与过渡的属性
5s ====== 单一属性: transition-duration:检索或设置对象过渡的持续时间
linear ==== 单一属性: transition-timing-function:检索或设置对象中过渡的动画类型
3s ====== 单一属性: transition-delay:检索或设置对象延迟过渡的时间

简写:
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

（一）平移 translate()

将元素向指定的方向移动，类似于position中的relative.
水平移动: 向右移动translate(tx,0)和向左移动translate(-tx.0);
垂直移动: 向上移动translate(O,-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:translateX(-100px);transformtranslate(0,-100px)实际上等于transform:translateY(-100px).

– 设置left属性会频繁的造成浏览器回流重排，而transform和opacity属性不会，因为它是作为合成图层发送到GPU上，由显卡执行的渲染，这样做的优化如下

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

（二）缩放 scale()

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

（三）旋转 rotate()

旋转rotate)函数通过指定的角度参数对元泰根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顶时针旋转;如果这个值为负值，元素相对原点中心逆时针旋转。

rotateX()方法，元素围绕其×轴以给定的度数进行旋转

rotateY()方法，元素围绕其Y轴以给定的度数进行旋转

rotate 中心 == rotateZ
 

（四）倾斜 skew()

倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。

—个参数时:表示水平方向的倾斜角度;
两个参数时:第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度

 
 

六十二、关键帧动画

（一）属性

– animation和transition的区别
相同点:
都是随着时间改变元素的属性值。
不同点:
transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性;而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。

@keyframes identifier{} （关键帧）

<style>
        @keyframes identifier {
            from{}
            to{}
        }
        @keyframes identifier {
            0%{}
            50%{}
        }
   </style>

infinite（无限次）
 

（二）单一属性

animation
animation复合属性。检索或设置对象所应用的动画特效。

  1.animation-name检索或设置对象所应用的动画名称
说明:
必须与规则@keyframes配合使用，eg:@keyframes mymove{animation-name:mymove

  2.animation-duration检索或设置对象动画的持续时间
说明:
animation-duration:3s;动画完成使用的时间为3s

  3.animation-timing-function检索或设置对象动画的过渡类型
说明:
linear:线性过渡。等同于贝塞尔曲线(0.0,0.0,1.0,1.0)
ease:平滑过渡。等同于贝塞尔曲线(0.25,0.1,0.25,1.0)
ease-in:由慢到快。等同于贝塞尔曲线(0.42,0,1.0,1.0)
ease-out:由快到慢。等同于贝塞尔曲线(0,0,0.58,1.0)
ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42,0,0.58,1.0)

  4.animation-delay检索或设置对象动画延迟的时间
说明:
animation-delay:0.5s;动画开始前延迟的时间为0.5s)

  5.animation-iteration-count检索或设置对象动画的循环次数
说明:
animation-iteration-count: infinite | number;infinite:无限循环
number:循环的次数

  6.animation-direction检索或设置对象动画在循环中是否反向运动
说明:
normal:正常方向
reverse:反方向运行
alternate:动画先正常运行再反方向运行，并持续交替运行
alternate-reverse;动画先反运行再正方向运行，并持续交替运行

  7.animation-play-state检索或设置对象动画的状态
说明:
animation-play-state:running | paused;running:运动
paused:暂停
animation-play-state:paused;当鼠标经过时动画停止，鼠标移开动画继续执行

轮播案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}

        .swiper-container{ width: 640px; height: 640px; margin: 0 auto; overflow: hidden;}
        .swiper-container img{ width: 640px; height: 300px;}
        .swiper-slide{ float: left;}
        .swiper-wrapper{ width: 999px; animation: swiperrun 10s linear infinite;}
        .swiper-wrapper:hover{ animation-play-state: paused;}
        
        @keyframes identifier {
            0%{ transform: translateX(0);}
            5%{ transform: translateX(-640px);}
            25%{ transform: translateX(-640px);}
            30%{ transform: translateX(-1280px);}/* 实现停顿的效果 */
            50%{ transform: translateX(-1280px);}
            55%{ transform: translateX(-1920px);}
            75%{ transform: translateX(-1920px);}
            80%{ transform: translateX(-2560px);}
            100%{ transform: translateX(-2560px);}
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="图一" alt="">
            </div>
            <div class="swiper-slide">
                <img src="图二" alt="">
            </div>
            <div class="swiper-slide">
                <img src="图三" alt="">
            </div>
            <div class="swiper-slide">
                <img src="图四" alt="">
            </div>
            <div class="swiper-slide">
                <img src="图一" alt=""> <!-- 无缝隙轮播 -->
            </div>
        </div>
    </div>
</body>
</html>

 
 

六十三、Animate.css动画库

 
 

六十四、3D

（一）平移

transfrom-style: preserve-3d;
translateX()
translateY()
translateZ()
transfrom: translate3d(0,0,0);

景深
  生活中的3d区别于2d的地方
近大远小景深
程序中实现的方法 perspective元素距离视线的距离（物体和眼睛的距离越小，近大远小的效果越明显)
perspective: 1200px;(在父元素中使用)
transform:perspective(1200px)(在子元素中使用)
两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉

  perspective-origin;
观察3d元素的（位置)角度perspective-origin: center center(中心)
perspective-origin: left top (左上角)
perspective-origin: 100%100%(右下角)
 

（二）旋转

transfrom: rotateX();
transfrom: rotateY();
transfrom: rotateZ();
 

（三）缩放

CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数，当scale3d()中X轴和Y轴同时为1，即scale3d(1,1,5z)，其效果等同于scaleZ(z)。通过使用;函数，可以让元素在Z轴上按比例.!缩放。默认值为1，当值大于1时，元素放大，反之小于1大于0.01时，元素缩小
  scale3d(sx,sy,sz)
sx:横向缩放比例;
sy :纵向缩放比例;sz:Z轴宿放比例;
  scaleZ(s)
s:指定元素每个点在Z轴的比例。
注: scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果