【前端】之CSS3基础知识

CSS3 私有化前缀

• 考虑到CSS3的兼容性问题，某些属性需要添加浏览器的私有化前缀
• 几种主流浏览器的私有化前缀如下：
  • Chrome、Safari：-webkit-
  • Firefox：-moz-
  • IE：-ms-
  • Opera：-o-

CSS3 之前已有的选择器

• div{}：标签选择器
• .box{}：类选择器
• #box{}：ID选择器
• div:hover{}：伪类选择器
• div p{}：后代选择器
• div.box{}：交集选择器
• div,p{}：并集选择器
• *{}：通配符选择器

CSS3 属性选择器

• 属性选择器通过标签属性来选择
• 属性选择器用“[ ]”来表示，将属性放到“[ ]”中进行筛选，示例代码如下：

  div[class]{} /*匹配有class属性的div标签*/
  div[class="box1"]{} /*匹配class属性为box1的div标签*/
  div[class^="aa"]{} /*匹配class属性值以aa开头的div标签*/
  div[class$="aa"]{} /*匹配class属性值以aa结尾的div标签*/
  div[class*="aa"]{} /*匹配class属性值中包含aa的div标签*/
  

CSS3 伪类选择器

• CSS3之前的伪类：:hover鼠标悬浮、:link未访问、:active被选择、:visited已访问
• 上述伪类的顺序：link -> visited -> hover -> active（love hate）
• 伪类：表示元素在某个状态下的样式，标志性符号是:
• 结构伪类：
  • N:first-child：符合N条件的第一个元素所在父容器的第一个子孩子
  • N:last-child：符合N条件的第一个元素所在父容器的最后一个子孩子
  • N:nth-child(10)：符合N条件的第一个元素所在的父容器的第10个子孩子
  • N:nth-child(odd)：符合N条件的第一个元素所在的父容器中的奇数子孩子
  • N:nth-child(2n+1)：同上
  • N:nth-child(even)：符合N条件的第一个元素所在的父容器中的偶数子孩子
  • N:nth-child(2n)：同上
  • N:nth-child(n)：符合N条件的第一个元素所在的父容器中的所有子孩子
  • N:nth-child(-n+5)：符合N条件的第一个元素所在的父容器中的前5个子孩子
  • N:nth-child(5-n)：符合N条件的第一个元素所在的父容器中的后5个子孩子
  • N:nth-last-child(-n+5)：符合N条件的第一个元素所在的父容器中的后5个子孩子
• 状态伪类：
  • N:empty：符合N条件且内部没有内容的元素（空格也算内容）
• target伪类：
  • N:target：当符合N条件的元素被锚点聚焦后的样式，需要配合锚点使用

CSS3 伪元素选择器

• 伪元素：通过CSS模拟HTML，标志性符号是::
• 常见的伪元素：
  • E::before：在E标签之前添加文本及其样式样式，必须要有content属性
  • E::after：在E标签之后添加文本及其样式，必须要有content属性
  • E::first-letter：E元素中的第一个字符的样式
  • E::first-line：E元素中的第一行的样式
  • E::selection：选中文本后的样式

CSS3 透明度设置方式

• RGBA设置方式：
  • R：Red，红色，0-255
  • G：Green，绿色，0-255
  • B：Blue，蓝色，0-255
  • A：Alpha，透明度，0.0-1.0
• HSLA设置方式：
  • H：Hue，色调，0-360
  • S：Saturation，饱和度，0%-100%
  • L：Lightness，亮度，0%-100%
  • A：Alpha，透明度，0.0-1.0

CSS3 文本

• text-shadow：文本阴影，示例代码：

  /* text-shadow: 水平位移 垂直位移 模糊程度 阴影颜色 */
  /* 如果要设置多个阴影，可以在中间加逗号隔开 */
  text-shadow:-1px -1px 1px #fff, 1px 1px 1px #000; /* 凸效果 */
  text-shadow:-1px -1px 1px #000, 1px 1px 1px #fff; /* 凹效果 */
  

CSS3 边框

• border-radius：圆角
• box-shadow：边框阴影，参数（水平位移 垂直位移 模糊度 面积 颜色）
• border-image：边框图片，包括四个子属性
  • border-image-source：边框图片路径，:url('images/border.png')
  • border-image-slice：四个角不被拉伸的部分的宽度，没有单位，:27
  • border-image-width：边框图片的宽度，:27px
  • border-image-repeat：重复模式，:repeat平铺，中间部分可能显示不完整，:round完美平铺，中间部分显示完整，:stretch拉伸
• box-sizing：盒子的显示模型，有三种值：
  • content-box：默认值，外加模型，盒子实际大小仅包括内容区域
  • padding-box：盒子实际大小包括padding及其内部区域
  • border-box：内减模型，盒子实际大小包括边框及其内部区域

CSS3 背景

• background-size：背景大小，几种参数写法如下：
  • 尺寸，100px 100px，按给定数值显示背景
  • 百分比，100% 100%，按给定百分比显示背景
  • cover，等比例缩放，让背景的短边铺满容器，长边可能会溢出容器
  • contain，等比例缩放，让背景的场边铺满容器，短边可能铺不满容器
• background-origin：背景原点，控制背景的显示位置，默认值padding-box
• background-clip：背景裁剪，将某个box外的背景区域裁剪掉
• 如果想给一个元素设置多张背景图片，背景图片之间要用逗号隔开
• 背景渐变：
  • 线性渐变，代码如下：

    background: linear-gradient(to right, yellow, green);
    /* 从左向右，起始色为黄色，结束色为绿色 */
    /* 方向：to left、to right、to top、to bottom，默认是to bottom */
    /* 方向可以替换为角度：45deg，下边为0deg，左边90deg，依此类推 */
    /* 可以设置多个颜色，且可以设置每个颜色占的比例：red 20%, blue 40% */
    

  • 发散渐变，代码如下：

    background: radial-gradient(100px, at center, yellow, green);
    /* 第一个参数：辐射半径 */
    /* 第二个参数：中心点位置，at left/right/top/bottom/center/left top... */
    /* 中心点位置可以直接设置坐标：at 50px 50px，左上角是(0,0) */
    /* 其他参数及其特征和线性渐变中的相同 */
    

CSS3 过渡

• 如果不设置过渡，那么所有的变换都是突变的
• 过渡语法：transition: 属性名 过渡时间，示例代码如下：

  .box {
       200px;
      height: 200px;
      background-color: red;
      transition: all 1s linear 3s;
      /* transition: width 1s linear 3s, height 1s linear 3s, ... */
      /* 第三个参数：默认值ease平滑过渡，linear匀速，ease-in由慢到快，ease-out由快到慢，ease-in-out慢快慢，steps(N)分N步走完 */
      /* 第四个参数：延迟3秒钟后才开始过渡 */
      /* 如果需要所有属性都过渡，则第一个参数直接写all */
  }
  .box:hover {
       600px;
      height: 400px;
      background-color: blue;
  }
  

CSS3 2D变换

• 2D变换，就是对元素进行缩放、旋转、平移等操作
• 平移：从元素当前位置，在X、Y坐标上分别移动指定距离，代码如下：

  transform: translate(100px, 200px); /* 向下、向右移动100像素 */
  

• 旋转：以元素中心点为圆心，顺时针旋转指定角度（单位deg），代码如下：

  transform: rotate(45deg); /* 顺时针旋转了45度 */
  

• 缩放：将元素在X轴和Y轴上分别缩放指定倍数，代码如下：

  transform: scale(2, 4); /* 在X轴上放大2倍，Y轴上放大4倍 */
  

• 倾斜：将元素在X轴和Y轴上倾斜指定的角度，代码如下：

  transform: skew(30deg, 30deg); /* 在X轴和Y轴上分别倾斜30度 */
  

• 在CSS3 2D变换中，可以设置变换的中心点，代码如下：

  transform-origin: center bottom; /* 以下边的中心点为变换中心 */
  

CSS3 3D变换

• 在CSS3 3D变换中，有三个坐标轴：X轴、Y轴、Z轴
• 水平向右是X轴正方向；垂直向下是Y轴正方向；指向屏幕外是Z轴正方向
• perspective：透视，可以加强3D效果，代码如下：

  perspective: 250px; /* 模拟人眼距离平面的距离，越近3D效果越强 */
  

• 在某个轴上旋转：rotateX/Y/Z，代码如下：

  transform: rotateX(360deg); /* 在X轴上旋转360度 */
  /* 在Z轴上的旋转相当于平面旋转rotate(360deg) */
  

• 在某个轴上移动：translateX/Y/Z，代码如下：

  transform: translateX(200px); /* 在X轴上移动200像素 */
  /* 在Z轴上的移动是前后移动，视觉效果是放大和缩小，但必须配合透视使用 */
  

• 上述所有”3D变换“都只是视觉效果，实际还是平面的
• 为了实现真正的3D，需要在父盒子中添加设置代码，代码如下：

  tranform-style: preserve-3d; /* 子盒子保持3D效果 */
  

CSS3 动画

• CSS3中动画的使用方式，代码如下：

  /* 定义动画 */
  @keyframes move {
      0% { transform: translateX(0px); } /* 动画运行到0%时的状态 */
      100% { transform: translateX(300px); } /* 动画运行到100%时的状态 */
  }
  /* 调用动画 */
  .box {
    animation: move 2s infinite alternate linear 1s;
    /* 第一个参数：动画的名称；第二个参数：运行一次的持续时间； */
    /* 第三个参数：重复次数，infinite是无限重复； */
    /* 第四个参数：动画轮流反向播放；第五个参数：匀速播放；第六个参数：延迟1秒 */
  }
  

• 要想让动画结束后，盒子保持在动画最后的状态，可以添加如下代码：

  animation-fill-mode: forwards;
  /* 这个属性有两个值：forwards保持动画后的状态；backwards回到动画钱的状态 */
  

CSS3 分列布局

• CSS3中分列的基本用法：

  -webkit-column-count: 3; /* 分成3列 */
  -webkit-column-rule: 1px dashed red; /* 列与列之间有一条红色虚线隔开 */
  -webkit-column-gap: 60px; /* 列与列之间间距60像素 */
  

• 分页后，标题会在某一列中。如果想要让标题在网页内居中，则应添加如下代码：

  h4 {
      -webkit-column-span: all;
      text-align: center;
  }
  

CSS3 伸缩布局

• FLEX布局完整教程
• CSS3中的伸缩布局使页面能够适配不同尺寸的屏幕，在响应式开发中发挥了巨大的作用
• 设置当前盒子使用伸缩布局：

  E { display: flex; }
  

• 伸缩布局中的术语：
  • 主轴：元素默认沿着主轴排列，默认主轴是水平轴，方向从左向右
  • 侧轴：与主轴垂直的轴称为侧轴，默认是垂直方向的，方向从上到下
• flex属性：设置子元素占据父元素的空间，可以实现空间平分
• flex-direction属性：设置主轴方向，常用的值有以下四个：
  • row：水平方向，从左向右排列
  • row-reverse：反转行，从右向左排列
  • column：垂直方向，从上向下排列
  • column-reverse：反转列，从下向上排列
• justify-content属性：主轴上的对齐方式，常用的值有以下5个：
  • flex-start：沿着主轴的方向对齐
  • flex-end：沿着主轴的反方向对齐
  • center：沿着主轴方向居中对齐
  • space-between：两端对齐，子元素之间的间隔相等
  • space-around：每个子元素两侧的间隔相等，子元素之间的间隔比子元素与边框的间隔大一倍
• align-items属性：侧轴上的对齐方式，常用的值有以下5个：
  • flex-start：沿着侧轴的方向对齐
  • flex-end：沿着侧轴的反方向对齐
  • center：沿着侧轴方向居中对齐
  • baseline：所有子元素的第一行文本基线对齐
  • stretch：如果项目未设置高度或设为auto，将占满整个容器的高度

CSS3 WEB字体

• 开发人员可以在网页中设置特殊的字体，无需考虑用户机上是否安装了该字体
• 这种方式兼容性很好，甚至IE低版本浏览器也可以支持
• 常见字体格式：.ttf、.otf、.woff、.eot、.svg
• 不同字体格式支持不同的浏览器，我们需要为不同浏览器准备不同的字体格式
• 几个字体下载网站：字体下载网站 1、字体下载网站 2
• WEB字体配置步骤：
  • 在这个网站中下载一种字体
  • 在项目中新建一个font文件夹，将下载解压后的字体文件复制进去
  • 在网页中声明字体：参照解压出来的demo.html文件
  • 定义使用webfont的样式：参照解压出来的demo.html文件
  • 在网页中添加文本，为文本设置样式即可