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新增的语义化标签

      <header>    ：头部标签

      <nav>      :导航标签

      <article>  ：内容标签

      <section>  ：定义文档的某个区域

      <aside>    ：侧边栏标签

      <footer>    ：尾部标签

  1.2:  多媒体标签

      音频：<auto>

      视频：<vido>

      <vido>  语法

      <vido src = "文件地址" controls = "controls"></vido>

      <video>常见属性

          autoplay  autoplay        视频自动播放（谷歌浏览器需要议案家muted来解决自动播放）

          controls  controls        显示播放控件

          width    plxels(像素)    设置播放器宽度

          height    plxels(像素)      高度

          loop      loop              循环播放

                      auto（预先加载）

          preload    none(不应加载视频) 规定是否预加载视频，有qutoplay就·忽略该视频

        、src        url              地址

          poster    imgurl            加载等待画面图片

          muted      muted            静音播放

      <vido width="320" height = "240" controls>

            <source  src = "文件名.mp4" type = "video/mp4">

              <source  src = "文件名.ogg" type = "video/ogg">

              您的浏览器不支持video标签

      </video>

11：html5 新增表单属性

  required        required        内容必须为空

  placholder      提示文本          表单提示信息

  autofocus        autofocus        自动聚焦

  autocompete      off/on          当用户在字段开始键入时，浏览器基于之前键入过的值，应显示出在字段中填写的选项

                                    默认已经打开，autocomplete = "on" 关闭autocomplete

12移动布局：

  meta视口标签

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

  属性

  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文件

        语法规范

        <link rel = "stylesheet"  media = "mediatype and|not|only (media feature)" href = "mystylesheet.css">

        例如

        <link rel = "stylesheet" href = "style320.css" media="screen and (min-width:320px)">

        <link rel = "stylesheet" href = "style640.css" media="screen and (min-width:640px)">

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：但是已经能实现不同屏幕下页面元素盒子等比例缩放效果