三、前端开发语言体系-CSS
CSS3
浏览器前缀
为了让 CSS3 样式兼容,需要将某些样式加上浏览器前缀:
前缀 | 描述 |
---|---|
-ms- | 兼容IE浏览器 |
-moz- | 兼容Firefox |
-o- | 兼容Opera |
-webkit- | 兼容 Chrome 和 Safari |
流、元素与基本尺寸
每个元素都有两个盒子:外在盒子和内在盒子。外在盒子负责元素是否可以一行显示,还是只能换行显示;内在盒子(容器盒子)负责宽高、内容呈现等等。
- display: block实际由外在的块级盒子和内在的块级容器盒子组成。
- display: inline-block实际由外在的内联盒子和内在的块级容器盒子组成。
- display: inline内外均是内联。
inline-block、float、absolute(relative)均具有包裹性:尺寸由内容决定,但永远小于外部包含块的尺寸。
height: 100% 想要生效必须首先 html 的 body { height: 100% },然后一层一层指定元素的高度直到该标签为止。当然,绝对定位不需要这样,因为绝对定位的宽高就是根据参照物元素计算的,在绝对定位中直接使用 height: 100% 是没有任何问题的,前提是你的参照物元素已经指定了height。
width: auto 可以理解为使用所有剩余的空间,而 width: 100% 就是父级 width 的100%,所以,当父级元素剩余空间不够时,子元素设置 auto 会占满剩余空间,而 100% 会导致元素溢出。
盒模型四大家族
- content
- 与 :before 及 :after 伪元素配合使用,来插入生成内容。
- padding
- 设置元素的 4 个内边距
- margin
- 设置元素的 4 个外边距
- border
- 设置上下左右 4 个边框的样式
//在每个链接后的括号内加上网址:
a:after
{
content: " (" attr(href) ")";
}
流的破坏与保护
如果一个元素是浮动的(float:left/right),绝对定位的(position:absolute/fixed)或者是根元素(html),那么它被称之为流外的元素(out-of-flow)。如果一个元素不是流外的元素,那么它被称之为流内的元素(in-flow)。
- float
- float 属性定义元素在哪个方向浮动。假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
- absolute
- absolute: 将对象从文档流中拖出,使用left/right等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框
- relative
- 对象不可层叠,但将依据left/right等属性在正常文档流中偏移
层叠规则
- z-index
- z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。z-index并非只对定位元素有效,flex盒子的子元素也可以设置z-index。
- 层叠上下文
- 层叠上下文,英文称作”stacking context”. 是HTML中的一个三维的概念。如果一个元素含有层叠上下文,我们可以理解为这个元素在z轴上就“高人一等”。
- 层叠水平
- 层叠水平英文称作”stacking level”,决定了同一个层叠上下文中元素在z轴上的显示顺序。
- 不要把层叠水平和CSS的z-index属性混为一谈。某些情况下z-index确实可以影响层叠水平,但是,只限于定位元素以及flex盒子的孩子元素;而层叠水平所有的元素都存在。
- 层叠顺序
- 层叠顺序英文称作”stacking order”,表示元素发生层叠时候有着特定的垂直显示顺序,
- 优先级为:层叠上下文background/border < 负z-index < block块级盒子 < float盒子 < inline盒子 < z-index: auto或者z-index: 0 < 正z-index
- 层叠的两个黄金准则
- 谁大谁上:同一个层叠上下文领域内,层叠水平大的在上面
- 后来居上:当层叠水平一致,层叠顺序相同时,DOM中后面的元素会覆盖前面的(比如两个absolute,后面的会覆盖前面的,除非前面的z-index比后面的大)
文本处理
font-size设置不同的HTML元素的尺寸,浏览器默认font-size是16px。
font-family为段落设置字体。
文本控制:
- word-break:在合适的点换行
- normal:使用默认换行规则
- break-all:允许任意非中日韩文文本间的单词断行
- keep-all:行为上与normal一致
- word-wrap:允许长单词换行到下一行
- normal:正常的换行规则
- break-word:一行单词中实在没有其他靠谱的换行点的时候换行
- text-indent:规定文本块中首行文本的缩进
- text-transform:控制字符大小写
元素显示与隐藏
display属性设置元素的显示方式,可选值为 none、block 和 inline。
- none 隐藏元素,不保留元素显示时的空间。
- block块方式显示元素。
- inline 以内嵌方式显示元素(默认值)。
visibility属性设置是否显示该元素,可选值为 inherit、hidden 和 visible。
- inherit 继承父元素的 visibility 属性设置。
- hidden 隐藏元素,但保留其所占空间。
- visible 显示元素(默认值)。
overflow 属性设置当内容溢出元素框时发生的事情,可选值为 visible、hidden、scroll、auto 和 inherit。
- visible 内容不会被修剪,会呈现在元素框之外(默认值)。
- hidden 内容会被修剪,并且其余内容是不可见的。
- scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
- auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
- inherit 继承父元素的 overflow 属性设置。
变形
变形(transform)属性允许你修改CSS视觉格式模型的坐标空间。使用它,元素可以被转换(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)。
transform 属性 , 只对 block 级元素生效!
- 转换translate
transform:translate(x轴,[ y轴 ])
transform:translate(20px,50px) //中间用逗号隔开
transform:translate(-40px,20%) //可以用 px或 %做单位
transform:translate(100px) //只表示 x轴偏移
transform:translateX(20%) //只表示 x轴偏移
transform:translateY(20%) //只表示 y轴偏移
- 旋转rotate
transform:rotate(),默认为顺时针旋转
transform:rotate(45deg) //顺时针旋转
transform:rotate(-60deg) //逆时针旋转
- 缩放scale
transform:scale([,])
transform:scale(1.2,2) //x轴放大1.2倍 y轴放大2倍
transform:scale(1.2) // x轴 y轴都放大1.2倍
transform:scaleX(1.2) //x轴放大1.2倍
transform:scaleY(1.2) //y轴方法1.2倍
- 倾斜skew
transform:skew([,])
transform:skew(30deg) //y轴向x轴倾斜了30度
transform:skew(30deg,30deg) //y轴向x轴倾斜了30度,x轴也向y轴偏移30度
transform:skewX(45deg) //y轴向x轴倾斜了45度
transform:skewY(60deg) //x轴向y轴倾斜了60度
这些变形技巧既可以一个个地使用,也可以组合使用
transform:translate(50px) scale(1.5);
transform:translate(50px) skew(120deg);
刚才我们只是对css元素在2d平面上的移动,旋转,倾斜,缩放,现在我们来了解一下3d上的动作
- transform:translate3d(x, y, z)
- transform:scale3d(x, y, z)
- transform:rotate3d(,,,)
transform:translate3d(10px,20%,200px)
transform:translateX(10px)
transform:translateY(20%)
transform:translateZ(200px)
transform:scale3d(1.2,1.2,1); //x,y轴变大1.3倍,z不变
transform:scaleZ(5) //并不会影响盒子的大小
transform:rotate3d(0,0,1,45deg) //0,0,1表示在z轴上旋转 ,z轴上的1与坐标原点连接
transform:rotate3d(0,1,0,45deg) //表示在y轴上
transform:rotate3d(1,0,0,45deg) //表示在x轴上
transform:rotate3d(1,1,1,45deg) //在坐标为1,1,1与坐标原点连接线上旋转
介绍两个新属性:
- 透视效果
- perspective: none |
- length是用户到z=0平面的距离。它用于将透视变换应用于元素及其内容。
perspective: none;
perspective: 20px;
perspective: 3.5em;
- 变形风格
- transform-style:flat | preserver-3d
- 默认为flat 扁平化,preserve-3d 保留3d空间
transform-style:flat
transform-style:preserve-3d
过渡
过渡(transition)属性可以在事件触发元素的样式变化时,让效果更加细腻平滑。
transition有四个属性值:
- transition-property
- 用来指定哪个属性使用过渡动画效果。
- 语法:transition-property : none | all | [ ] [ ‘,’ ]*
- none:所有属性都不应用过渡效果。
- all:默认值。当值为all时,元素产生任何属性值变化时都将执行transition效果。
- ident:元素属性名。通过ident指定具体哪些属性。如果指定的多个属性中有某个属性不能应用过渡效果,其他属性还是生效的。
transition-property: none;
transition-property: all;
transition-property: sliding-vertically;
- transition-duration
- 用来设置从旧属性过渡到新属性需要的时间,即持续时间。
- 语法:transtion-duration:< time> [, < time>]*
- time表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 0s,表示不会呈现过渡动画,属性会瞬间完成转变。不接受负值。
- 可以指定多个时长,每个时长会被应用到由 transition-property指定的对应属性上。如果指定的时长个数小于属性个数,那么时长列表会重复。如果时长列表更长,那么该列表会被裁减。
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;
- transition-timing-function
- 定义过渡的变化函数
transition-timing-function: ease //默认值,两头慢,中间快
transition-timing-function: ease-in //开始慢
transition-timing-function: ease-out //结束慢
transition-timing-function: ease-in-out //开始结束慢,中间快 幅度大一点
transition-timing-function: linear //匀速
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1) //曲线,设置两个点x,y
transition-timing-function: step-start
transition-timing-function: step-end
transition-timing-function: steps(4, end) //分为4步,每步结尾动画
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)
- transition-delay
- transition-delay设置改变属性值后多长时间开始执行动画
- 语法:transtion-delay:< time>#
transition-delay: 3s;
transition-delay: 2s, 4ms;
动画
CSS3的animation属性可以像Flash制作动画一样,通过控制关键帧来控制动画的每一步,实现更为复杂的动画效果。
animation属性到目前位置得到了大多数浏览器的支持,但是,需要添加浏览器前缀!
ainimation实现动画效果主要由两部分组成:
- 用关键帧声明一个动画;
- 在animation调用关键帧声明的的动画。
animation动画属性:
属性 | 描述 | 备注 |
---|---|---|
animation-name | 用于指定关键帧动画的名字 | 默认值none,将没有任何动画效果,其可以用来覆盖任何动画 |
animation-duration | 用来指定动画播放所需的时间,一般以秒为单位 | 默认值为0,意味着动画周期为0,也就是没有任何动画效果 |
animation-timing-function | 设置动画的播放方式 | 与transition-timing-function一样 |
animation-delay | 指定动画的开始时间,以秒为单位 | 在开始执行动画时需要等待的时间 |
animation-iteration-count | 指定动画的循环播放次数 | 定义动画的播放次数,默认为1。如果为infinite,则无限次循环播放 |
animation-direction | 控制动画的播放方向 | 默认为nomal,每次循环都是向前播放,(0-100),另一个值为alternate,动画播放为偶数次则向前播放,如果为基数词就反方向播放 |
animation-play-state | 设置动画播放状态 | 默认为running,播放,paused,暂停 |
animation-fill-mode | 定义动画开始之前和结束之后发生的操作 | 默认值为none,动画结束时回到动画没开始时的状态;forwards,动画结束后继续应用最后关键帧的位置,即保存在结束状态;backwards,让动画回到第一帧的状态;both:轮流应用forwards和backwards规则。 |
@keyframes就是关键帧。这个帧与Flash里的帧类似,一个动画中可以有很多个帧。
一个@keyframes中的样式规则是由多个百分比构成的,可以在这个规则上创建多个百分比,从而达到一种不断变化的效果。另外,@keyframes必须要加webkit前缀。
使用@keyframes规则,你可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中,您可以更改CSS样式的设定多次。
指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。0%是开头动画,100%是当动画完成。
使用animation属性来控制动画的外观,还需使用选择器绑定动画。为了获得最佳的浏览器支持,应该始终定义为0%和100%的选择器。
@keyframes语法:@keyframes animationname {keyframes-selector {css-styles;}}
值 | 说明 |
---|---|
animationname | 必需的。定义animation的名称。 |
keyframes-selector | 必需的。动画持续时间的百分比。合法值:0-100%。from(和0%相同),to (和100%相同) |
css-styles | 必需的。一个或多个合法的CSS样式属性 |
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
animation属性类似于transition,他们都是随着时间改变元素的属性值,其主要区别在于:transition需要触发一个事件才会随着时间改变其CSS属性;animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果。
Flex弹性盒子
flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁、快速弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。
flex只能在IE10及以上版本使用。
容器上有以下6个属性:
-
flex-direction
- flex-direction属性决定主轴的方向(即项目的排列方向)。
- 语法:flex-direction: row | row-reverse | column | column-reverse;
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
-
flex-wrap
- 默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
- 语法:flex-wrap: nowrap | wrap | wrap-reverse ;
- nowrap(默认值):不换行。
- wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方。
-
flex-flow
- flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
- 语法:flex-flow: < flex-direction > || < flex-wrap >;
-
justify-content
- justify-content属性定义了项目在主轴上的对齐方式。假设主轴为从左到右。
- 语法:justify-content: flex-start | flex-end | center | space-between | space-around;
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
-
align-items
- align-items属性定义项目在交叉轴上如何对齐。假设交叉轴从上到下。
- 语法:align-items: flex-start | flex-end | center | baseline | stretch;
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
-
align-content
- align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
- 语法:align-content: flex-start | flex-end | center | space-between | space-around | stretch;
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- tretch(默认值):轴线占满整个交叉轴。
CSS工程化
CSS 层叠样式表是一门标记语言,并不是编程语言,因此不可以自定义变量,不可以引用等,换句话说就是不具备任何语法支持,它还是有很多缺陷,这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题,前端开发人员会使用一种称之为 “CSS 预处理器” 的工具,提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性,大大提高了前端在样式上的开发效率。
CSS预处理器是一种专门的编程语言,用来为CSS增加一些编程特性。不需要考虑浏览器兼容问题,因为CSS预处理器最终编译和输出的仍是标准的CSS样式。可以在CSS预处理器中:使用变量、简单逻辑判断、函数等基本编程技巧。
CSS预处理器种类繁多,常用的 CSS 预处理器有 Sass、Less、Stylus。
- Sass:以 .sass 为扩展名。基于 Ruby,通过服务端处理,功能强大。解析效率高。需要学习 Ruby 语言,上手难度高于 LESS。
- Less:以 .less 为扩展名。基于 NodeJS,通过客户端处理,使用简单。功能比 SASS 简单,解析效率也低于SASS,但在实际开发中足够了,所以后台人员如果需要的话,建议使用 LESS。
- Stylus,以 .styl 为扩展名。来自Node.js社区,主要用来给Node项目进行CSS预处理支持,在此社区之内有一定支持者,在广泛的意义上人气还完全不如SASS和LESS。
这三种预处理的详细语法请看这篇博客 CSS预处理器语法
CSS 后处理器 是对 CSS 进行处理,并最终生成 CSS 的 预处理器,它属于广义上的 CSS 预处理器。
这里主要介绍两个有名的后处理器:AutoPrefixer、clean-css,和两个有名的后处理器框架:Rework 和 PostCss。
Autoprefixer 只做语法 Prefix 层面的兼容,处理CSS代码之后能提高对浏览器的兼容性。
原始代码
.container {
display: flex;
}
.item {
flex: 1;
}
将原始的 标准 CSS,编译为处理了兼容性的生产环境 CSS:
.container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.item {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
clean-css 是一个非常简单的 CSS 压缩程序,可以删除 CSS 中一些无用的空格、评论以及每个选择器后面的分号等。
clean-css可以在命令行中使用,也可以在Node.js中使用。在Node.js中使用为:
# Get the clean-css package
var cleanCSS = require('clean-css');
# Read in the source of a file or use hard-coded CSS...
var source = "body { color: red; font-weight: bold; }";
# Minify!
var minifiedCSS = cleanCSS.process(source);
Rework 是一个高效、简单、易扩展并且模块化的 CSS 预处理器,是 Stylus 的作者的新作。它的模块化做的非常好,你可以按照实际需要,组合 CSS 框架。Rework 还很年轻,还需要更多的时间积累。
Rework有以下特点:
- JavaScript 中直接操作 CSS 解析对象,扩展方便
- 可以自由组合模块,按需定制 CSS 工具库
- CSS 后处理器 的模型决定它的模块倾向 CSS 未来标准
- 除服务器端外,也支持在浏览器环境运行
PostCSS 是一个 CSS 后处理器 框架,允许你通过 JavaScript 对 CSS 进行修,是从 Autoprefixer 项目中抽象出的框架。
PostCSS有以下特点:
- 它和 Rework 非常相似,但提供了更高级的 API,更易扩展
- 它可以在现有 Source Map 的基础上生成新的 Source Map
- 在原有 CSS 格式的保留方面做的更好,便于开发编辑器插件
- 比 Rework 更年轻,还只有 Autoprefixer 一个成功案例
CSS 后处理器 的出现让 CSS 工作流 更清晰,但现在他们还远未成熟,还有很多地方能够做的更好。