CSS3学习笔记(二)

发表于 | 分类于 | 热度 | 字数统计 4,325

CSS3 增加的东西确实不少，额，起码我感觉不少，如果真的用好了能做出非常炫酷的东西；然而我感觉是非常难的，到最后差点都勇气看完了
3D 方面的东西没说，要使用高级特效，首先把矩阵学好吧…..还有，浏览器兼容问题真是一大璀璨，像我，从不考虑 IE10 以下的，毕竟看前端只是兴趣
果然还是 ctrl + c and ctrl + v 大法好啊！
这篇笔记从9号开始记录的，一直到….27，虽然是想起来才看一点这样的”策略“

变形

  • 旋转 rotate() 函数
    通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。transform: rotate(45deg);
  • 扭曲 skew() 函数
    能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与 rotate() 函数的旋转不同，rotate() 函数只是旋转，而不会改变元素的形状。skew() 函数不会旋转，而只会改变元素的形状。
    skew 有三种形式：1.skewX(x) ; 2.skewY(y) ; 3.skew(x,y) (如果只写一个第二个参数默认0)
    分别是让其在水平方向扭曲；垂直方向扭曲；在水平和垂直方向都扭曲，单位写 deg 即可
  • 缩放 scale()函数
    让元素根据中心原点对对象进行缩放，同样有三种形式，和上面的扭曲类似，就不多说了，但是如果使用 scale(x,y) 的时候只写一个值，指的是水平、垂直都是这个值
    注意： scale() 的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。
  • 位移 translate()函数
    可以将元素向指定的方向移动，类似于 position 中的 relative。或以简单的理解为，使用 translate() 函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。
    同样有三种形式，可以使用百分比，比如：transform:translate(-50%,-50%); 就算参数一样也不要省略
  • 原点 transform-origin
    任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素 X 轴和 Y 轴的 50% 处，也就是所谓的中心。
    在没有重置 transform-origin 改变元素原点位置的情况下，CSS 变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。比如：transform-origin: left top;
  • 矩阵 matrix()
    它是一个含六个值的 (a,b,c,d,e,f) 变换矩阵，用来指定一个2D变换，上面的几种变换其实还是调用的它，2D 变换是个 3X3 的矩阵，3D 是 4X4 的矩阵
    http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

动画-过渡属性

它可以通过一些简单的 CSS 事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：

  1. 在默认样式中声明元素的初始状态样式；
  2. 声明过渡元素最终状态样式，比如悬浮状态( hover )；
  3. 在默认样式中通过添加过渡函数，添加一些不同的样式。

CSS3的过度 transition 属性是一个复合属性，主要包括以下几个子属性：

  • transition-property : 指定过渡或动态模拟的CSS属性
  • transition-duration : 指定完成过渡所需的时间
  • transition-timing-function : 指定过渡函数
  • transition-delay : 指定开始出现的延迟时间

简单的栗子最直接：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-property: width;
  transition-property: width;
  -webkit-transition-duration:.5s;
  transition-duration:.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: .18s;
  transition-delay:.18s;
}
div:hover {
  width: 400px;
}
/* 合在一起也是可以的 */
span{
  -webkit-transition: background-color .5s ease .1s;
  transition: background-color .5s ease .1s;
}

“transition-property” 属性设置为 all 时，表示的是所有中点值的属性，也就是你初始状态设的什么属性就代指的什么属性。
关于过渡函数：

值 描述
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

有时我们想改变两个或者多个 css 属性的 transition效果 时，只要把几个 transition 的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为 transition-delay。
例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

如果需要鼠标点击触发，那就只能通过设置 onclick 事件，使用 JS 来改变其 style 的属性

关键帧

Keyframes 被称为关键帧，其类似于 Flash 中的关键帧。在 CSS3 中其主要以 “@keyframes” 开头，后面紧跟着是动画名称加上一对花括号 “{…}”，括号中就是一些不同时间段样式规则。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@keyframes wobble {
  0% {
    margin-left: 100px;
    background:green;
  }
  40% {
    margin-left:150px;
    background:orange;
  }
  60% {
    margin-left: 75px;
    background: blue;
  }
  100% {
    margin-left: 100px;
    background: red;
  }
}
div {
  width: 100px;
  height: 100px;
  background:red;
  color: #fff;
}
div:hover{
  animation: wobble 5s ease .1s;
}

在 @keyframes 中定义动画名称时，其中 0% 和 100% 还可以使用关键词 from 和 to 来代表，其中 0% 对应的是 from，100% 对应的是 to。

Chrome 和 Safari 需要前缀 -webkit-；
Foxfire 需要前缀 -moz-。

调用分解

通过上面的 css 代码也能看出来，是使用 animation 进行调用的，animation-name 属性主要是用来调用 @keyframes 定义好的动画。
需要特别注意: animation-name 调用的动画名需要和 “@keyframes” 定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。
其实和 transition 是差不多的，比如 animation-duration 主要用来设置 CSS3 动画播放时间
animation-timing-function 属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，就是上面表格中的那些函数

另有几个特有的属性：
控制播放次数，毕竟是动画嘛；animation-iteration-count 属性主要用来定义动画的播放次数。
这个值通常为整数，但是小数也是可以的，默认为一次，如果是 infinite 表示无限循环
设置动画播放方向 ，就是使用 animation-direction 了 ，其主要有两个值：

  • normal
    默认值，动画的每次循环都是向前播放；
  • alternate
    动画播放在第偶数次向前播放，第奇数次向反方向播放。

控制元素动画的播放状态：使用的是 animation-play-state 属性；其主要有两个值：running 和 paused。从命名也能看出是这是什么作用了，只是如果暂停了动画的播放，元素的样式将回到最原始设置状态（应该是形状和颜色，像背景、位置都是会保留的）。
设置动画时间外属性：animation-fill-mode 属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：

属性值 效果
none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards 表示动画在结束后继续应用最后的关键帧的位置
backwards 会在向元素应用动画样式时迅速应用动画的初始帧
both 元素动画同时具有forwards和backwards效果

布局样式

多列布局

应用多列布局非常简单，通过 columns 属性，语法：columns：<column-width> || <column-count>
第一个为列宽，第二个是分为多少列，直接应用在某个 div 上就行，div 里面可以使用 p 或者 span 等标签来写文字

当然也可以拆开来写，比如

1
2
3
column-width:200px;
-webkit-column-count:3;
column-count:3;

column-width 的值还可以设置为 auto 或者不写，那么就会按照其他属性自动适应，比如参考列数，列数如果设置为 auto 那么默认就当作是 1 列
还可以使用 column-gap 来设置列间距，语法：column-gap: normal || <length> ；normal 为默认值，为 1em（如果你的字号是px，其默认值为你的 font-size 值）
如需跨列的情况，可以使用：column-span: none | all 除了这两种，可以指定跨多少列，一般用于第一段，设置位 all
column-rule 主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的 border 属性。但 column-rule 是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。

style 包括：none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
如果不希望显示边框的颜色，也可以将其设置为 transparent (透明色)

使用如：column-rule: 2px dotted green;

盒模型

通过设置 box-sizing 可以指定其解析方式：box-sizing: content-box | border-box | inherit
我的简单理解为，第一种为 W3C 标准的盒模型，也是默认值 （element width/height = border + padding + content width / height）
第二种是 IE6 以下的盒模型 （元素的宽度或高度等于元素内容的宽度或高度；这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（盒子的宽度或高度 - 边框 - 内距））
第三种是继承父元素的盒模型

总之，最大的用处就是
在自适应布局当中，在元素基础上添加内距 padding，按照标准盒模型解析，往往会将布局撑破，但使用 box-sizing 的 border-box 值，可以让你轻松完成

伸缩布局

CSS3 引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的。

Flexbox 布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。
Flexbox 布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器

Flexbox 规范版本众多，浏览器对此语法支持度也各有不同

生成内容

这个属性我感觉很重要，用的很频繁！

在 Web 中插入内容，在 CSS2.1 时代依靠的是 JavaScript 来实现。但进入 CSS3 进代之后我们可以通过 CSS3 的伪类 :before，:after和 CSS3 的伪元素 ::before、::after来实现，其关键是依靠 CSS3 中的 content 属性来实现。
不过这个属性对于 img 和 input 元素不起作用。
他们两者的区别可以参见：https://www.qianduan.net/before-and-before-the-difference-between/

content 的属性一般有：

功能 功能说明
none 不生成任何内容
attr 插入标签属性值
url 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）
string 插入字符串

在 CSS 中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”，只不过只是在这里插入了一个空格。

1
2
3
4
5
6
7
8
9
10
.clearfix:before,
.clearfix:after {
	content:””;
	display:table;
}

.clearfix:after {
	clear:both;
	overflow:hidden;
}

自由缩放

为了增强用户体验，CSS3 增加了很多新的属性，其中 resize 就是一个重要的属性，它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止，可以使用 overflow 属性的任何容器元素。
resize 的取值：

属性值 取值说明
none 用户不能拖动元素修改尺寸大小。
both 用户可以拖动元素，同时修改元素的宽度和高度
horizontal 用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。
vertical 用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。
inherit 继承父元素的resize属性值。

外轮廓属性

外轮廓 outline 在页面中呈现的效果和边框 border 呈现的效果极其相似，但和元素边框 border 完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。取值为：

属性值 属性值说明
outline-color 定义轮廓线的颜色，属性值为CSS中定义的颜色值。在实际应用中，可以将此参数省略，省略时此参数的默认值为黑色。
outline-style 定义轮廓线的样式，属性为CSS中定义线的样式。在实际应用中，可以将此参数省略，省略时此参数的默认值为none，省略后不对该轮廓线进行任何绘制。
outline-width 定义轮廓线的宽度，属性值可以为一个宽度值。在实际应用中，可以将此参数省略，省略时此参数的默认值为medium，表示绘制中等宽度的轮廓线。
outline-offset 定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。
inherit 元素继承父元素的 outline 效果。

例如：outline: red solid 2px;

媒体类型

简单说就是为了适应不同的设备而弄出来的，在 CSS2 中也是有的，叫 CSS3 Media Queries，目前大多数浏览器已经支持，使用方法类似：

1
2
3
4
5
6
7
8
9
/* media 是在 css3 中新增的 */
@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}
/* 其他方式还有 link 和 import 这些在 css2 中就可以使用 */
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
@import url(reset.css) screen;   
@import url(print.css) print;

意思就是宽度在 600-900px 之间，中间的样式才会生效，这部分没怎么仔细去看，突然感觉前端真的是不容易
Media Queries 在其他浏览器中不要像其他 CSS3 属性一样在不同的浏览器中添加前缀。

这一部分最热的应该就是 Responsive 了，也就是常说的响应式布局，不过…..我没足够的耐心看下去了
使用 Responsive 的话就必须要使用 meta 标签：<meta name=”viewport” content=”” /> ；它用来处理可视区域，content 的取值嘛….

最后附一张相关的表，W3C 总共列出了10种媒体类型：

值 设备类型
All 所有设备
Braille 盲人用点字法触觉回馈设备
Embossed 盲文打印机
Handheld 便携设备
Print 打印用纸或打印预览视图
Projection 各种投影设备
Screen 电脑显示器
Speech 语音或音频合成器
Tv 电视机类型设备
Tty 使用固定密度字母栅格的媒介，比如电传打字机和终端

其中Screen、All和Print为最常见的三种媒体类型。

喜欢就请我吃包辣条吧！

评论框加载失败，无法访问 Disqus

你可能需要魔法上网~~