制作三角形

<style>
    *{
        margin:0;padding:0;
    }
    .box{
        border:50px solid darkcyan;
        border-color: transparent   transparent lightblue transparent;
        width:0;
    }
</style>
<div class="box"></div>

overflow 常用的几个值

overflow:hidden；超出隐藏
overflow：auto；根据情况，自动添加滚动条
overflow:scroll; 添加滚动条（不管你内容是否超出）
.box{ width:200px; height:200px; border:1px solid red; /* 超出隐藏 */ /* overflow:hidden; */ /* 根据你内容大小来自动添加滚动条，如果宽度大于你设置的盒子的宽，x轴方向自动添加滚动条，如果是高度亦如此（y轴添加滚动条） */ /* overflow:auto; */ /* 不管你内容是否超出盒子的大小都会增加一个滚动条 */ overflow:scroll; }

background 几个常用的值

值

说明

CSS

指定要使用的背景颜色

指定背景图像的位置

指定背景图片的大小

指定如何重复背景图像

指定背景图像的定位区域

指定背景图像的绘画区域

background-attachment

设置背景图像是否固定或者随着页面的其余部分滚动。

background-image

指定要使用的一个或多个背景图像

语法

background-color 背景颜色
background-image:url(“图片的路径”)
background-position：水平垂直;(背景图片的位置)
英文：水平方向：left、center、right；垂直方向：top、center、bottom
具体的像素值例如：background-position:50px 50px;
还可以是百分比
background-repeat:(控制图片是否平铺，以及平铺的方向)
no-repeat：不平铺
repeat-x ：水平方向平铺
repeat-y:垂直方向平铺
background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动。
fixed
scroll （默认）
background-size:x y；（控制背景图片的大小，x代表的背景图片的宽，y代表的是背景图片高）
可以是具体的像素值，例如：background-size:100px 100px;
还可以是百分比，例如：background-size:100% 100%;
cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。有可能造成背景图像的某些部分也许无法显示在背景定位区域中。
contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。（背景图片放大的时候，只要宽度或者高度，一边铺满了容器，就停止放大。）

背景图片练习案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
      body{
          
        background:url("bg.jpg") fixed;
        padding:0 100px;
        box-sizing: border-box;
       }
       .contain{
           background:rgba(0,0,0,0.5);
          
           padding:30px;
           color:#fff;
        
          
       }
       p{
           line-height:40px;
           text-indent: 2em;
       }
    </style>
</head>
<body>
    <div class="contain">
        <p>
                去年10月中旬，找的是网上口碑非常好的云南阿诺，玩的是她订制的路线，阿诺服务也很周到、主要是很热情，提前沟通好行程，到了云南基本不需要自己再操心了，真的很省心，云南旅游相当开心的一次去年10月中旬，找的是网上口碑非常好的云南阿诺，玩的是她订制的路线，阿诺服务也很周到、主要是很热情，提前沟通好行程，到了云南基本不需要自己再操心了，真的很省心，云南旅游相当开心的一次
        </p>
        <p>
                去年10月中旬，找的是网上口碑非常好的云南阿诺，玩的是她订制的路线，阿诺服务也很周到、主要是很热情，提前沟通好行程，到了云南基本不需要自己再操心了，真的很省心，云南旅游相当开心的一次去年10月中旬，找的是网上口碑非常好的云南阿诺，玩的是她订制的路线，阿诺服务也很周到、主要是很热情，提前沟通好行程，到了云南基本不需要自己再操心了，真的很省心，云南旅游相当开心的一次
        </p>
        <img src="child.jpg" alt="" width="200" height="200">
        <p>
                去年10月中旬，找的是网上口碑非常好的云南阿诺，玩的是她订制的路线，阿诺服务也很周到、主要是很热情，提前沟通好行程，到了云南基本不需要自己再操心了，真的很省心，云南旅游相当开心的一次
                去年10月中旬，找的是网上口碑非常好的云南阿诺，玩的是她订制的路线，阿诺服务也很周到、主要是很热情，提前沟通好行程，到了云南基本不需要自己再操心了，真的很省心，云南旅游相当开心的一次
        </p>
        <p>
                去年10月中旬，找的是网上口碑非常好的云南阿诺，玩的是她订制的路线，阿诺服务也很周到、主要是很热情，提前沟通好行程，到了云南基本不需要自己再操心了，真的很省心，云南旅游相当开心的一次
        </p>
        <p>
                去年10月中旬，找的是网上口碑非常好的云南阿诺，玩的是她订制的路线，阿诺服务也很周到、主要是很热情，提前沟通好行程，到了云南基本不需要自己再操心了，真的很省心，云南旅游相当开心的一次
        </p>
        <p>
                去年10月中旬，找的是网上口碑非常好的云南阿诺，玩的是她订制的路线，阿诺服务也很周到、主要是很热情，提前沟通好行程，到了云南基本不需要自己再操心了，真的很省心，云南旅游相当开心的一次
        </p>
    </div>
</body>
</html>

css3选择器

nth-child 这个代表的是选中所有儿子元素中的第几个；nth-of-type 是选中儿子元素中特定类型中的第几个

/* .main>p:nth-child(4){
        background:cadetblue;
    } */
/* 正数所有儿子中的第几个 */
/* ul>li:nth-child(3){
        background:green;
    } */
/* 最后一个 */
/* ul>li:last-child{
        background:coral;
    } */
/* 第一个 */
/* ul>li:first-child{
        background:cornflowerblue;
    } */
/* 倒数第几个 */
/* ul>li:nth-last-child(2){
          font-size:100px;
    } */
/* 偶数 even */
ul>li:nth-child(2n){
        background:cornflowerblue;
}
/* 奇数 odd*/
ul>li:nth-child(2n+1){
        background:lightgreen;
}
.main>p:nth-child(4){
        background:cadetblue;
}
</style>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<div class="main">
<h1>1</h1>
<h2>2</h2>
<p>p1</p>
<h4>h4</h4>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<p>p3</p>
<p>p4</p>
</div>

/* .main>p:nth-of-type(3){
          background:green;
      } */
.main>p:nth-last-of-type(2){
        background:green;
}
<div class="main">
<h1>1</h1>
<h2>2</h2>
<p>p1</p>
<h4>h4</h4>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<p>p3</p>
<p>p4</p>
</div>

定位：position

static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

相对定位

没有脱离文档流，位置还在
层级高于普通文档流
给绝对定位的元素做参照物
相对自身

绝对定位

脱离文档流
层级高于普通文档流的层级
绝对定位的元素在设置参照物的时候，必须是包含关系的上级元素
浏览器在寻找参照物的时候是按照就近原则进行查找，如果都没有设置，那它的参照物就是body
原本宽度可以继承，但是定位的元素，宽度不再继承了，是由自身内容决定的。如果是行内元素，定位之后，宽、高也可以起作用。
如果给绝对定位元素的宽度设置百分比的时候，那它是相对你参照物来说的，并不是父级。

绝对定位的参照物：position：relative或者position:absolute、position:fixed ,只要是三者之一即可。

固定定位

固定定位是相对于整个窗口的。

面试题：如何让一个元素在整个屏幕或者是一个盒子中水平垂直居中

让这个元素position：absolute；

left：50%；top：50%；
margin-left：负的盒子宽的一半；
margin-top:负的盒子高度的一半
.box{ width:200px; height:200px; background:green; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; }

精灵图

在做项目的时候，有时候咱们为了优化，减少http请求，会把多张图片合并到一张图片上面，这种图就是“精灵图”，也称“雪碧图”。(只针对小图)

精灵图的原理：通过改变background-position。再记住一点，在写精灵图的时候，background-position的x轴，y轴的值一定的负的。

把多张图片合并成一张，这样的图片就叫做“精灵图”或者是“雪碧图”。作用：正常的，有几张图片，网页在加载的时候，就得发送多少次http请求，但是如果做成精灵图，就能减少请求的次数，优化了加载速度。注意：但是并非所有的图都适合做精灵图，一般只用小图。

规律：

凡是精灵图，在写位置（background-position）的时候，这个值一定都是负的。

border-radius:50% (圆)

.box{
        width:300px;
        height:300px;
        background:gold;
        border-radius: 50%;
    }

transform常用的几个值

1、位移：translate

水平位移：transform：translateX(100px);
垂直位移：transform:translateY(100px);
复合位移：transform：translate(100px,200px);
Document *{ margin:0;padding:0px; } .box{ width:200px; height:200px; background:green; /* 水平移动500px */ /* transform: translateX(500px); */ /* 垂直移动500px */ /* transform:translateY(500px); */ /* 第一个值代表的是水平第二个值代表的是垂直 */ transform:translate(200px,300px); /* 如何让一个元素在屏幕中水平垂直居中第二种方法 position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); */ }

2、scale 缩放

transform:scale(x,y),x代表的是缩放宽度的x倍，y代表的是缩放高度的y倍
transform:scale(n);代表的同时缩放宽度和高度的n倍
scale 缩放 *{ margin:0;padding:0; } .box{ width:200px; height:200px; background:green; /* 第一个值：代表的是缩放宽度的倍数第二个值：代表的是缩放的高度的倍数 */ /* transform:scale(2,0.5); */ /* 一个值的时候代表，宽和高同时缩放n倍 */ transform:scale(0.5); }

3、rotate:代表旋转多少度，可以是负值,单位是deg

transform:rotateX(45deg);代表的是围绕着x轴旋转45deg; （想象翻单杠的运动轨迹）
transform:rotateY(45deg)；代表的是围绕着y轴进行旋转45deg;(想象跳钢管舞)
transform:rotateZ(45deg);代表围绕着z轴进行旋转45deg；（大转盘，垂着转盘的轴）

4、skew:倾斜

transform：skewX（45deg）沿着X轴倾斜

transform：skewY（45deg）；沿着y轴倾斜

transform：skew（10deg，15deg），沿着x轴和y轴倾斜转换

4、transform-origin：x,y; 改变元素变形时候的作用原点。

水平方向：left、 center、 right；
垂直方向：top、center、bottom；

5、transform-style:

flat 默认值（平面的）;
preserve-3d;代表的是三维空间，立体的；

6、perspective 给父级元素增加这个属性，它的子元素会有近大远小的效果。代表观察者距离舞蹈的距离，通俗可以理解为照相机的景深。例如：perspective:1000px; 它下面的元素会有一个透视的效果。

过渡动画

transition

动画的属性： transition-property:height;
动画执行的时间： transition-duration: 2s;
运动曲线： transition-timing-function: linear;
延迟： transition-delay: 1s;
简写：transition:all 2s linear 1s;

运动曲线

值

描述

linear

规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。

ease

规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。

ease-in

规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。

ease-out

规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。

ease-in-out

规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier(

)

在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

web.chacuo.net/css3beziert…

animation

animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
动画执行的次数：animation-iteration-count ，可以是具体的数字，比如3代表就是执行3次；还可以设置成无限循环 infinite;
设置动画的状态：animation-fill-mode；
forwards:当动画结束，停留在最后一帧
backwards:在动画中有延迟的时候，设置backwards，会迅速的跑到第一桢开始执行动画
both:当设置的有延迟的时候，动画迅速以第一桢开始，当动画结束的时候，停留在最后一帧。

animation中的direction属性值

值

描述

测试

normal

默认值。动画按正常播放。

测试 »

reverse

动画反向播放。

测试 »

alternate

动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。

测试 »

alternate-reverse

动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

测试 »

initial

设置该属性为它的默认值。请参阅

initial

。

inherit

从父元素继承该属性。请参阅

inherit

。

产品形态：

第一种：pc端和移动端共用一个域名的，比如
华为：www.huawei.com/cn/?ic\_med…
苹果：www.apple.com/cn/?afid=p2…
第二种：pc端和移动端用两个域名的，pc端和移动分别做了两套，比如：小米、京东、淘宝，一般域名中带有m的都是移动端。
京东pc：www.jd.com/
京东移动： m.jd.com/
小米pc：https//www.mi.com/
小米移动：m.mi.com/

总结：什么时候共用一套，什么时候用两套？

当结构比较简单的时候，我们可以共用一套。当结构比较复杂我们就可以写两套。

pc端和移动端的区别

事件上的区别：pc端有鼠标，所以会有与鼠标相关的事件：比如点击、滑过等。但是移动端没有鼠标，只有与手指相关的一些事件，比如滑屏，左滑、右滑等事件。
浏览器兼容性：pc端需要考虑各个浏览器的兼容性问题，比如：火狐、谷歌、ie等，但是移动端不需要考虑各个浏览器的兼容问题，它的内核就是webkit和谷歌一样。但是移动端需要考虑适配问题，因为各个手机屏幕不一样大，而且机型不同，有时候也会有一定的兼容问题。

设计稿的尺寸

640x1136的宽度(单屏的页面)?参照iphone5手机分辨率:320*2

750x1334的宽度(单屏的页面)?参照iphone6手机分辨率:375*2

414x 736的宽度(单屏的页面)?参照iphone6plus?手机分辨率:414*3

新增标签

除了video 和audio 是行内块，其它的都是块级元素。

video 和audio 带的一些属性

audio的兼容性处理

<audio controls>
    <source src=”http://demo.mimvp.com/html5/take_you_fly.ogg” />
    <source src=”http://demo.mimvp.com/html5/take_you_fly.mp3″ />
    <source src=”http://demo.mimvp.com/html5/take_you_fly.wav” />
</audio>

新增的表单元素

<h3>新增的h5表单元素</h3>
    <!-- 数字 -->
    <input type="number">
    <!-- 搜索 -->
    <input type="search">
    <!-- 电话 -->
    <input type="tel">
    <!-- 颜色 -->
    <input type="color">
    <!-- 范围 -->
    <input type="range">
    <!-- 上传文件 -->
    <input type="file">
    <!-- 日期 -->
    <input type="date">
    <!-- 邮件 -->
    <input type="email">

css3需要增加的私有前缀

-webkit-border-radius:50%; //谷歌
      -moz-border-radius:50%;    //火狐
      -ms-border-radius:50% ;    //ie
      -o-border-radius:50%;      //欧朋
      border-radius:50% ;    //标准写法

css3补充：

border-radius 也有四个值，顺序也是按照顺时针，border-radius:50%; 圆角或者那个值写成宽度的一半（前提：宽高一样）
box-shadow：
第一个值：阴影水平偏移
第二个值：阴影垂直偏移
第三个值：阴影的模糊度(模糊的距离)
第四个值：阴影的大小
第五个值：颜色
第六个值：默认是outset inset 内阴影
Document *{ margin:0; padding:0; } body{ background:#000; } .box1{ width:200px; height:200px; background:gold; border-radius: 50%; /* 第一个值：阴影水平偏移第二个值：阴影垂直偏移第三个值：阴影的模糊度(模糊的距离) 第四个值：阴影的大小第五个值：颜色第六个值：默认是outset inset 内阴影 */ box-shadow:1px 1px 10px 4px lightblue; } </style>

box-sizing

border-box:ie盒模型，代码中的width就是大盒子的总宽
content-box：标准盒模型，代码中的width指的是content的宽。（默认）

渐变

渐变可以分为两种：

线性渐变（Linear Gradients）
径向渐变（Radial Gradients）

1、线性渐变默认是从上到下

.box{
  background:linear-gradient(red,green);
  background:-webkit-linear-gradient(red,green);
}

2、从一个方向到另一个方向（left 、right 、bottom、top）

下面的例子就是从左到右

background:linear-gradient(left,red,green);
background:-webkit-linear-gradient(left,red,green);

3、对角的，两个方向可以进行组合，比如下面的就是从左上角到右下角

background:linear-gradient(left top,red,green);
background:-webkit-linear-gradient(left top,red,green);

4、还可以是角度

background:linear-gradient(90deg,red,green);
background:-webkit-linear-gradient(90deg,red,green);

径向渐变：默认的形状是椭圆，至少得有两个颜色值。

形状：ellipse 椭圆（默认），circle（圆）

.box{
        width:400px;
        height:600px;
        margin:0 auto;
        background:radial-gradient(circle,red,green);
        background:-webkit-gradient(circle,red,green);

    }

小球

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background:#000;
        }
    .progress{
        width: 200px;
        height: 200px;
        background:-webkit-radial-gradient(rgb(24, 24, 237) 10%,rgb(21, 21, 218) 30%,rgb(23, 23, 153));
        border-radius: 50%;
       box-shadow: 0px 0px 50px 0px rgb(3, 3, 63) inset;
        
    }
    </style>
</head>
<body>
    <div class="progress">
       
    </div>
</body>
</html>

进度条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background:#000;
        }
        .progress{
            width:0px;
            height: 20px;
            margin:0 auto;
            background:-webkit-linear-gradient(left top,
                #b5e61d 0%,
                #b5e61d 25%,
                #fff200 25%,
                #fff200 50%,
                #b5e61d 50%,
                #b5e61d 75%,
                #fff200 75%,
                #fff200 100%

                );
            background-size:10px 10px;
            animation: progress 1.5s linear infinite;
            position:absolute;
        }
        
        .progressOuter{
            width:200px;
            height: 20px;
            background:#fff;
            margin:100px auto;
            position:relative;
        }
        @keyframes progress{
            0%{
                width:0;
                background-position:0 0;
            }
            100%{
                width:100%;
                background-position:0px 100px;
            }
        }
    </style>
</head>
<body>
    <div class="progressOuter">
        <div class="progress"></div>
    </div>
   
</body>
</html>

视口（viewport）

当我们不加视口的时候，模拟移动端，body的宽度默认是980px,并不是手机屏幕的宽度，如果想要把咱们的页面在手机屏幕中显示完全，就会进行缩放，这样的话，里面的文字等就会看不清楚，为了避免这种情况，通常咱们会加视口，让页面的宽度等于手机屏幕的宽度。

在写移动端的时候一定要加上下面的代码，快捷键：meta:vp + tab

<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

媒体查询

@media 针对不同媒体类型可以定制不同的样式规则。例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。但是这些多媒体类型在很多设备上支持还不够友好。

@media not|only mediatype and (expressions) { CSS 代码...; }

媒体类型

媒体查询案例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin:0;padding:0;
    }
    .box{
        width:200px;
        height:200px;
        background:green;
    }
    /* 
       当屏幕的宽度小于600px的时候，我就让.box 这个盒子背景颜色pink

     */

     @media screen and (max-width:600px){
         .box{
             background:pink;
         }
     }
     @media screen and (min-width:700px){
         .box{
             background:gold;
         }
     }
     /* 大于等300 小于等于800 */
    @media screen and (min-width:300px) and (max-width:800){

    }

    /* 需求：小于768px的时候显示一个颜色
             大于768到1200 显示一个颜色
             大于1200的时候显示一个颜色 
             */
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

媒体查询案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
            margin:0;padding:0;
    }
    .box{
        width:200px;
        height:200px;
        background:green;
    }
    @media screen and (max-width:768px){
       .box{
           background:pink;
       }
    }
    @media screen and (min-width:769px) and (max-width:1200px){
        .box{
           background:gold;
       }
    }

    @media screen and (min-width:1201px){
        .box{
           background:darkseagreen;
       }
    }
    </style>
</head>
<body>
    <!-- 

         /* 需求：小于768px的时候显示一个颜色
             大于768到1200 显示一个颜色
             大于1200的时候显示一个颜色 
         */
     -->
     <div class="box"></div>
</body>
</html>

媒体查询案例3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul,ol{
            list-style: none;
        }

        .box>li{
          width:12.5%;
          height:50px;
          text-align: center;
          line-height: 50px;
          border:1px solid lightgreen;
          float:left;
          box-sizing:border-box;
        }

        /* 大于等于1200 的时候显示8个
           大于等于900 小于1200的时候显示4个
           大于等于768px 小于900的时候显示2个
           小于768px 的时候显示一个

         */

        @media screen and (min-width:1200px){
            .box>li{
                width:12.5%;
            }
        }

        @media screen and (min-width:900px) and (max-width:1199px){
            .box>li{
                width:25%;
            }
        }

        @media screen and (min-width:768px) and (max-width:899px){
            .box>li{
                width:50%;
            }
        }

        @media screen and (max-width:767px){
            .box>li{
                width:100%;
            }
        }



    </style>
</head>
<body>
   <ul class="box">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
   </ul>
</body>
</html>

rem

rem 是指根元素（root element）的字体大小。根元素就是我们所说的html元素，默认的情况下，根元素字体的字体大小是16px;

那我们做移动端的响应式开发，如果纯粹用之前所说的媒体查询，那么我们的代码就会很多，写起来也不是很方便。那么怎么办呢？我们就可以结合我们的rem。

rem做移动端的思想？当我们拿到设计稿的时候，如果可以按照设计稿的尺寸去写，然后通过更改一个值，就能更改页面中所写的css，那是不是会很方便，rem刚好就是。 1rem=html的字体大小（默认情况下是16px）；

如果我们随着移动端屏幕的改变，然后改变下html的字体大小，就可以达到刚才的目的。

屏幕的宽度/设计稿的尺寸=x/100; 根据这个计算公式我们是不是可以算出移动端屏幕改变时候的根元素应该具有的字体大小。

 <script>
        (function () {
            function computed() {
                // 获取屏幕的宽度
                var win = document.documentElement.clientWidth || document.body.clientWidth;
                // 设计稿的尺寸
                var des = 640;
                // 如果屏幕的宽度>=设计稿的尺寸，我们
                if (win >= des) {
                    document.documentElement.style.fontSize ="100px";
                    return;
                }
                document.documentElement.style.fontSize = win / des * 100 + "px";
            }
            computed();
            window.onresize=function(){
              computed();
            }

        })();
    </script>

flex布局

1、 flex 布局的出现

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。

2、flex布局的兼容性问题

注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

3、flex 布局的定义

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。flex 布局有两个值：

display:flex; 代表的是块级
display:inline-flex; 代表的是行内块

下面的例子证明，display:flex; 的时候，两个div是上下排列的，但是如果是display：inline-flex 的时候是左右排列的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
        /* 
          flex 布局有两个值：
          display:flex;代表的是块级
          display:inline-flex;代表的是行内块
         */
      *{
          margin:0;
          padding:0;
      }
       .box1{
           width: 100px;
           height: 100px;
           background:green;
           display:inline-flex;
       }
       .box2{
           width: 100px;
           height: 100px;
           background:pink;
           display:inline-flex;
       }
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>

4、flex 布局的基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

5、容器的属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

5.1 flex-direction属性: 设置主轴的方向

row：主轴的方向是水平，从从左到右
column：主轴的方向是垂直的，从上到下
row-reverse：主轴的方向是水平，从右到左
column-reverse：主轴的方向是垂直的，从下到上

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    *{
        margin:0;padding:0;
    }
    ul,ol{
        list-style: none;
    }
    ul{
        display:flex;
        /* flex-direction: row; */
        /* flex-direction: column; */
        /* flex-direction: row-reverse; */
        flex-direction: column-reverse;
    }
    ul>li{
        width:100px;
        height:100px;
        background:green;
        margin-left:10px;
    }
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>

5.2 flex-wrap:

wrap: 换行
nowrap: 不换行（默认）
wrap-reverse：换行，不过第一行在最下面

5.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

flex-flow:row wrap;写了这个之后，下面的案例效果跟上一个一样

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex-flow</title>
<style>
    *{
        margin:0;padding:0;
    }
    /* 
      flex-flow 是flex-direction 和flex-wrap 的简写
     */
    ul,ol{
        list-style: none;
    }
    ul{
        display:flex;
        flex-flow:row wrap
    }
    ul>li{
        width:400px;
        height:400px;
        background:green;
        margin-left:10px;
        margin-bottom:10px;
    }
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>

5.4 justify-content属性定义了项目在主轴上的对齐方式。

space-evenly

5.5 align-items属性：align-items属性定义项目在交叉轴上如何对齐。

align-items: flex-start | flex-end | center | baseline | stretch;

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

5.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。（也就是说得有项目换行）

.box {

}

六、项目的属性

以下6个属性设置在项目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

6.1 order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

6.2 flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

.item {
flex-grow: <number>; /* default 0 */
}

6.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

6.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

.item {
flex-basis: <length> | auto; /* default auto */
}

6.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

flex：0 1 auto；默认值

flex：none；代表的意思等同于 flex：0 0 auto；

flex：auto；代表的意思是flex：1 1 auto；

flex：number；当flex取值为一个非负数字，则该数字为flex-grow的值，flex-shrink的值为1，flex-basis的值为0%；

6.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

标签汇总

p 标签
h1-h6标题
a 超链接
img 图片
div 大盒子标签
span 小盒子标签
格式化
strong/b 加粗
i/em 斜体
del 删除线
small
big
预格式化 :pre
列表：
无序列表 ul li
有序列表 ol li
定义列表 dl dt dd
table 表格：
caption 表格的标题
tr
td
th
thead
tbody
tfoot
label
input
type类型
text 文本输入框
password 密码
button（value=“支付”）
submit 提交
reset 重置
radio 单选
checkbox 多选
button 按钮
textarea 文本域
select 下拉框
form

h5新增

video 视频
audio 音频
header
footer
main
aside
section
nav
figure figcaption
article
input
type
number
tel
search
email
color
range
file 上传文件
date

标签的划分

块级元素
独占一行
可以设置宽和高
排列方式：从上到下
行内块
可以共占一行
设置宽和高起作用
排列方式：从左到右
行内元素
可以共占一行
写宽高不起作用
排列方式从左到右

划分

块级：p h1-h6 div 列表表格 header footer main aside nav figure figcaption、article、pre
行内块元素 img button input textarea video audio select
行内元素a span label b strong i em del big small

布局

浮动
脱离文档流
浮动的方向是参照它父级
宽度本来是可继承的，但是浮动的元素宽度是本身内容的大小
行内元素一旦浮动，设置宽、高也起作用
浮动产生的问题(父级的高度塌陷)
给父级加高度
给父级加overflow：hidden；
给父级盒子的末尾添加div，给这个div盒子设置样式clear：both
直接给浮动元素的父级增加类名clearfix（保证css 里面有这个代码）
定位
静态定位 static
相对定位 relative （相对自身）
绝对定位 absolute （相对其他元素，参照物有规则）
z-index 调层级的，这个值越大，就会在最上面，值最小的在最下面。
固定定位 fixed （相对窗口）
flex布局：兼容性问题，ie10以上才支持
display：flex/inline-flex;
“容器” “项目” 两个轴
容器写的属性
flex-direction
flex-wrap
flex-flow
justify-content(主轴对齐方式)
align-items (项目在侧轴上的对齐方式)
align-content( 结合flex-wrap：wrap)
项目上的属性
order：顺序，值越小越靠前
flex-grow
flex-shrink
flex-basis
flex： flex-grow flex-shrink flex-basis
align-self

css3

边框：border-radius
阴影：box-shadow
背景：background-size
渐变：
线性渐变（Linear Gradients）：向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）：由它们的中心定义
文字阴影：text-shadow

/* 第一个值代表的是 x轴偏移第二个值代表的是 y轴偏移第三个值代表的是阴影模糊大小第四个值阴影的颜色 */ text-shadow: 6px 6px 26px lightblue;
transform
translate （位移）
rotate （旋转）
scale （缩放）
skew （倾斜）
transition 过渡动画
animation 动画
媒体查询
flex布局

单行显示…

<style>
     p{
         width:100px;
         border:1px solid green;
         /* 超出隐藏 */
         overflow: hidden;
         /* 文字隐藏的方式是... */
         text-overflow: ellipsis; 
         /* 不换行 */
         white-space: nowrap;
     }
</style>

多行显示…

p{
width:100px;
border:1px solid green;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* 控制让哪一行显示... */
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

禁止用户选中文字

body{user-select: none;}

字母和单词之间的间隙

letter-spacing-----是字母之间的间隙，
word-spacing------是单词之间的间隙

p{ word-spacing: 20px; }
你们真的很棒！

You are really great!

注意：对于汉字来说，如果要想用word-spacing，必须文字和文字之间有一定的间隙，代表他们是独立的单词，不然word-spacing 不起作用。

透明度的兼容性处理

.opacity{
filter:alpha(opacity=50); /* IE */

opacity: 0.5; /* 支持opacity的浏览器*/
}

高斯模糊

<style>
      img{
          filter: blur(50px);
      }
</style>

3、两种经典布局：

1、圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    *{
        margin:0;
        padding:0;
    }
    body{
        min-width:600px;
    }
    .container{
        height:500px;
        padding:0 200px;
        box-sizing: border-box;
    }
    .container>div{
        height:100%;
        float:left;
    }
    .main{
        width:100%;
        background:pink;
    }
    .left{
        width:200px;
        background:lightblue;
        margin-left:-100%;
        position:relative;
        left:-200px;
    }
    .right{
        width:200px;
        background:lawngreen;
        margin-left:-200px;
        position:relative;
        left:200px;
    }
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

2、双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    *{
        margin:0;
        padding:0;
    }
    body{
        min-width:600px;
    }
    .contain{
        height:500px;
    }
    .contain>div{
        height:100%;
        float:left;
    }
    .main{
        width:100%;
        padding:0 200px;
        background:pink;
        box-sizing: border-box;
    }
    .left{
        width:200px;
        background:green;
        margin-left:-100%;
    }
    .right{
        width:200px;
        background:hotpink;
        margin-left:-200px;
    }
</style>
</head>
<body>
<div class="contain">
<div class="main">
<div class="inner">
inner
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

4、块级格式上下文：

定义：块级格式上下文全称Block Formatting Contexts ，简称BFC，它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局。不同的BFC它们在进行渲染时互不干扰。

。

常规流块盒，在水平方向上，必须撑满包含块（也就是继承父级的宽度）
常规流块盒，在排列方式上，是上下排列（块级元素的特点）
常规流块盒，如果无缝相邻，则进行外边距合并（margin值穿透）
常规流块盒的自动高度和摆放位置，会无视浮动元素。

BFC 产生的条件

1.根元素：html

浮动和定位的元素（定位固定定位和绝对定位）
overflow 不等于visible
display 为以下其中之一的值 inline-block，table-cell，table-caption；

HTML和CSS 下

制作三角形

overflow 常用的几个值

background 几个常用的值

语法

背景图片练习案例

css3选择器

定位：position

相对定位

绝对定位

固定定位

面试题：如何让一个元素在整个屏幕或者是一个盒子中水平垂直居中

精灵图

规律：

border-radius:50% (圆)

transform常用的几个值

过渡动画

animation

animation中的direction属性值

产品形态：

总结：什么时候共用一套，什么时候用两套？

pc端和移动端的区别

设计稿的尺寸

新增标签

audio的兼容性处理

新增的表单元素

css3需要增加的私有前缀

css3补充：

box-sizing

渐变

1、线性渐变 默认是从上到下

小球

进度条

视口（viewport）

媒体查询

媒体类型

媒体查询案例1

媒体查询案例2

媒体查询案例3

rem

flex布局

1、 flex 布局的出现

2、flex布局的兼容性问题

3、flex 布局的定义

4、flex 布局的基本概念

5、容器的属性

六、项目的属性

标签汇总

h5新增

标签的划分

划分

布局

css3

单行显示…

多行显示…

禁止用户选中文字

字母和单词之间的间隙

透明度的兼容性处理

高斯模糊

3、两种经典布局：

1、圣杯布局

2、双飞翼布局

4、块级格式上下文：

定义：块级格式上下文全称Block Formatting Contexts ，简称BFC，它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局。不同的BFC它们在进行渲染时互不干扰。

BFC 产生的条件

1、线性渐变默认是从上到下