css总结

CSS 基础

首先必须了解什么是 CSS： CSS 是指层叠样式表（Cascading Style Sheets），可以通过样式的定义来显示 HTML 元素（即可以通过 CSS 来给一些用户看得到的东西加上样式），而这些样式通常存储在样式表中：

样式层叠：多次对同一选择器进行样式声明；

选择器层叠：用不同选择器对同一个元素进行样式声明；

文件层叠：用多个文件进行层叠。

而 CSS 的版本可以从 1996 年开始追溯，当时所推行的版本为 CSS1；而到了 1998 年，CSS2 在原来的基础上增加了定位、z-index、media 等；到了 2004～2011 年，CSS2.1 的出现，使其成为了到目前为止最为广泛的版本；而从 1999 年起，CSS3 成为最为现代的版本，出现了分模块的操作，CSS4 只是在其基础上进行分模块的升级。

在使用 CSS 过程中会有一些浏览器出现不支持某些特性的情况，此时应注意运行调试或使用 链接

CSS 语法（一）

基本语法：

其中所有符号都应为英文符号而且区分大小写，如果出错了则只能在浏览器开发者工具中看到警告，不会报错。

CSS 语法（二）

at 语法：

解决了字符集与文件编码不一致的问题。

其中 charset 必须放第一行，前面两个都需要以 @加分号结尾，media 需要单独学习，charset 为字符集，UTF-8 为字符编码。

文档流、盒模型

文档流

文档流即 Normal Flow，指文档的流动方向，起初是指内联元素（如 span）会从左到右自动排列，而块级元素（如 div）会从上到下自动排列，但是在 HTML5 中可以通过 display：inline-block 改变其属性，所以不再区分什么元素是内联元素或块级元素，此处就不举例了。

盒模型

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。

而盒模型分为 content-box 和 border-box，它们的区别是：

content-box 的宽度只包含 content 内容宽度；

border-box 的宽度则包含了 border 的宽度、padding 的宽度以及 content 内容宽度。

一般来说二者并没有明显的区别，但是如果我们需要同时指定 border、padding、width 时，就会发现二者有明显区别。

CSS 布局（一）

CSS 的布局即将页面分成块，按照左中右、上中下等顺序排列。布局有 3 种方法，分别是：

固定宽度布局，一般宽度为 960px/1000px/1024px；

不固定宽度布局，主要靠文档流的原理进行布局；

响应式布局，PC 端上固定宽度，手机上不固定宽度，即混合布局。

首先，来看第一种 CSS 布局方式，Float 布局。

其步骤是：

子元素加上 float:left 和 width

父元素加上. clearfix

在使用任何布局前，尽量使用 *{margin:0;padding:0;box-sizing: border-box;} 进行 reset。

在 reset 之后，加上三句话即完成布局：

在使用 float 布局时，要注意以下几点：

尽量留有一定的空间，最后一个 div 不要设置宽度或者使用 max-width：100%;

使用 float 布局不需要做任何响应式，因为 float 布局只适用于 IE 浏览器；

IE6/7 中存在双倍 margin 的 bug，此时可以使用 margin-left: 10px; 加一句_margin-left: 5px; 再加句 display: inline-block 即可。

使用 float 布局，可以做两栏布局、三栏布局、四栏布局、平均布局等，比较适合用来做导航栏。但是缺点是每一个布局位置都需要人工进行计算，适当时候可以利用负 margin 进行布局。

CSS 布局（二）

第二种比较通用的布局是 Flex 布局。

Flex 布局目前兼容绝大部分的浏览器，是比较流行的布局之一。主要由 container 与 items 组成。

容器 container

首先，需要让一个元素变成容器，这时就需要：

其中，flex-direction：row 为默认值，即默认为从左到右，可以改成 row-reverse（从右到左）、column（从上到下）、column-reverse（从下到上）。

flex-wrap： nowrap 为默认值，即默认不换行，可以改成 wrap，则自动换行。

另外还有一些对齐方式如下表所示：

项目 items

项目按照顺序命名，分别是. item:first-child|.item:nth-child(n)|.item:last-child。

首先可以加 order 进行项目顺序的排列，默认是 0，按顺序排列，也可以是负数；

其次是 flex-glow: 可以控制空间分配，默认是 0，可以按比例进行分配；

也可以使用 flex-shrink: 来控制如何缩放，数值越大则缩得越快，默认是 1，当为 0 是可以防止缩小；

也可以使用 flex-basis 控制基准宽度，默认为 auto；

最后也可以用 align-self: 控制项目置顶、靠底、居中、拉伸等。

CSS 布局（三）

最后是一种比较新型的布局方式，Grid 布局。

grid 与 flex 布局的最大的区别是，flex 布局是一维的布局，而 grid 布局实现了二维布局，可以从行、列两个方向进行布局。flex 布局也是分为 container 与 items。

首先是使一个元素成为 container，这点与 flex 布局类似：

第二点，它的行与列可以自由规定，比如：

当 html 为：

CSS 为：

则就会出现以下样式：

第三点，items 可以设置范围。

表示从第二列开始到第五列结束，从第二行开始到第三行结束的区域。

第四点，可以使用 fr（free space）来分份：

第五点，使用 grid-template-areas 来指定区域：

然后再在每一个部分下面逐个声明，如：

最后，可以使用 grid-gap 来管理空隙。

总的来说，grid 布局适合用来做一些不规则的布局。并且可以使用grid template: 50% 50% /200px缩写来代表两行网格，每行占 50%，以及一列 200px 宽。

CSS 定位

定位与布局的区别是：

布局是在屏幕平面上进行的；

定位是垂直于屏幕进行的。

默认的顺序为：

内容（内联子元素）

浮动元素（脱离文档流的元素）

块级子元素

border

background

而其中，文字内容与所在的层级无关，只与先后顺序有关。

此时，我们可以使用一个新的属性，叫 position 来进行定位：

而总的来说：

当一个元素进行了定位，即 position 不是 static，则该元素会自动跳到层叠上下文的最上方；

在同一个层叠上下文中，可以使用z-index=-2,-1,0,1,2来进行排列，当 z-index 值大于或等于 0 时，则在内联子元素的上方；当 z-index 的值为负数时，则排列于 background 的下方；

每一个层叠上下文都可以理解为一个小世界，z-index 只在同一个世界中才有可比性；

创建层叠上下文的方法在 MDN 中有详细介绍，常用的有 z-index｜flexd｜opacity｜transform 等。

浏览器渲染原理（补充知识点）

简单来总结的话，浏览器的渲染过程其实可以分为五步：

根据 html 构建 html 树（DOM）；

根据 CSS 构建 CSS 树（CSSOM），前两步合并成为渲染树（Render tree）；

layout 布局（文档流、盒模型、计算大小及位置）；

paint 绘制（边框颜色、文字颜色、阴影）；

composite 合成（根据层叠关系展示画面）。

知道了浏览器渲染的过程原理之后，我们还需要了解如何更新样式，总共有如下三种方式：

JS/CSS > 样式 > 布局 > 绘制 > 合成（三步全走，如 div.remove()）

JS/CSS > 样式 > 绘制 > 合成（跳过 layout，如改变背景颜色）

JS/CSS > 样式 > 合成（改变 transform，只需 composite）

在了解了以上知识之后，我们就可以得到一点启发：对 CSS 动画进行优化的时候，分别从 JS 和 CSS 的层面出发，可以通过在 JS 中用 requestAnimationFrame 代替 seTimeout 或 setInterval，在 CSS 中用 will-change 或 translate 来实现优化效果。

CSS 动画（一）

在研究 CSS 动画的过程中，需要先了解如何让一个元素变成我们希望的形状及可以移动位置。这时就需要我们使用到 transform，其主要有 translate 位移、scale 缩放、rotate 旋转以及 skew 倾斜四个属性。

首先是 translate：

translateX（）沿 X 轴平移；

translateY（）沿 Y 轴平移；

translateZ（）沿 Z 轴平移；

translate（x,y）移动至（x，y）；

translate3d（x,y,z）三维空间内移动，一般比较少用到；

translate（-50%，-50%）可以实现绝对定位元素居中，但是要注意需要与left:50%;top:50%;结合使用。

接下来是 scale：

scaleX 横向缩放（方向上的 border 也会缩放）；

scaleY 纵向缩放（方向上的 border 也会缩放）；

scale（x,y）整体缩放；

第三点是 rotate：

rotate([<角度>|<0>]);

rotateX（～）；

rotateY（～）；

rotateZ（～）；

最后是 skew：

skewX([<角度>|<0>]);

skewY([<角度>|<0>]);

skew（x，y）；

CSS 动画（二）

动画是由许多静止的画面组合而成的，每一个画面叫做帧。而当我们利用 CSS 做动画时，如果只通过 transform 标签来做，就只能做出一个个帧的效果，此时我们就需要另一个标签来补充这些动画之间的中间帧，transition 标签就符合我们的需求。

transition 的语法是

每一个属性之间可以使用逗号来分隔，也可以使用 all 来代指所有的属性。其中过渡方式有：linear｜ease｜ease-in｜ease-out｜ease-in-out｜cubic-bezier｜step-start｜step-end｜steps 等。

但是也要注意，并不是所有的属性都可以过渡，比如从 display:none 到 display:block 就无法实现过渡效果，而像背景颜色、opacity 等均可以过渡。

而且过渡必须要有起始点和终点，一般一次的 transition 就只能控制一次过渡，如果需要有中间点，则需要添加多次的 transform 或使用更高级的 animation 标签。

CSS 动画（三）

使用 animation，就可以实现只补充关键帧的情况下进行多动画的合并。具体的语法如下：

即先声明关键帧，然后再添加声明：

总结

前面有一段时间因为学校的事情计算机的学习耽搁了几天，就发现有一点生疏，便查看了过去学习的 CSS 笔记，来做一篇小小的总结博客。

学 CSS 的几天下来发现，CSS 并不像一些数学公式一样可推导，它给我个人的感觉更像是一个个化学的知识点，每一个标签都会有其特异的地方，所以一定要在日常的学习使用中多多积累，遇到不会的地方或者 bug 就多上 MDN 搜索查询，对学习 CSS 的帮助会非常大，总结就是四个字：多用，多搜。

#网页设计与制作项目教程（HTML+CSS+JavaScript）（书籍）#