css小知识杂记

一

css加载方式link和@import的区别，为什么不推荐使用@import?


　　1. @import是CSS提供加载样式的一种方式，只能用于加载CSS。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等。


　　2. 加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候会比较明显。


　　3. 兼容性的差别。@import在IE5以上才能识别，而link标签无此问题。


　　4. 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为dom操作元素的样式时，用@import方式的样式也许还未加载完成。


5.使用@import方式会增加HTTP请求，会影响加载速度，所以谨慎使用该方法。

二

1  font-variant 指定文本是否为小型的大写字母（比一般字号小一些的大写字母）
默认值normal
属性值
normal 正常的字体
small-caps 小型的大写字母

2  全局reset文件
一般很多网站都有这么一个重置默认样式的css文件，它的作用是重置浏览器元素的默认样式，我们知道浏览器会有自己的样式，那这个reset文件的作用是重置样式，清除浏览器默认样式，并配置适合设计的基础样式（强调文本是否大多是粗体、主文字色，主链接色，主字体等）。
一般名称为reset.css或global.css
在我们的项目中应用reset文件，看看它会怎么显示默认的样式。这是通常我们会使用的消除浏览器兼容的一个作法。

  3    display常见属性值
. none：隐藏对象。（注意： *visibility:hidden和opacity:0会将元素隐藏，但是物理空间实际存在。而display:none不保留物理空间。）
. inline：指定对象为内联元素
. block：指定对象为块元素
. inline-block：指定对象为内联块元素
table-cell：指定对象作为表格单元格

4       position定位
       position属性是指本体相对于上级的定位，position定位又分绝对定位和相对定位。它的默认值是static，意味着元素没有被定位，出现在文档流中应该出现的位置。如果用position来布局页面，父级元素的position属性必须为relative或absolute。行元素加了position:absolute后可设置宽和高。
常见属性值：
1.static：无特殊定位，对象遵循正常文档流。
2.relative：对象遵循正常文档流。
3.absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
4.fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。IE6及以下不支持此参数值
（static、relative正常文档流    absolute、fixed脱离文档流）

5  z-index

         z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。z-index可以是负值，Z-index 仅能在定位元素上奏效，如position:absolute。

三  清除浮动

1.使用伪元素清除浮动
.box::after{ content: " "; clear: both; display: block;}
.left,.right{ width:100px; height: 100px; background:#388bff; float: left;}
<div class="box">
        <div class="left"></div>
        <div class="right"></div>
</div>
2.使用overflow:hidden清除浮动
  .box{ overflow: hidden;}  //overflow:auto也是可以的
   .left,.right{ width:100px; height: 100px; background:#388bff; float: left;}
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
3.使用空div
.clear{ clear:both; }
<div class=”clear”></div>