三、前端开发语言体系-CSS

文章目录

三、前端开发语言体系-CSS

CSS3

浏览器前缀
流、元素与基本尺寸
盒模型四大家族
流的破坏与保护
层叠规则
文本处理
元素显示与隐藏
变形
过渡
动画
Flex弹性盒子
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) ")";
}

CSS

流的破坏与保护

如果一个元素是浮动的(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
层叠的两个黄金准则
1. 谁大谁上：同一个层叠上下文领域内，层叠水平大的在上面
2. 后来居上：当层叠水平一致，层叠顺序相同时，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有以下特点：