css书写规范及特殊样式

1.CSS书写顺序：

（1）位置：position、top、right、z-index、display、float

（2）大小：width、height、padding、margin

（3）文字系列：font、line-height、letter-space、color、text-align

（4）背景：background、border

（5）其他：animate、transition

2.一些特殊字体样式：

首行缩进2字符：{text-indent:2em;}

水平居中：{text-align:center;}

两端对齐：{text-align:justify;}

垂直居中：{vertical-align: middle;}

字间距2字符：{letter-spacing:2em;}

行间距2倍：{line-height:2;}

首字母大写及变色p:first-letter{font-size:4em;color:blue;}

   3.表格内容过长自动截取、自动换行：

  （1）表格宽度固定，内容超过自动换行

table-layout:fixed;word-break:break-all;

  （2）表格宽度固定，超过时自动截取

table-layout:fixed;word-wrap:break-word;

    4.导航栏固定在页面某处（相对于<body>）：

{position:fixed;left:  px;top:  px;}

 5.块级元素与行内元素:

     常见的块级元素：<div>、<ul>、<ol>、<li>、<dl>、<dt>、<h1>~<h6>、<p>

常见的行内元素：<img>、<input>、<select>、<strong>、<span>

     行内元素若要与块级元素在一行，需要给行内元素外加上div，免得块级元素占行内元素空间导致页面混乱。

块级元素内部不能包含其他块级元素。

块级元素与行内元素可通过{display:inline;}与{dispay:block;}进行转换。

6.少数html元素的margin和padding默认值不为0:

    <body>、<p>、<ul>、<li>

    7.css样式优先级概括：

    （1）由高到低：内联样式(直接写在html元素内的样式：style="")>id选择器>class选择器>元素；

（2）引入的css样式高于写在html内的样式（<style type="text/css">）；

（3）组合样式优于继承样式。

（4）权值相同时，标有important的优先级高。

（5）权值比较不能盲目的计算，如10个id权值似乎与1个style权值相等，实则不然。style、id、class、元素是16进制，即相互间的进位为256位，所以1个style优先级远远高于10个id。

     8.减少页面加载时间的常用方法：

    （1）尽量不用后代选择器和子选择器。

#id ul li.class{  } 后代选择器；

#id>.class{  }子选择器。

css运行是从右向左的，如后代选择器，运行时先找到.class,再依次找到li、ul、#id，写的层级越多执行速度越慢，但这种方式覆盖性更强，迫不得已时可用。

（2）雪碧图：减少图片加载次数。（稍后有详尽介绍）

（3）图片设定height和width值，免去浏览器加载时边加载边计算。

（4）使用gulp，压缩代码及图片。

    9.display:table-cell(以表格样式展示)不能与float:left;及position：absolute一起使用。

   10.隐藏滚动条

::-webkit-scrollbar {
    height: 0;
    width: 0;
}