SOURCE

<div>
    <pre>
背景图片
    background-image:url("路径")
    background-repeat:no-repeat;    不重复
    background-position:center top; 居中
    background-position: x轴 y轴;  （20 center--这是混合单位）  只指定一个值，另一个居中

    位置：background-attachment: fixed(固定) | scroll（滚动）

    复合写法 background: black url('') repeat-y  fixed top;
    
    背景色半透明： background: rgba (0,0,0,0.3)  r g b (a:透明度)

行高的继承
    .body{font:12px/1.5 microsoft YaHei;(行高是文字的1.5倍)}
        .body div{font-size:14px}  --这里字体为 14px 行高是14的1.5倍
        .body li{}   --这里没有指定font-size大小, 但字为12px 继承了body的值

css选择器优级
    继承 0000   元素 0001   类 0010     id 0100     行内样式 1000   ！important  无穷大


案例    table 表格
    <table aligin="center" cellspacing="0"(?)></table>
    border-collapse:collapse;   --合并相邻的边框

margin 外边距
    外边距合并  解决方案 1.父级添加上边框 2.父级添加上内边距  3.给父级添加overflow:hidden

圆角边框 166
    border-radius:50%   --圆形
盒子阴影 167
    box-shadow: h-shadow（水平阴影） v-shadow（垂直阴影） blur（模糊距离） spread(阴影尺寸) color inset|outset(内阴影)
文字阴影 168
    text-shadow: h-shadow v-shadow blur color

浮动 169
    标准 浮动 定位

清浮动 183
    1.额外标签法    在最后面添加一个空标签<div style="clear:both"></div>(必须是块级元素，不能是行内元素如span)
    2.给父级添加 overflow： hidden;     缺点：隐藏盒子以外的内容
    3. 伪元素清除     .clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
                     .clearfix{*zomm:1;}
                    然后给要清浮动的父元素添加类名clearfix      比较高效
    4。双伪元素清除     .clearfix:before,.clearfix:after{content:"";display:table;}
                       .clearfix:after{clear:both;}
                       .clearfix{*zoom:1}


定位
    粘性定位 sticky     position:sticky; top:100px;   top走到100变成固定定位
    静态定位 static     相当于不定位
    相对定位 relative
    绝对定位 absolute

    叠放次序 z-index    默认是先来后到，后者居上
    定位的扩展应用p235    绝对定位居中  left:50%; margin-left:-(offsetwidth-50%)

    特性：  
        1.行内元素如span 添加定位，可直接设置宽高
        2.块级元素如div 添加定位 变行内块
        3.定位的盒子不会外 边距塌陷

精灵图案例 p254

字体图标    
    下载网站 字库 http://icomoon.io
                www.iconfont.cn
    使用：1.把font文件夹放到 项目根目录
          2.引入style.css字体声明:  打开style.css 把第一段代码放到项目要用的css文件中
          3.标签插入图标， 图标参考demo.html文件 如 <span>(这里粘贴图标代号)</span>
          4.标签声明 如： span{font-family:'icomoon'}
    添加新图标：
        网站上点 import icons 选择目录：selection.json

css用边框制作三角形的技巧和应用 
    等边三角形：p260 w:0;h:0 {border:20px solid transparent; border-left-color:red}
    直角三角形：w:0;h:0{border-top:100px solid transparent;border-right:50px solid red;border-bottom:0;border-left:0;}
                简写{border-color:transparent red transparent transparent;border-style:solid;border-width:100px 50px 0 0;}

鼠标样式： {cursor:default(pointer-move-text- not-allowed/禁止)}

表单的样式：
    去掉轮廓线：input{outline:none}

文本域去掉拽 textarea{ resize:none;}

图片文本文本对齐：p263
   img{ vertical-align：bottom( -middle -top)}  --行内块有效

图片下侧有空隙  解决方法：
    1.给图片添加 vertical-align:middle/top/bottom
    2.把图片转换为块级元素 display:block;

文本溢出省略号显示：
    1. 强制
    white-space:normal/文字自动换行
    white-space:nowrap/强制一行内显示
    overflow:hidden/溢出部分隐藏
    text-overflow:ellipsis/溢出用省略号代替
多行文本溢出使用省略号代替：
    {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2/第2行超出启用; -webkit-box-orient: vertical;}


常见布局技巧：
    margin负值应用 margin-left:-1; 可使盒子边框重叠
    重叠后会有z-index题， 解决： 加相对定位 或 提高z-index值

css 初始化
    

-------------html5 && css3

新标签 新特性
    <header></header>
    <nav></nav>
    <article></article>
    <section></section>
    <aside></aside>
    <footer></footer>

多媒体标签：
    <video src=""></video>
    <audio src=""></audio>
    
属性类选择器：
    input[type=xxx]{}
    input[class^=xxx]{} -包含有xxx的元素
    ...

结构选择器              --- 属性和结构 选择器的权重是10
    ul:first-child{} -第一个子元素
    ul:last-child{} -最后一个子元素
    ul:nth-child(2){}   -第2个子元素
    ul:nth-child(even){} -偶数
    ul:nth-child(odd){}     -奇数
    ol li:nth-child(n){}  -所有的li 2n/偶数  2n+1/奇数  5n/5,10,15以此类推
                        n+5/从第5个开始到最后  -n+5/前面5个
    section div :nth-of-type(1){}   -type为div的第一个div元素   ---这个权重是12


伪元素选择器
    a::before{}
    a::after{}
    使用 例:   <div>是</div>        ---伪元素是行内 也可转 行内块设置属性
        div::before{content:'我'}
        div::after{content:'谁'}
    应用场景:
      .todou::before{样式}   .todou:hover::before{hover调用before样式}
      *清浮动  .clearfix:before,.cliearfix:after{}

css3 盒子模型
    {box-sizing:content-box}    --这是传统的盒子模型 padding,border 会撑开大小 w h
    {box-sizing:border-box}     --这是新特属性  padding,border 不会撑天大小 w h

css3 滤镜 filter:
    模糊： img{filter:blur(10px)}   --图片变模糊的效果

css3 函数 calc
    .son{width:calc(100%-30px)}   --子盒子宽永远比父盒子小30px

css3 过渡 transition
    *谁做过渡给谁加
    all/属性    0.5s(不可省略)/花费时间   ease/运动曲线   0s(默认)/何时开始
    1.transition:width .5s ease 1s; 宽用0.5秒完成过渡动画 开始时先延迟1秒
    2.transition:width .5s, height: .5s;
    例：div{w:100;h:100;b:red; transition: all 0.5s}    div:hover{w:200;h:200}


案例 --品优购商城   重点
    logo seo 优化：
        1.logo里放一个h1,目的是提权，告诉搜索引擎这个地方很重要。
        2.h1里放一个a链接，可以返回首页，把logo的背景图放这里。
        3.a里面要放网站的名称，但文字不要显示出来。 方法：1.font-size:0; 方法2：text-indent:-999px;overflow:hidden;
        4.<a href="index.html" title="提示文字（网站名称）"> 这样logo上就可以看到提示文字了
            <h1><a href="index.html" title="品优购商城">品优购商城</a></h1>

    选中前三个元素 -n+3

    通用列表页制作
    1. 根目录新建list.html
    2. 头部，底部通用部复制过来
    3. 导入common.css
    4. 新建 list.css,引入 list.html
        header 搜索优化部分也要引入

    电梯导航


    解决hove时显示边框，多出1px的问题。 预先设置一个透明色的边框，border:1px solid transparent; overflow:hidden;

    每行最后一个盒子不要右边框，如： div:nth-child(4n){border-right:none;}

register.html
    这部分完全重写，需引入favicon.ico,base.css,和新建 r register.css



域名申请： https://free.3v.do/


-------2d旋转

2d转换  translate:translate(x,y)
    transform:translate(x,y)
    transform:translatX(50%) --移动是相对于自身盒子的50%

2d转换之旋转    
    transform:rotate(45deg);  --顺时针旋转45度
    transform:rotate(360); transition:all 1s; --配合过渡才可实现动画
    案例  做一个向下的三角， hover 旋转向上---要点： abbsolue;伪元素，transform:rotate

2d转换中心点 transform-origin:
    transform-origin:left bottom;   --left,bottom/50% 50%;/10px,20px;
    案例 盒子hover子盒子按中心点旋转  要点：div:hover::before{}

 2d转换 绽放    transform:scale(x,y);
    参数写法：（0.5,0.5) / (2,2) / (2) 
    优点：不会影响布局， 还可设置中心点

综合案例： 图片缩放
    要点: 父盒子overflow; hover加transition; 

综合案例： 分页按钮缩放
    要点： ul>li hover放大

旋转的综合写法：
transform:translate(150px,50px) rotate(180deg) scale(2,2);
    注意位移要放前面
    



----css3动画    
animation    步骤：          *号必写
        1.定义动画
            @keyframes move{
                0%{transform:translateX(0)}     --开始状态  也可用 from to代替0%,100%-30px
                100%{transform:translatX(1000px);}   --结束状态 -- 用0% 可设置多外状态
                --扩展 100%{left:50%; transform:translateX(-50%)/可定位在中间}
            }
        2.调用动画*      {animation-name:move}
        3.持续时间*      {animation-duration:2s}
        4.运动曲线      {animation-timing-function:ease}   -ease/曲线 linear/均速
        5.何时开始      {animation-delay:1s}
        6.重复次数      animation-iteration-count:infinite;  -infinite/无限
        7.是不反方向播放    animation-direction:alternate;  
        8.是否回到起始状态  animation-fill-mode:backwards  -backwards/回到起始 forwards/停留
        9.暂停动画(一般配合hover写)          animation-play-state:running   -running/播放  paused/暂停
    简写： 
        animation: move 5s linear 2s infinite alternate;
        animation:name duration timing-function delay iteration-count direction fill-mode;

    案例： 据点图案例   一个圆点加几个外圈在div区域内不停的放天，实现波纹的效果
        要点：
            3个外圈.city div[class^="pulse"] {box-shadow:0 0 12px blue; border:radius:50%;transform:translate(-50%,-50%);position:absolute;
            top:50%;left:50%;w8px;h8px;animation:pulse 1.2s linear infinite}
            (注意权重).city div .pulse2{animation-delay:0.4s} .pulse3{animation-delay:0.8s}
            @keyframes pulse{0%{} 70%{w40;h40;opacity:1;} 100%{w70;h70;o:0;}}
            小盒在父盒中，
            scale 会让阴影放大所以不用

速度曲线细节
    linear/匀速 ease/慢-快-慢 ease-in/以低速开始 ease-out/以低速结束 ease-in-out/以低速开始和结束 steps()/分几步走完（用这个就不用ease）
    案例：奔跑的熊
        要点:使用步长切换精灵图片，实现奔跑动作,同个元素可以
             animation:bear is steps(9) infinite，move 1s forwards;

---------css3   3d转换
transform:translateX(100px) translateY(100px) translateZ(100px);
简写：transform:translate3d(0,100px,100px);

透视 perspective

3d旋转  rotate3d
 transform:rotateX(45px);
 transform:rotateY(45px);
 transform:rotateZ(45px);
 transform3d:(45px,45px,45px,180deg )

例 body{perspective:500px} img{transition:all 1s;w100;h100;dispaly:block;}img:hover{transform:rotateY或/y(180deg)}
    img:hover{transform3d(1,1,0,45deg)}--沿对角线旋转45deg

3d呈现 transfrom-style
    transform-style:flat --子元素不开启3d立体空间，默认值 
    transform-style:preserve-3d --子元素开启3d  

案例： y轴旋转看到盒了两面
    步骤： 
        1.结构 .box>.front+.back
        2.box要指定大小，添加3d呈现，body要加透视
        3.back要沿y轴旋转180度；
        4.box:hover 沿着y轴旋转180deg

案例：3d导航栏
    结构 ul>li>.box>.front_.bottom
    bottom 沿x轴向前旋转90度,位置沿y轴移动自身一半的距离 translateY(17.5) transform:rotateX(-90deg) 
    front向前(沿z轴)移动自身的一半, z-index:1;
    box要指定大小，添加3d呈现，li要加透视

案例：旋转木马
    结构：section>div*6     section开启3d style, section调用动画rotate 3s linear infinite, hover停止:section:hover{animation-play-state:paused;}
    body要加透视,第一个沿z轴移300px;第二个：行旋转再移动，transform:rotateY(60deg) translateZ(300px;)
    第三个rotateY(120deg) translateZ(300px);四: 180deg 五：240deg 六:300deg
    @keyframes rotate{0%{transform:rotateY(0)}100%{transform:rotaterY(360deg)}}




------移动端开发

flex布局
    display:flex  --转为块元素
    justify-content:space-around; --平均布布
    flex:1;     --铺满

    父盒子使用flex后，子元素的float,clear和 vertical-align 属性将失效
    伸缩布局=弹性布局=伸缩盒布局=flex布局

 -使用用flex称容器，它的子元素叫flex项目

flex 父项 常见6个属性
    flex-direction:         设置主轴的方向
        row x轴
        column  y轴
        row-reverse     -从右到左
        column-reverse  从下到上

    justify-content:         设置主轴上的子元素排列方式 水平居中
        flex-start -左对齐
        flex-end -右对齐
        flex-center -居中对齐
        flex-around -平均分配剩余空间
        flex-between -先两边贴，再平分剩余空间

    flex-wrap:               设置子元素是否换行
        wrap;   -自动换行
        nowrop; -不换行

    align-content：           设置侧轴上的子元素的排列方式（多行）
        center;                居中
        space-between;         子项在侧轴贴边，再平分剩余空间 
        flex-start;            从头到尾，按顺序排列
        space-around;           平分剩余空间
        stretch;                子项高度平分父元素高度

    align-items  设置侧轴上的子元素排列方式（单行）
        flex-start  -默认从上到下
        flex-end    从下到上
        center      -挤在一起垂直居中
        stretch     -拉伸

    flex-flow  复合属性，相当于同时设置了flex-direction 和 flex-wrap

--flex 布局 子项常风属性

    flex:   -分多少份占用
        0   -是默认值

    align-self:     -单独排列
        flex-end;   -排到最后位置
        order:-1    -默认是-1 


css3 背景颜色渐变
    background: -webkit-linear-gradient(left,red,blue);
    background: -webkit-linear-gradient(red,blue);
    background: -webkit-linear-gradient(top left,red,blue);

flex布局 案例：携程网移动端首页










rem布局 案例：苏宁移动端首页

关于@media 的理解
    如果要使屏幕有不同的宽度有对应大小的字体，那么需要要写多个css文件，同时引入index.html
    如(index.html里)：<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px")>
                     <link rel="stylesheet" href="style640.css" media="screen and (min-width:640px")>
    screen 大于320的引用 style320.css 的样式 , 大于640的引用 style640.css 的样式
    -------------用@media 可将这些样式写在一个css文件里
    @media screen and (min-width:320px){ html{font-size:10px;} }
    @media screen and (min-width:640px){ html{font-size:15px} }

less
    less的特点：
        less可以有变量，函数,Mixin(混入运算)，scope(作用域)，这些css都没有

    less的使用：
        定义变量(变量名color不能使用符号,数字不能作为开头，大小写有区分的) 
        @color:red; @font14: 14px;    div{ color: @color;}

    less的编译：
        vocode Less 插件    用该插件保存less文件，就会在同目录生成css文件
    
    less的嵌套：
        如果有伪类，交集选择器，伪元素 的如果没加&则被解析为父选择器后代
            a:{
                &:hover{color:red;}
            }

    less的运算：
        --运算符左右要空出一个空格
        --如果两个参数，有一个有单位（rem或px) 那么结果就以这个单位
        --如果两个参数都有单位，那么以前面的那个为单位 100rem / 40px 单位为rem
        color:#666-#222 = #444;  
        例：@border:5px + 5;  div{w:100 / 50rem;h:100px / 50rem;border: @border solid red;}

rem适配方案：
    1.让元素等比适配
    2.用媒体查询 @media 设置字体大小，然后用rem单位，实现等比缩放
    rem + 媒体查询 + less 技术
    





1. 制作 common.less 公共样式
2. 新建index.less 用 @import 导入 "common"
3. index.html 用 link 引入 index.css










</pre>

</div>


小工具
    fastStone Capture 测量尺
    开发工具之 Snipaste（超级截图工具）

pre{
    white-space: pre-wrap;
    word-wrap: break-word;
    -ms-word-wrap: break-word;
}

div{
    white-space: normal;
}