HTML5+CSS3

• 选择器
  • 属性选择器：通过属性来选择元素
    • E[attr]：存在attr属性即可
    • E[attr=val]：属性值完全等于val
    • E[attr*=val]：属性值里包含val字符并且在“任意”位置
    • E[attr^=val]：属性值里包含val字符并且在“开始”位置
    • E[attr$=val]：属性值里包含val字符并且在“结束”位置
  • 伪类选择器":"
    • 结构(位置)伪类选择器：以某元素（E）相对于其父元素或兄弟元素的位置来获取无素
      • E:first-child：其父元素的第1个子元素
      • E:last-child：其父元素的最后1个子元素
      • E:nth-child(n)：其父元素的第n个子元素
      • E:nth-last-child(n)：其父元素的第n个子元素（倒着数）
    • 空伪类选择器
      • E:empty 选中没有任何子节点的E元素；（使用不是非常广泛）
    • 目标伪类选择器
      • E:target 结合锚点进行使用，处于当前锚点的元素会被选中
    • 排除伪类选择器
      • E:not(selector) 除selector（任意选择器）外的元素会被选中
  • 伪元素选择器"::"
    • E::first-letter文本的第一个单词或字
    • E::first-line 文本第一行
    • E::selection 可改变选中文本的样式
    • E::before和E::after
      • 在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
• 颜色
  • Red、Green、Blue、Alpha即RGBA
    • R、G、B 取值范围0~255
  • Hue、Saturation、Lightness、Alpha即HSLA
    • H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
    • S 饱和度取值范围0%~100%
    • L 亮度 取值范围0%~100%
    • A 透明度取值范围0~1
  • opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；
  • transparent 不可调节透明度，始终完全透明
• 文本阴影text-shadow
  • 可分别设置偏移量、模糊度、颜色（可设透明度）。
  • 如：text-shadow: 2px 2px 2px #CCC;
    • 水平偏移量 正值向右 负值向左；
    • 垂直偏移量 正值向下 负值向上；
    • 模糊度是不能为负值；
• 边框
  • 边框圆角border-radius
    • 1、border-radius: 10px; 表示四个角的横纵轴半径都为10px；
    • 2、border-radius: 10px 5px; 表示1和3角横纵轴半径都为10px，2和4角横纵轴半径为5px；
    • 3、border-radius: 10px 5px 8px; 表示1角模纵轴半径都为10px，2和4角横纵轴半径都为8px，3角的横纵轴半径都为8px；
    • 4、border-radius: 10px 8px 6px 4px; 表示1角横纵轴半径都为10px，表示2角横纵轴半径都为8px，表示3角横纵轴半径都为6px，表示4角横纵轴半径都为6px；
  • 边框阴影box-shadow
    • 如box-shadow: 5px 5px 5px #CCC
      • 1、水平偏移量 正值向右 负值向左；
      • 2、垂直偏移量 正值向下 负值向上；
      • 3、模糊度是不能为负值；
      • 4、inset可以设置内阴影；
    • 设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果
  • 边框图片border-image
    • 设置的图片将会被“切割”成九宫格形式，然后进行设置。
    • 1、border-image-source指定图片路径
    • 2、border-image-repeat指定裁切好的虚拟图片的平铺方式
      • round会自动调整尺寸，完整显示边框图片
      • repeat 单纯平铺,多余部分，会被“裁切”而不能完整显示。
    • 3、border-image-slice
    • 4、border-image-width设置边框背景区域的大小，这个值的大小不会影响到盒子的大小。
• 盒模型box-sizing
  • box-sizing: border-box  盒子大小为 width
  • box-sizing: content-box  盒子大小为 width + padding + border
• 背景
  • background-size背景图片的尺寸
    • background-size:cover 自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
    • background-size:contain 自动调整缩放比例，保证图片始终完整显示在背景区域。
  • background-origin背景图片定位(background-position)的参照原点。
    • border-box以边框做为参考原点；
    • padding-box以内边距做为参考原点；
    • content-box以内容区做为参考点；
  • background-clip背景区域裁切，即改变背景区域的大小。
    • border-box裁切边框以内为背景区域；
    • padding-box裁切内边距以内为背景区域；
    • content-box裁切内容区做为背景区域；
  • 多背景
    • 以逗号分隔可以设置多背景，可用于自适应布局
• 渐变
  • 线性渐变linear-gradient
    • 方向、起始色、终止色、渐变距离
      • 方向：to top、to right，也可以用角度（正负值均可）如45deg、-90deg等，0deg从下往上，90deg从左向右，进而可以推算出180deg从上向下。
    • 设置渐变的起始点的值可以是百分比形式，这个百分比在没有设置background-size时，是相对于盒子大小的，当设置了background-size时则是相对于background-size的。
  • 径向渐变radial-gradient
    • 从一个中心点开始沿着四周产生渐变效果
    • 辐射范围即圆半径、中心点 即圆的中心、渐变起始色、渐变终止色、渐变范围
      • 中心位置参照的是盒子的左上角，例如background-image: radial-gradient(120px at 0 0 yellow green)其圆心点为左上角，background-image: radial-gradient(120px at 0 100% yellow green)其圆心为左下角。
      • 辐射范围 其半径可以不等，即可以是椭圆，如background-image: radial-gradient(120px 100px at 0 0 yellow green)会是一个椭圆形（横轴120px、纵轴100px）的渐变
• 过渡transition
  • transition-property：设置过渡属性
  • transition-duration：设置过渡时间
  • transition-timing-function： 设置过渡速度
  • transition-delay：设置过渡延时
• 2D转换
  • 1、移动 translate(x, y) 可以改变元素的位置，x、y可为负值；
    • a) 移动位置相当于自身原来位置
    • b)  y轴正方向朝下
    • c) 除了可以像素值，也可以是百分比，相对于自身的宽度或高度
  • 2、缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数；
  • 3、旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；
    • a) 当元素旋转以后，坐标轴也跟着发生的转变
    • b) 调整顺序可以解决，把旋转放到最后
  • 4、倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。
  • 5、矩阵matrix() 把所有的2D转换组合到一起，需要6个参数（了解）。
  • 6、transform-origin可以调整元素转换的原点
  • 我们可以同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等，其顺序会影响转换的效果。
• 3D转换
  • 旋转rotateX，rotateY，rotateZ
  • 移动translateX，translateY，translateZ
  • 透视（perspective）：通过透视可以实现3D立体效果
    • a) 作为一个属性，设置给父元素，作用于所有3D转换的子元素
    • b) 作为transform属性的一个值，做用于元素自身
    • 透视会产生“近大远小”的效果
  • 3D呈现（transform-style）设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为转换原素。
    • flat：所有子元素在 2D 平面呈现
    • preserve-3d：保留3D空间
  • backface-visibility设置元素背面是否可见
• 动画
  • 可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
  • 1、必要元素：
    • a、通过@keyframes指定动画序列；
    • b、通过百分比将动画序列分割成多个节点；
    • c、在各节点中分别定义各属性
    • d、通过animation将动画应用于相应元素；
  • 2、关键属性
    • a、animation-name设置动画序列名称
    • b、animation-duration动画持续时间
    • c、animation-delay动画延时时间
    • d、animation-timing-function动画执行速度，linear、ease等
    • e、animation-play-state动画播放状态，running、paused等
    • f、animation-direction动画逆播，alternate等
    • g、animation-fill-mode动画执行完毕后状态，forwards、backwards等
    • h、animation-iteration-count动画执行次数，inifinate等
    • i、steps(60) 表示动画分成60步完成
• 伸缩布局
  • 1、必要元素：
    • a、指定一个盒子为伸缩盒子 display: flex
    • b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction
    • c、明确主侧轴及方向
    • d、可互换主侧轴，也可改变方向
  • 2、各属性详解
    • a、flex-direction调整主轴方向（默认为水平方向）
    • b、justify-content调整主轴对齐
    • c、align-items调整侧轴对齐
    • d、flex-wrap控制是否换行
    • e、align-content堆栈（由flex-wrap产生的独立行）对齐
    • f、flex-flow是flex-direction、flex-wrap的简写形式
    • g、flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
    • h、order控制子项目的排列顺序，正序方式排序，从小到大
• 多列布局
  • 分3列：-webkit-column-count:3;
  • 分割线：-webkit-column-rule:1px dashed red;
  • 设置列间距：-webkit-column-gap:60px;
  • 列宽度：-webkit-column-width: 400px;
• web字体
  • 字体格式
    • TureType(.ttf)格式
    • OpenType(.otf)格式
    • Web Open Font Format(.woff)格式
    • Embedded Open Type(.eot)格式
    • SVG(.svg)格式
  • 字体图标
• 兼容性
  • 通过http://caniuse.com/可查询CSS3各特性的支持程度
• 高级应用