CSS3知识体系

Posted on   |   In   |     |   Views

私有前缀

在pc端开发的时候 使用css3属性 最好加上私有前缀

  • -webkit-border-radius: 50%;
    • 谷歌
  • -moz-border-radius: 50%;
    • 火狐
  • -o-border-radius: 50%;
    • 欧鹏
  • -ms-border-radius:50%;
    • IE

选择器

属性选择器

  • [attribute]
    • 选择到所有包含 attribute 这个属性的元素
  • [attribute=value]
    • 选择到所有包含 attribute 这个属性的元素 并且属性值 只能等于value
  • [attribute!=value]
    • jquery才有，css 是没有这个选择器 选择到所有包含 attribute 这个属性的元素 并且属性值 只能不等于value
  • [attribute^=value]
    • 选择到所有包含 attribute 这个属性的元素 并且属性值 以value开头
  • [attribute$=value]
    • 选择到所有包含 attribute 这个属性的元素 并且属性值 以value结尾
  • [attribute*=value]
    • 选择到所有包含 attribute 这个属性的元素 并且属性值 包含value这个字符
  • [attribute1][attribute2]

伪类选择器

序伪类选择器

  • E:first-child
    • 以E为子元素 确定父级元素 找它的第一个子元素 并且还要是E
  • E:last-child
    • 以E为子元素 确定父级元素 找它的最后一个子元素 并且还要是E
  • E:nth-child(n)
    • 以E为子元素 确定父级元素 找它的第n个子元素 并且还要是E(有效 1-无穷)
      • n遵循线性变化，其取值0、1、2、3、4、… 但是当n<=0时，选取无效。
      • n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等;
      • n注意:位置的关系(n一定要放在表达式的前面)
  • :empty 元素为空时选中
  • :target 目标伪类选择器，它选中的当前锚点

伪元素选择器

  • :not([name="special"])
    • 不包含该属性的选中
  • ::before ::after
    • 伪元素选择器 (知识重点)
  • ::first-letter
    • 首个文字的选着器 必须是一个块级元素
  • ::first-line
    • 首行
  • ::selection
    • 文本选择中的变样式：背景色，颜色等

颜色

opacity

只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度

transparent

只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度

rgba(0,0,0,0.5);

Red、Green、Blue、Alpha

hsla(240, 100%, 40%, 0.6);

通过hsla我们可以对颜色的透明度进行控制, （色调，饱和度，亮度，透明度）

文本阴影 text-shadow

text-shadow:3px 3px 5px #000,-6px -6px 5px red;

  • 第一个参数 x轴的偏移量
  • 第二个参数 y轴的偏移量
  • 第三个参数 阴影的长度
  • 第四个参数 阴影的颜色

盒模型

百分比宽度的时候怎么防止溢出

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

  1. box-sizing: border-box
    • 计算方式为 width = border + padding + content
  2. box-sizing: content-box
    • 计算方式为 width = content

兼容性比较好

display:block; 解决图片下间隙

边框

边框圆角 border-radius

  • border-radius: 50px 10px 50px 10px;
  • border-radius: 100px 100px 100px 100px / 100px 100px 100px 100px;

边框阴影 box-shadow

  • box-shadow: -3px -3px 2px red inset,3px 3px 2px #ccc;
  • 水平偏移量 正值向右 负值向左；
  • 垂直偏移量 正值向下 负值向上；
  • 模糊度是不能为负值；(如果有五个属性 第四个属性是阴影的延伸)
  • inset可以设置内阴影；
    • 设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。
    • 可以设置多重边框阴影，实现更好的效果，增强立体感

边框图片 border-image

切割的尺寸是不带单位 默认的单位是 px

  • border-image: url("./images/border.png") 27/20px round;
    • border-image-source: url("./images/border_image_2.png");
      • 边框图片资源
    • border-image-slice: 33;
      • 边框图片切割的尺寸
    • border-image-width: 20px;
      • 边框图片宽度 自适应显示图片内容
    • border-image-repeat: round;
      • 边框图片平铺方式 round 环绕的形式 repeat 平铺 以中心位置向两侧平铺 默认stretch 拉伸

背景

背景-尺寸 background-size

  • background-size: 600px 400px;
    • 宽和高
  • background-size: 100% auto;
    • 是基于容器的宽度和高度来计算 不是本身
  • background-size: auto 100%;
    • 等比例缩放
  • background-size: contain;
    • 让背景图 完全显示在盒子里头
  • background-size: cover;
    • 让背景图 完全铺满整个盒子

背景-原点 background-origin

  • background-origin: padding-box;
    • 背景原点位置 默认是从内边距开始
  • background-origin: content-box;
    • 背景原点位置 默认是从内容开始
  • background-origin: border-box;
    • 背景原点位置 默认是从边框开始

背景-裁剪 background-clip

  • background-clip:border-box;
    • 背景图的裁剪 默认的裁剪的位置 border-box
  • background-clip: padding-box;
    • 背景图的裁剪 除了边距内的背景 裁剪掉了
  • background-clip: content-box;
    • 背景图的裁剪 除了内容内的背景 裁剪掉了

背景-多背景（以逗号分隔可以设置多背景，可用于自适应局）

1
2
3
4
5
6
background:
    url("images/bg1.png") left top no-repeat,
    url("images/bg2.png") right top no-repeat,
    url("images/bg3.png") right bottom no-repeat,
    url("images/bg4.png") left bottom no-repeat,
    url("images/bg5.png") repeat；

渐变

线性渐变（指沿着某条直线朝一个方向产生渐变效果）

  • background-image: linear-gradient(to right,yellow,blue);
  • background-image: linear-gradient(90deg,transparent,black);
    • 0deg 从下往上 顺时针是正的
    • 0% - 50% 宽度内的渐变 百分比设置多个渐变的区间
1
2
3
4
5
6
7
8
9
10
background-image: linear-gradient(45deg,
  yellow 0% ,
  yellow 25%,
  blue 25%,
  blue 50%,
  yellow 50%,
  yellow 75%,
  blue 75% ,
  blue 100%
);

径向渐变（从一个中心点开始沿着四周产生渐变效果）

1.放射半径;2.中心圆点;3.起始颜色;4.结束颜色

  • radial-gradient(150px at 80px 80px,yellow,blue);

过渡 transition

transition: all 1s linear 1s;

  • transition-property: all;
    • 需要产生过渡的属性 all所有的
  • transition-duration: 1s;
    • 完成一个状态到另一个状态的过渡时间
  • transition-timing-function: linear;
    • 过渡的 速度 匀速 先快后慢 先慢后快
  • transition-delay: 1s;
    • 过渡延时延时
  • backface-visibility
    • 设置元素背景是否可见

2D转换

缩放

  • transform: scale(2, 2);
    • x轴方向的缩放比,y轴方向的缩放比

移动

  • transform: translate(10%,0px);
    • x轴方向的移动,y轴方向的移动,百分比 基于他本身的

旋转

  • transform: rotate(-90deg);
    • 如果是正值,是顺时针旋转;如果是负值 ,是逆时针旋转

旋转原点

  • transform-origin: left center;

倾斜

  • transform: skew(45deg,0deg);
    • x轴 正值是逆时针 y轴正值是顺时针

3D转换

  • rotateX(180deg);
    • 如果是负的 就是顺时针 正的是逆时针
  • perspective: 100px;
    • 透视
  • transform-style: preserve-3d;
    • 透视

CSS3 动画

  • 声明 @keyframes 关键字 动画序列的名称 ｛｝
  • keyframes move{节点}
  • from 0% to 100% 还可以通过百分比来设置节点
  • animation-name: move;
    • 动画序列的名称
  • animation-duration: 2s;
    • 动画执行的总时间
  • animation-timing-function: ease;
    • 动画执行的速度 ease linear ease-in ease-in-out ease-out
  • animation-delay: 1s;
    • 动画延时
  • animation-fill-mode: forwards;
    • 动画结束的时候的状态 forwards 保持结束状态 backwards 回答最原生的状态 没有动画的那个状态
  • animation-iteration-count: infinite;
    • 动画执行的次数 次数 特殊的值 infinite 执行无数次
  • animation-direction:alternate;
    • 动画逆播放
  • animation-play-state:paused;
    • 执行的状态 是执行中 暂停 running、paused
    • 分步执行 steps(3)

多列布局

box-sizing: border-box;

  • -webkit-column-count: 4;
    • 指定列数
  • -webkit-column-width: 400px;
    • 指定列宽
  • -webkit-column-rule: 2px dashed #CCC;
    • 定义边框线 和 border一样
  • -webkit-column-gap: 50px;
    • 调整列间距

伸缩布局

display: flex; flex-direction: column;

flex-direction：

  • row
  • column
  • row-reverse
  • column-reverse
  • 调整主轴方向（默认水平）

justify-content：

  • flex-start（起始点对齐）
  • flex-end（终止点对齐）
  • center（居中对齐）
  • space-around（四周环绕）
  • space-between（两端对齐）
  • (调整主轴对齐)

align-items：(调整测轴对齐)

  • flex-start（侧轴起始点对齐）
  • flex-end（侧轴终止点对齐）
  • center（侧轴居中对齐）
  • stretch（拉伸）

flex-wrap：(控制是否换行)

  • wrap（自动换行）
  • nowrap（不自动换行）

align-content：(堆栈（由flex-wrap产生的独立行）对齐)

  • flex-start（起始点对齐）
  • flex-end（终止点对齐）
  • center（居中对齐）
  • space-around（四周环绕）
  • space-between（两端对齐）
  • stretch（拉伸）

flex-flow：

  • flex-flow 是 flex-direction 和 flex-wrap 的简写形式

flex 控制子元素伸缩比例

align-self

同 align-items 可覆盖父元素设置的 algin-items，包括 flex-start、flex-end、center、stretch

order 控制子元素的顺序

web字体(28)

1.申明 自定义的字体

1
2
3
4
5
6
7
8
9
10
@font-face {
  /*字体的名称 自定义*/
  font-family: 'itcast-font';
  /*引入字体文件  格式都市固定的  */
  src:
    url("../fonts/LiDeBiao-Xing3/LiDeBiao-Xing3.svg") format("svg"),
    url("../fonts/LiDeBiao-Xing3/LiDeBiao-Xing3.ttf") format("truetype"),
    url("../fonts/LiDeBiao-Xing3/LiDeBiao-Xing3.woff") format("woff"),
    url("../fonts/LiDeBiao-Xing3/LiDeBiao-Xing3.eot") format("embedded-opentype");
}

字体图标

<link rel="stylesheet" href="../fonts/font-awesome-4.4.0/css/font-awesome.css"/>

定制自已的字体图标库

切割轮播图(28)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('body')
.on('click','.prev',function(){
    /*上一张*/
    index ++;
    $('.view li').css({'transition':'all 1s','transform':'rotateX('+index*90+'deg)'}).each(function(i,t){
        $(this).css('transition-delay',i*0.25+'s');
    });
})
.on('click','.next',function(){
    /*下一张*/
    index --;
    $('.view li').css({'transition':'all 1s','transform':'rotateX('+index*90+'deg)'}).each(function(i,t){
        $(this).css('transition-delay',i*0.25+'s');
    });
});

兼容性

  • http://caniuse.com/
    • 可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀
感谢您的支持！