CSS3设计开发知识点自学笔记总结

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂

CSS3设计开发知识点自学笔记总结

• 伸缩布局
  • display:flex;
  • 主轴方向 flex-direction
    • row 水平
    • row-reverse 水平翻转
    • column 列
    • column-reverse 列翻转
  • 主轴的对齐方式 justify-content
    • flex-start 从主轴的开始的方向对齐
    • flex-end 从主轴结束的方向对齐
    • center 居中对齐
    • space-round 平分对齐
    • space-between 两端对齐
  • 侧轴的对齐方式 align-items
    • flex-start 从侧轴开始的方向对齐
    • flex-end 从侧轴结束的方向对齐
    • center 居中对齐
    • baseline 基线对齐
    • stretch 拉伸
  • 伸缩比例 flex:数字
    • 如果盒子不参与划分比例，不写flex属性即可
• web字体
  • 步骤
    • 引入字体包
    • 声明字体，告诉浏览器去哪里找这个字体
    • 给盒子添加这个字体
    • 在伪元素中，content:""中使用图标的编码时要删除前面的符号，然后加\,起转义作用
• 3D变换
  • 旋转
    • rotateX()
    • rotateY()
    • rotateZ()
    • 所有的3D旋转，对着正方向去看都是顺时针旋转
  • 位移
    • translateX()
    • translateY()
    • translateZ()
    • Z轴方向必须配合透视来使用
  • 透视
    • perspective:
      • 设置的是用户的眼睛和屏幕的距离，透视效果只是视觉上的呈现，不是真正的3D
      • 加给变换的父盒子
  • 3D效果呈现
    • transform-style:
      • preserve-3d
        • 可以让里面的子盒子保持3D效果 加给父盒子 让子盒子位于3D空间
      • flat 子盒子被扁平化
  • backface-visibility:hidden;背面不可见
• 动画
  • 类似js中的函数，先定义再调用
  • 定义动画
    • @keyframes 动画名{ 0%{ } 100%{ }或者 from{ }to{ } }
  • 调用
    • animation:动画名称 持续时间 执行次数 延迟时间 是否反向 运动曲线 结束后状态
      • 动画名称
        • animation-name:
      • 持续时间
        • animation-duration:
          • 秒数：2s
      • 执行次数
        • animation-iteration-count:
          • 数字
          • infinite 无限次
        • 持续时间
          • animation-duration:
            • 秒数：2s
      • 延迟时间
        • animation-delay:
          • 秒数：2s
      • 运动曲线
        • animation-timing-function:
          • linear 线性
          • ease 减速
          • ease-in 加速
          • ease-out 减速
          • ease-in-out 先加速后减速
          • steps（）分步
      • 是否反向
        • animation-direction:
          • normal
          • alternate 反向
      • 结束状态
        • animation-fill-mode:
          • forwards 保持动画结束后的状态
          • backwards 初始状态
    • 动画的前两个属性是必须有的，并且顺序固定
  • 控制动画状态
    • animation-play-state:
      • paused 停止
      • running 播放
• 多列布局
  • column-count:3;分几列
  • column-rule:1px solid red; 分割线
  • column-gap:60px; 列间距
  • column-width: ；列宽度
  • column-span:all;跨列，all表示跨所有的列
  • 注意：兼容性
• 边框
  • 边框圆角
    • border-radius:
      • 写法
        • 单个属性：水平半径 垂直半径
        • 复合写法：水平半径..../垂直半径....
      • 赋值顺序
        • 从左上角开始，顺时针赋值，如果当前角没有值，取对角值
  • 盒子阴影
    • box-shadow:水平位移 垂直位移 模糊程度 阴影大小 阴影颜色 内外阴影
      • 内阴影（inset）,外阴影不用写
  • 边框图片
    • 属性
      • 边框图片的路径
        • border-image-sourse:url();
      • 边框图片的剪裁
        • border-image-slice:27 27 27 27;/27;
        • 顺时针剪裁
      • 边框图片的大小
        • border-image-width:
      • 边框图片的平铺
        • border-image-repeat:
          • repeat 正常平铺，但是可能会显示不完整
          • round 平铺 保持图片完整
          • stretch 拉伸（默认值）
    • 谷歌高版本可能会不支持
• 背景
  • 背景尺寸
    • background-size:
      • 数值：水平数值 垂直数值
      • 百分比：水平 垂直
      • cover 覆盖
        • 会保证完全覆盖盒子，但不能保证完全显示，全背景 自适应
      • contain 包含
        • 保证背景图片最大化在盒子中等比例显示，但不能保证铺满整个盒子
    • 控制背景大小
  • 背景原点
    • background-origin:
      • content-box
      • padding-box 默认值
      • border-box
    • 控制背景从什么地方显示
  • 背景剪裁
    • background-clip:
      • content-box
      • padding-box
      • border-box
    • 表示从什么位置开始剪裁
  • 多背景
    • 按照背景正常的语法格式书写，多个背景中间用逗号隔开
• 渐变
  • 渐变属于背景图片范围属性，background-image:
  • 线性渐变
    • linear-gradient(方向，起始颜色 0%，终止颜色 100%)
      • 方向
        • to left/right/top/bottom
        • 角度：30deg
        • 默认方向是从上向下
      • 可以用百分制控制颜色的范围:red 20%
  • 径向渐变
    • radial-gradient(辐射半径，中心点位置，起始颜色 0%，终止颜色 100%)
      • 辐射半径
        • 通过控制x，y轴值来控制圆或者椭圆
      • 中心点位置
        • at center/left/right/top/bottom/数值（x，y）px
• 过渡
  • transiton：过渡属性 持续时间 运动曲线 延迟时间
    • 过渡属性
      • transition-property:width;
    • 过渡时间
      • transition-duration:4s;
    • 运动曲线
      • transition-timing-function:
        • linear 线性
        • ease 减速
        • ease-in 加速
        • ease-out 减速
        • ease-in-out 先加速后减速
  • 如果希望所有的属性都发生过渡使用all
  • 过渡必须加给过渡盒子本身，谁过渡加给谁
• 2D转换
  • transform:
    • 放缩
      • scale(水平缩放比例，垂直缩放比例)
      • 如果只写一个值，等比例缩放
      • 不能使用百分比
    • 位移
      • translate（水平位移，垂直位移）
      • 如果只写一个值 水平移动
      • 百分比是相对于自身的移动，50%
    • 旋转
      • rotate(角度)
        • 正值是顺时针
    • 倾斜
      • skew(相对于x轴的偏移，相对于y轴的偏移)
  • 变换中心
    • translate-origin:水平坐标 垂直坐标
      • left right center top bottom
    • 变换中心 默认是图片的几何中心
  • 复合写法中间用空格隔开
• 360案例
  • window.onmousewheel 鼠标滚动事件
  • jquery全屏滚动事件fullpage.js
• css3简介
  • c3兼容性很差
  • 使用时要遵循，渐进增强原则，保证低版本正常运行，高版本效果更好
  • 工具： [] 表示全部可选项 padding || 表示或者 | 表示多选一 ？ 表示0个或者1个 * 表示0个或者多个 {} 表示范围
• 之前选择器拓展
  • div+p：选中div后面相邻的第一个p，必须紧挨着div，中间不能有其他的标签
  • div~p:选中div后边所有的p标签
• 选择器
  • 属性选择器
    • 标志性符号：[]
    • ^:开头 $:结尾 *:包含
      • div[class^="aa"],div带有class属性，并且值以aa开头
      • div[class$="aa"],div带有class属性，并且值以aa结尾
      • div[class*="aa"],div带有class属性，并且值包含aa
    • E[class] 选中页面的E元素，并且E元素中有class属性
    • div[class="box"],div带有class属性，并且值为box
  • 结构伪类选择器
    • 通过结构进行筛选
    • E:first-child/last-child/nth-child()/nth-last-child()
      • 先找父元素，再找里面指定的标签
      • E:nth-child(1),编号是从1开始的
      • E:nth-child(n);n>=0,当n小于1时无效，2n/even/偶数，2n+1/odd/奇数，-n+5/选中前5个
      • 所选到的元素类型，必须时指定的类型E否则无效
    • E：empty
      • 如果E是空的时候会被选中，表示元素是空的状态
    • E:target
      • 要配合锚点使用，表示被激活的状态
  • 伪元素选择器
    • 标志性符号：双冒号（：：）
    • 伪元素
      • ::before/::after
        • 通过css模拟出来html标签的效果
        • 是一个行内元素，需要转换成块元素
        • 创建必须要有content：“”；属性
    • 伪元素选择器
      • ::first-letter
        • 选中第一个字母
        • 首字下沉需要和float一起使用
      • ::first-line
        • 选中第一行
      • ::selection
        • 表示当前选中的区域
        • 通常设置color，background
  • 伪类选择器（css2）
    • 标志性符号：冒号
    • 代表一种状态
    • :hover :link :active :visited (lvha)
• 透明度
  • css2中的透明度
    • opacity
      • 可以给盒子设置半透明，但是会影响里面的子盒子，并且里面的子盒子无法改变透明度（继承性）
    • transparent
      • 可以单独设置透明度，但是无法改变透明度的值，是全透明的
  • rgba（）
  • hsla（）
    • h:色调 0-360
    • s:饱和度 0%-100%
    • l:亮度 0%-100%
    • a:alpha 透明度 0-1
• 文字阴影
  • text-shadow:水平位移 垂直位移 模糊程度 阴影颜色
    • 有多个阴影效果，并列书写，使用逗号隔开
• 盒子模型
  • box-sizing:
    • content-box
      • 外加模式（默认值）
    • padding-box
    • border-box
      • 内减模式
• 浏览器私有化前缀
  • -webkit-:谷歌 苹果
  • -moz-:火狐
  • -ms-:ie
  • -o-:欧朋
  • 主要用于处理浏览器兼容性问题