xiangxiongfly

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。因为 Less 和 CSS 非常像，Less具有以下优点：变量：可以定义变量来存储颜色、字体、大小等常用样式，方便后续的样式修改和维护。嵌套规则：可以将相关的选择器嵌套在一起，使代码更加简洁易读。混合（Mixin）：可以将一些常

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。

响应式布局是指网站或应用程序可以自适应不同的屏幕尺寸和设备类型，简而言之就是一个网站兼容多种终端。

在CSS中，BFC（Block Formatting Context，即块级格式化上下文）。它是一个独立的渲染区域，块级盒子按照移动的规则进行布局，并与外部的元素相互隔离。

命名规范CSS文件命名法id和class命名法网页元素命名法书写顺序规范注释规范

绝对单位相对单位使用%效果使用em实现首行缩进2个字

单列布局单列布局（不通栏）单列布局（通栏）双列布局float+overflow:hiddenflexgrid三列布局三列布局（圣杯布局）三列布局（双飞翼布局）等高布局等高布局（正padding+负margin）仿表格布局粘连布局

CSS+JS 侧滑菜单

CSS 排行榜

CSS+JS 折叠效果CSS+jQuery 鼠标经过显示详细信息

CSS+JS 返回顶部

CSS+JS 弹窗+动画

CSS 图文左右布局

在CSS3中，我们可以使用pointer-events属性来定义元素是否禁用鼠标单击事件。pointer-events属性是一个与JavaScript有关的属性。

在CSS3中，我们可以使用calc()函数通过“计算”的方式来定义某一个属性的取值。

在实际开发中，我们有时需要将某个CSS属性重新设置为它的默认值。大多数情况下，我们都是采用直接给一个值的方式来实现。例如，浏览器默认字体颜色为黑色，如果重置color属性为默认值，我们大多数都是使用color:black;。但是很多时候，我们对元素的默认样式并不是特别清楚，例如p元素默认会有一定的margin，但是我们并不知道默认的margin是多少。在CSS3中，我们可以使用initial属性直接将某个CSS属性重置为它的默认值，并不需要事先知道这个CSS属性的默认值是多少，因为浏览器会自动设置的。

当文本框获取焦点时，我们可以看到文本框周围会出现一条淡蓝色的轮廓线。outline用于设置元素的轮廓线，用法和border一样，但轮廓线不会影响到边框的大小。

在CSS3中，新增了滤镜效果，可以轻松实现黑白效果、复古效果、亮度效果等。

在CSS3之前，如果想要设计类似报纸那样的多列布局，有两种方式可以实现：一种是“浮动布局”，另一种是“定位布局”。不过这两种方式弊端都很多：浮动布局比较灵活，但不容易控制；定位布局可以精准定位，但是却不够灵活。CSS3新增多列布局，使用多列布局可以轻松实现类似报纸那样的布局，而且这种布局的自适应能力也非常好。

动画案例

关键字 & 十六进制 & RGBopacity 透明度RGBA 颜色

文字居中多行文字垂直居中块元素水平居中行内元素、行内块元素居中块元素居中一块元素居中二块元素居中三flex居中

radio和checkbox居中问题textarea表单对齐效果

overflowoverflow-x 和 overflow-ydisplayvisibility

超链接样式超链接伪类简化超链接样式鼠标样式浏览器鼠标样式自定义鼠标样式

语法有序列表取值无序列表取值去除列表项符号使用语法使用

background-color 背景颜色background-image 背景图片background-repeat 背景平铺方式background-position 背景位置background-attachment 背景固定模式background 简写background-size 背景大小background-origin 背景位置background-clip 背景剪切多背景图片CSS精灵图

边框样式border-width 边框宽度border-style 边框外观border-color 边框颜色border 简写局部样式border-radius 边框圆角box-shaow 边框阴影border-image 边框背景

W3C（Web标准制定者）对vertical-align属性的定义是极其复杂的，其中有一项是“vertical-align属性定义周围的行内元素或文本相对于该元素的垂直方式”。可以设置h1元素的长宽与LOGO图片的长宽一样，然后定义h1的背景图片（background-image）为LOGO图片。vertical-align属性对inline元素、inline-block元素、table-cell有效，对block元素无效。x-offset参数：阴影水平偏移距离，单位可以是px、em、百分比。

继承性层叠性优先级权重计算

三角形圆角圆形半圆椭圆聊天框标签

CSS3新增了一种新型的弹性盒子模型。通过弹性盒子模型，我们可以轻松地创建自适应浏览器窗口的“流动布局”以及自适应字体大小的弹性布局，使得响应式布局的实现更加容易。此外记住一点：在使用弹性盒子模型之前，你必须为父元素定义display:flex;或display:inline-flex;，这样父元素才具有弹性盒子模型的特点。

在CSS3中，动画效果包括4个部分：变形（transform）、3D变形、过渡（transition）、动画（animation）。

static 静态定位relative 相对定位导航条制作absolute 绝对定位水平垂直居中fixed 固定定位四种定位总结z-index 叠放次序

浮动特性使用浮动文字环绕效果水平导航条浮动布局浮动的缺点高度塌陷问题布局错乱清除浮动使用clear:both使用overflow:hidden使用::after伪元素

盒子结构content 内容区border 边框padding 内边距margin 外边距盒子模型：box-sizingborder:0 和 border:none 区别外边距叠加问题同级元素父子元素

元素选择器id选择器class选择器通配符选择器交集选择器并集选择器后代选择器子代选择器兄弟选择器相邻选择器底部导航栏制作属性选择器伪类选择器a标签伪类选择器CSS3伪类伪元素选择器不同选择器的解析速度选择器使用技巧不要使用通配符不要在id选择器和class选择器前面添加元素名选择器最好不要超过三层，位置靠右的选择条件尽可能精确

正常文档流脱离文档流块元素特点常见块元素行内元素特点常见行内元素行内块元素特点常见行内块元素