其中，常用的有：block， inline-block， none， table， line。

首先，使用position的时候，应该记住一个规律是‘子绝父相’。

relative（相对定位）： 生成相对定位的元素，定位原点是元素本身所在的位置；

absolute（绝对定位）：生成绝对定位的元素，定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的。

fixed （老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。

static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right、z-index 声明）。

inherit：规定从父元素继承 position 属性的值。

关于CSS新增的特性，有以下：

• 选择器;
• 圆角（border-raduis）;
• 多列布局（multi-column layout）;
• 阴影（shadow）和反射（reflect）;
• 文字特效（text-shadow）;
• 文字渲染（text-decoration）;
• 线性渐变（gradient）;
• 旋转（rotate）/缩放（scale）/倾斜（skew）/移动（translate）;
• 媒体查询（@media）;
• RGBA和透明度 ;
• @font-face属性;
• 多背景图 ;
• 盒子大小;
• 语音;

大致想到这么多，有遗漏的可以留言指出，小编看到会加上。

css: * {margin: 0; padding: 0;} .content { width: 0; height: 0; margin: 0 auto; border-width: 20px; border-style: solid; border-color: transparent transparent pink transparent; // 对应上右下左，此处为 下 粉色 } html: <div class="content"></div> 复制代码方法二： 采用的是均分原理

实现步骤： 1.首先保证元素是块级元素；2.设置元素的边框；3.不需要显示的边框使用透明色。

css: * {margin: 0; padding: 0;} .content { width:0; height:0; margin:0 auto; border:50px solid transparent; border-top: 50px solid pink; } html: <div class="content"></div> 复制代码

响应式网站设计（Responsive Web design）是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

关于原理： 基本原理是通过媒体查询（@media）查询检测不同的设备屏幕尺寸做处理。

关于兼容： 页面头部必须有mate声明的viewport。

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/> 复制代码12.为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对标签的默认值是不同的，如果没有对浏览器的CSS初始化，会造成相同页面在不同浏览器的显示存在差异。

非IE浏览器下，容器不设定高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面而影响布局。此类现象被称为浮动（溢出）。

原理：

• 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）；
• 浮动元素碰到包含它的边框或其它浮动元素的边框停留。

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流之中，文档流的块级框会表现的就像浮动框不存在一样。浮动元素会漂浮在文档流的块级框之上。

浮动会带来的问题：

• 父级元素的高度将会无法被撑开，会影响与父级元素同级的元素
• 与浮动元素同级的非浮动元素（内联元素）会跟随其后
• 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

清除方式：

• 父级盒子定义高度（height）;
• 最后一个浮动元素后面加一个div空标签，并且添加样式clear: both;
• 包含浮动元素的父级标签添加样式overflow为hidden/both;
• 父级div定义zoom;

• 多个css可合并，并尽量减少http请求
• 属性值为0时，不加单位
• 将css文件放在页面最上面
• 避免后代选择符，过度约束和链式选择符
• 使用紧凑的语法
• 避免不必要的重复
• 使用语义化命名，便于维护
• 尽量少的使用!impotrant，可以选择其他选择器
• 精简规则，尽可能合并不同类的重复规则
• 遵守盒子模型规则

预处理器，如：less，sass，stylus,用来预编译sass或者less，增加了css代码的复用性，还有层级，mixin， 变量，循环， 函数等，对编写以及开发UI组件都极为方便。

后处理器， 如： postCss,通常被视为在完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

css预处理器为css增加一些编程特性，无需考虑浏览器的兼容问题，我们可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，可以让我们的css更加的简洁，增加适应性以及可读性，可维护性等。

其它css预处理器语言：Sass（Scss）, Less, Stylus, Turbine, Swithch css, CSS Cacheer, DT Css。

使用原因：

• 结构清晰， 便于扩展
• 可以很方便的屏蔽浏览器私有语法的差异
• 可以轻松实现多重继承
• 完美的兼容了CSS代码，可以应用到老项目中

（1）、冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

（2）、::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

注意： :before和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after。

-webkit-font-smoothing在 window系统下没有起作用，但是在 IOS设备上起作用 -webkit-font-smoothing：antialiased是最佳的，灰度平滑。

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

opacity 作用于元素以及元素内的所有内容（包括文字）的透明度；

rgba()只作用于元素自身的颜色或其背景色，子元素不会继承透明效果；

content 属性专门应用在 before/after 伪元素上，用于插入额外内容或样式。

概念： Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

适用场景： 任何一个容器都可以指定为Flex布局。Flexbox 用于不同尺寸屏幕中创建可自动扩展和收缩布局。

• 有空格时候会有间隙， 可以删除空格解决；
• margin正值的时候， 可以让margin使用负值解决；
• 使用font-size时候，可通过设置font-size:0、letter-spacing、word-spacing解决；

（1）、png-便携式网络图片（Portable Network Graphics）,是一种无损数据压缩位图文件格式。优点是：压缩比高，色彩好。 大多数地方都可以用。

（2）、jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。

（3）、gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果。

（4）、bmp的优点： 高质量图片；缺点： 体积太大； 适用场景： windows桌面壁纸；

（4）、webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

px相对于显示器屏幕分辨率，无法用浏览器字体放大功能。

em值不是固定的，会继承父级的字体大小： em = 像素值 / 父级font-size。

方案一： .content { height: calc(100%-100px); }

方案二：.container { position:relative; } .content { position: absolute; top: 100px; bottom: 0; }

方案三：.container { display:flex; flex-direction:column; } .content { flex:1; }

监听滚轮事件，然后滚动到一定距离时用 jquery 的 animate 实现平滑效果。

• Transform: 它和width、left一样，定义了元素很多静态样式实现变形、旋转、缩放、移位及透视等功能，通过一系列功能的组合我们可以实现很炫酷的静态效果（非动画)。
• Animation: 作用于元素本身而不是样式属性,属于关键帧动画的范畴，它本身被用来替代一些纯粹表现的javascript代码而实现动画,可以通过keyframe显式控制当前帧的属性值。
• animation-duration：规定完成动画所花费的时间，以秒或毫秒计。

line-height指的是一行字的高度，包含了字间距，实际上是下一行基线到上一行基线的距离。如果一个标签没有定义height属性，那么其最终表现的高度是由line-height决定的。一个容器没有设置高度，那么撑开容器的高度的是line-height,而不是容器内部的文字内容。把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。line-height和height都能撑开一个高度，height会触发haslayout，而line-height不会。

可将css拆分成两部分： 公共CSS和业务CSS。

网站的配色，字体，交互提取出为公共的CSS。这部分的CSS命名不应涉及具体的业务。对于业务CSS，需要有统一的命名，使用公共的前缀。

在网页中的应该使用“偶数”字体：

偶数字号相对更容易和 web 设计的其他部分构成比例关系，使用奇数号字体时文本段落无法对齐，宋体的中文网页排布中使用最多的就是 12 和 14。