1、描述
2、css
以下是部门常用知识点：
CSS的书写方式
行内式：将CSS代码书写在HTML标签的style属性中。style是一个通用属性，每一个标签里面都拥有这个属性，规则：
<标签名 style=”属性:值;属性:值;”></标签名>
嵌入式：将CSS代码嵌入到HTML文件中，嵌入式是通过HTML中的<style>标签将CSS代码嵌入到HTML网页中，规则：
<style type=”text/css”>
/*书写CSS代码*/
选择器{属性:值;属性:值;}
</style>
外链式：写以.css扩展名的文件，然后在<head></head>标签中使用<link />标签，将css文件链接到html文件中，规则：
<标签名 style=”属性:值;属性:值;”></标签名>
选择器
元素选择器、id选择器、类选择器、
属性选择器(如为带有 title 属性的所有元素设置样式 [title] {somestyles} )、
属性和值选择器(如为带有 title="hello title" 的所有元素设置样式 [title=W3School] {somestyles} )、
派生选择器(通过依据元素在其位置的上下文关系来定义样式)，有三种
后代选择器： 空格隔开;
子元素选择器： >隔开，只能选择作为某元素子元素的元素;
相邻兄弟选择器：选择紧接在一元素后的元素，且二者有相同父元素,
如设置紧接 h1 后出现的 p 的字体颜色：h1 + p {color: red;};
注1：.a,.b该逗号表示存在其中一个类的元素就设置，多元选择；
注1：.a.b没有空格表示同时拥有两个类的元素。
盒子模型
所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，
它包括：margin(外边距)、border(边框)、padding(内边距)、content(内容)
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
定位
Position属性：规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示
absolute： 绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。
定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。
relative ：相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。
定位的起始位置为此元素原先在文档流的位置。
fixed ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。
static ：默认值；默认布局.
辅助属性：position属性只是使元素脱离文档流，要想此元素能按照希望的位置显示，
需要使用下面的属性(position:static不支持这些)：
①left ： 表示向元素的左边插入多少像素，使元素向右移动多少像素。
②right ：表示向元素的右边插入多少像素，使元素向左移动多少像素。
③top ：表示向元素的上方插入多少像素，使元素向下移动多少像素。
④bottom ：表示向元素的下方插入多少像素，使元素向上移动多少像素。
注：上面属性的值可以为负，单位：px 。
布局
(省略…)
3、sass、scss、和css的关系
css预处理器
css预处理器是用一种专门的语言，进行网页的样式设计，之后在被编译为正常的css文件，以供项目使用。使用css预处理语言的好处：是css更加简洁、方便修改、可读性强、适应新强并且更易于代码的维护。
css和sass的关系
sass是由buby语言编写的一款css预处理语言，和html一样有严格的缩进风格，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不被广为接受。
scss和css的关系
SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。
sass和scss的关系
sass和scss其实是一样的css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。
SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。
两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有严格的缩进规范并且没有‘{}’和‘；’。
而scss则和css的规范是一致的。
示例代码
// sass
#sidebar
width: 30%
background-color: #faa
// scss
#sidebar {
width: 30%;
background-color: #faa;
}
4、sass
5、scss
scss 注释
多行注释 - 这些使用 /**/ 写入。多行注释都保留在CSS输出。
单行注释 - 这些是使用 // 跟着注释。单行注释不会保留在CSS输出。
变量
$ 符号来标识变量；把反复使用的css属性值定义成变量；
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color; // 变量中可存在变量
$link-color: blue;
a {
color: $link_color; // 中划线和下划线等价，包括对混合器和Sass函数的命名
}
$side : left;
.rounded {
border-#{$side}-radius: 5px; // 如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
}
$nav-color: #F90;// 当前样式表都可以使用
nav {
$width: 100px; // 只有nav{}里面才可以使用，当前样式表其他地方可以重复定义和使用
width: $width;
color: $nav-color;
}
//编译后
nav {
width: 100px;
color: #F90;
}
嵌套
选择器嵌套
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
/* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
属性也可以嵌套，比如border-color属性，可以写成：
p {
border: { // 注意，border后面必须加上冒号。
color: red;
}
}
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成
a {
&:hover { color: #ffb3ff; } }
计算功能
所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。
数字运算: 支持数字的加减乘除、取整等运算 (+, -, *, /, %)
$var: 20px;
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;}
字符串运算： + 可用于连接字符串
注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，
相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号
p {cursor: e + -resize;} //编译后 p {cursor: e-resize; }
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";}
// 编译为
p:before {
content: "Foo Bar";
font-family: sans-serif; }
代码的重用
继承
继承是基于类class的（有时是基于其他类型的选择器）
允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 {
border: 1px solid #ddd;}
// class2要继承class1，就要使用@extend命令：
.class2 {
@extend .class1;
font-size:120%;
}
混合器 Mixin
// 使用@mixin命令，定义一个代码块。
@mixin left {
float: left;
margin-left: 10px;
}
//使用@include命令，调用这个mixin。
div {
@include left;
}
// mixin的强大之处，在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
// 使用的时候，根据需要加入参数：
div {
@include left(20px);
}
插入文件
@import "foo.scss"; //都会导入文件 foo.scss
@import "foo"; //都会导入文件 foo.scss
@import "http://foo.com/bar"; // 插入外部文件
@import "foo.css"; // 等同于css的import命令。