1.calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则

div1 {

position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;

}

2. white-space

实例：
规定段落中的文本不进行换行：

p{

white-space:nowrap;

}

属性值

normal：默认。空白会被浏览器忽略。
pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap：文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
pre-wrap：保留空白符序列，但是正常地进行换行。
pre-line：合并空白符序列，但是保留换行符。
inherit：规定应该从父元素继承 white-space 属性的值。

3.文本溢出显示省略号

text-overflow:ellipsis
实例：

div{

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap

}

4.伪元素before、after

content属性

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。

content可取以下值
1.字符串[“可以是符号什么的也可以是单纯的字符” ,支持unicode编码!!]
2.属性[attr() , 可以获取标签上的元素属性,比如data-*的自定义属性,title,alt这些]
3.引用媒体文件[url ,可以链接图片作为背景图什么的]
4.计数器[counter() …. 这个我基本没用过,也不在此处说,可能用的地方比较少,我还没看到过]
灵活运用这两个可以做好多东东,比如清除浮动,各种额外的视觉效果[阴影,跳转等]

5.a标签的伪类

:link 有链接属性时
:visited 链接地址已被访问过
:active 被用户激活(在鼠标点击与释放之间发生的事件)
:hover 其鼠标悬停
写样式的顺讯为爱恨分明原则: l v h a
原因
第一：不管什么情况下鼠标悬停都应该有一个样式变化（:hover）,我们就把hover放在最后，防止具备其他状态时，被其他状态的设置覆盖掉。
第二：当a被激活时(:active)，我们要求不管是否访问过，都应该有相同的样式，也就是这个状态的效果应该能够覆盖未被访问时(:link)与 已访问过(:visited)两种状态。应该放在 :link :hover的后面。
第三：被访问过的a（:visited）可能会有不一样的样式属性，用来区别a是否被访问过。也就是说:visited 状态的属性可以覆盖掉:link状态的属性， 即 :visited 要放在 :link 的后面。