注意不到的css语法

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 中的

 标签。
 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 的后面。