02-CSS3 笔记

CSS3中新特性样式篇

背景

background-origin：  规定背景图片的定位区域。
    ☞ padding-box   背景图像相对内边距定位（默认值）
    ☞ border-box    背景图像相对边框定位【以边框左上角为参照进行位置设置】
    ☞ content-box   背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置】

    备注：
    1. 默认盒子的背景图片是在盒子的内边距左上角对齐设置。

background-clip：   规定背景的绘制区域。
    ☞ border-box   背景被裁切到边框盒子位置 【将背景图片在整个容器中显示】
    ☞ padding-box  背景被裁切到内边距区域【将背景图片在内边距区域（包含内容区域）显示】
    ☞ content-box  背景被裁切到内容区域【将背景图片在内容区域显示】

background-size：   规定背景图片的尺寸。
    ☞ cover
    ☞ contain

边框

box-shadow：h-shadow v-shadow blur spread color inset;   盒子阴影
    说明：
    h-shadow:  水平阴影的位置
    v-shadow:  垂直阴影的位置
    blur:      模糊距离
    spread:    阴影的尺寸
    color:     阴影的颜色
    inset:     将外部阴影 (outset) 改为内部阴影。

border-radius：  边框圆角
border-image:    边框图片
	 
/* 设置边框图片 */
border-image-source: url("2.png");

/* 规定图像边框的向内偏移（边框图片裁切） : 不需要带单位*/
border-image-slice: number(代表图像中像素（如果是光栅图像）或矢量坐标（如果是矢量图像);
											% 相对于图像尺寸的百分比值：图像的宽度影响水平偏移，高度影响垂直偏移;
											fill 保留边框图像的中间部分;

/* 设置边框图片的平铺方式 */
border-image-repeat: stretch(拉伸) | round(铺满) | repeat(平铺)

/* 规定图片边框的宽度 */
border-image- 20px;

文本

☞设置文本阴影	 text-shadow: h-shadow v-shadow blur color;
  说明：
    h-shadow:   水平阴影的位置
    v-shadow:   垂直阴影的位置
    blur:       模糊的距离
    color:      阴影的颜色

CSS3新特性之选择器篇

☞ 属性选择器： 
    [属性名=值] {}
    [属性名] {}	      匹配对应的属性即可
    [属性名^=值] {}    以'值'开头
    [属性名*=值] {}    包含
    [属性名$=值] {}    以'值'结束
	
☞ 结构伪类选择器：
    :first-child {}          选中父元素中第一个子元素
    :last-child {}	     选中父元素中最后一个子元素
    :nth-child(n) {}         选中父元素中正数第n个子元素
    :nth-last-child(n) {}    选中父元素中倒数第n个子元素

    备注:
    n 的取值大于等于0
    n 可以设置预定义的值
    odd[选中奇数位置的元素]  
    even【选中偶数位置的元素】

    n 可以是一个表达式： an+b的格式

☞ 其他选择器：
    :target          被锚链接指向的时候会触发该选择器
    ::selection	     当被鼠标选中的时候的样式
    ::first-line     选中第一行
    ::first-letter   选中第一个字符
    
    ：表示伪类，::表示伪元素

CSS3新特性之颜色渐变

☞ 线性渐变：
    1. 开始颜色和结束颜色
    2. 渐变的方向
    3. 渐变的范围

    background-image: linear-gradient(
       to right,
       red,
       blue
    );

    备注：
      表示方向：
            1. to + right | top | bottom | left 
            2. 通过角度表示一个方向
                   0deg [从下向上渐变] 
                   90deg【从左向右】
  
 ☞ 径向渐变：
    /* 径向渐变 */
    background-image: radial-gradient(
       100px at center,
       red,
       blue
    );

2D转换

☞ 位移
    transform: translate(100px,100px);
    备注： 位移是相对元素自身的位置发生位置改变

☞ 旋转
    transform: rotate(60deg);
    备注： 取值为角度

☞ 缩放
    transform: scale(0.5,1);
    备注： 取值为倍数关系，缩小大于0小于1，放大设置大于1
	
☞ 倾斜
    transform: skew(30deg,30deg);
    备注： 第一个值代表沿着x轴方向倾斜
	  第二个值代表沿着y轴方向倾斜

3D转换

☞ 位移
    transform: translateX()  translateY()   translateZ()

☞ 旋转
    transform: rotateX(60deg)  rotateY(60deg)  rotateZ(60deg);

☞ 缩放
    transform: scaleX(0.5)  scaleY(1)  scaleZ(1);

☞ 倾斜
    transform: skewX(30deg) skewY();

☞ transform-style: preserve-3d;
    将平面图形转换为立体图形

CSS3新特性之动画篇

过渡(补间动画)

https://www.cnblogs.com/afighter/p/5731293.html

    /* 设置哪些属性要参与到过渡动画效果中： all */
    transition-property: all;

    /* 设置过渡执行时间 */
    transition-duration: 1s;

    /* 设置过渡延时执行时间 */
    transition-delay: 1s;

    /* 设置过渡的速度类型 */
    transition-timing-function: linear;

动画

    /* 1.定义动画集 */
    @keyframes  rotate {
          /* 定义开始状态  0%*/
          from {
                transform: rotateZ(0deg);
          }

          /* 结束状态 100%*/
          to {
                transform: rotateZ(360deg);
          }
    }
    /* 2.调用 */
    [选择器]{
	/* 动画名称 */
	animation-name: rotate;

	/* 设置动画时间 */
	animation-duration: 2s;

	/* 设置动画执行的次数:  infinite 无限执行; */
	animation-iteration-count: infinite;

	/* 动画执行的速度类型 */
	animation-timing-function: linear;

	/* 设置动画逆波 */
	animation-direction: alternate;

	/* 设置动画延时 */
	animation-delay: 1s;

	/* 设置动画结束时候的状态(执行的次数不能是无限次执行) */
	animation-fill-mode: forwards;

	/* 动画暂停 */
	animation-play-state: paused;
    }

注意： 1. 如果设置动画集使用的是百分比，那么记住百分比是相对整个动画执行时间的。

CSS3新特性之网页布局篇

伸缩布局或者弹性布局【响应式布局】

☞ 设置父元素为伸缩盒子【直接父元素】
    display： flex
	
    为什么在伸缩盒子中，子元素会在一行上显示？
    1. 子元素是按照伸缩盒子中主轴方向显示
    2. 只有伸缩盒子才有主轴和侧轴
    3. 主轴： 默认水平从左向右显示
    4. 侧轴： 始终要垂直于主轴

☞ 设置伸缩盒子主轴方向（flex-direction）
    flex-direction: row(默认值) | row-reverse | column | column-reverse; 

☞ 设置元素在主轴的对齐方式( justify-content)
    /* 设置子元素在主轴方向的对齐方式 */
    justify-content: flex-start(默认值) | flex-end | center | space-around | space-between ;

☞ 设置元素在侧轴的对齐方式 （align-items）
    align-items: flex-start | flex-end | center | stretch（默认值）;

☞ 设置元素是否换行显示（flex-wrap）
    1. 在伸缩盒子中所有的元素默认都会在一行上显示
    2. 如果希望换行：
    flex-wrap: wrap | nowrap;

☞ 设置元素换行后的对齐方式（ align-content）
    align-content: flex-start | flex-end | center | space-around | space-between | stretch(默认值);
    align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。

☞ order控制子项目的排列顺序，正序方式排序，从小到大(默认为0，值越小越排在前面)

补充CSS

盒模型

box-sizing: content-box | border-box;

      box-sizing: content-box; // 内盒(实际)大小 = width + border + padding
      box-sizing: border-box;  // 内盒(实际)大小 = width 

清除浮动

额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差。  我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。

父级添加overflow属性方法

可以通过触发BFC的方式，可以实现清除浮动效果。

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

优点：  代码简洁
缺点：  内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

使用after伪元素清除浮动

  .clearfix:after {
      content: "."; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden;
  }
  .clearfix {*zoom: 1;}   /* IE6、7 专有 */

优点： 符合闭合浮动思想  结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站： 百度、淘宝网、网易等

使用before和after双伪元素清除浮动

.clearfix:before,.clearfix:after { 
  content:".";
  display:table;
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

优点：  代码更简洁
缺点：  由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站： 小米、腾讯等

CSS Rest 类库,为跨浏览器兼容做准备(也可以直接运用jd网站的初始化)

normalize.css   只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。 你值得拥有。。 

- 保护有用的浏览器默认样式而不是完全去掉它们
- 一般化的样式：为大部分HTML元素提供
- 修复浏览器自身的bug并保证各浏览器的一致性
- 优化CSS可用性：用一些小技巧
- 解释代

字体图标

• icomoon字库 http://icomoon.io

IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

• iconfont字库 http://www.iconfont.cn/

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！

• fontello http://fontello.com/

在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。

• Font-Awesome http://fortawesome.github.io/Font-Awesome/

更新比较快。目前已经有369个图标了。

• Glyphicon Halflings http://glyphicons.com/

这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

• Icons8 https://icons8.com/

提供PNG免费下载，像素大能到500PX

CSS W3C 统一验证工具

1、CssStats 是一个在线的 CSS 代码分析工具

网址是：  http://www.cssstats.com/

2、如果你想要更全面的，这个神奇，你值得拥有：
W3C 统一验证工具： http://validator.w3.org/unicorn/ ☆☆☆☆☆
因为它可以检测本地文件哦！！

CSS 压缩

通过上面的检测没有错误，为了提高加载速度和节约空间（相对来说，css量很少的情况下，几乎没啥区别），可以通过css压缩工具把css进行压缩。

• w3c css压缩 http://tool.chinaz.com/Tools/CssFormat.aspx 网速比较慢