css样式笔记

1.opacity:0.2;filter:alpha(opacity=20);-moz-opacity:0.2

兼容性需要，IE8和早期的版本支持filter,其他的浏览器都支持opacity，-moz-opacity支持火狐早期版本

2.text-shadow

语法：text-shadow: h-shadow v-shadow blur color;

h-shadow v-shadow 水平和垂直位置，必须。

blur 模糊的距离，可选。

color阴影的颜色

3.z-index

数字越大越靠前。没有单位

4.border

语法：border:border-width  border-style   border-color

5.hover:悬浮事件

语法：$(selector).hover(inFunction,outFunction)

6.position位置

absolute：绝对定位，相对于第一个父级元素

fixed：生成绝对定位元素，相对于窗口。

relative：相对定位元素，相对于正常的位置进行定位。

static：默认值。

inherit：规定应该从父元素继承position值。

7.cellpadding和cellspacing区别：

cellspacing：单元格之间的间距；

cellpadding：单元格边距和单元格内容的距离；

8.固定表格布局

table{ table-layout:fixed;}

9.css超出一行显示省略号：

css:需要加上宽度，超出隐藏（overfloew:hidden），强制在同一行显示（white-space:nowrap），省略号（text-overflow:ellipsis）;

.textoverflow a {
    display:block;
    width:120px;
    margin: 0px 0px 0px 3px;
    white-space: nowrap;
    overflow: hidden;
    float: left;
    -o-text-overflow: ellipsis;     /* for Opera */
    text-overflow: ellipsis;        /* for IE */
}

10.让IE9以下的版本支持HTML5

     在项目中加入以下js代码:

  if (!+[1,]) {
    (function() {
    var tags = [
        'article', 'aside', 'details', 'figcaption',
        'figure', 'footer', 'header', 'hgroup',
        'menu', 'nav', 'section', 'summary',
        'time', 'mark', 'audio', 'video'],
        i = 0, len = tags.length;
    for (; i < len; i++) document.createElement(tags[i]);
    })();
}

或者：

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

11.css写法建议及优化：

    a.是从右往左匹配规则。

    b.嵌套代码不要超过3级（代码臃肿、复杂，css文件体积增大，影响渲染速度）。

    c.样式级别：！important>行内样式>id样式>class样式>标签名样式。（组合选择器权值会叠加）

    d.图片要设置width和height（目的是在网速差或者图片显示不出来时，给出默认图片，保证布局不乱）

12.边框样式高亮显示：

box-shadow:0 0 10px rgba(x,y,blur,spread,color);

例：box-shadow:0 0 7px 0px rgba(64,224,208,0.5);

第一个x：水平位置。（必选）

第二个y：垂直位置。（必选）

第三个blur：模糊的距离。（可选）模糊程度

第四个spread：阴影的尺寸。（可选）模糊尺寸

第五个color：阴影的颜色。（可选）

13.alt是当img在显示出错或者显示不出来时的提示文字。

14.分割线粗细调整：

<hr style="border-top:solid 0.1px #b8b8b8" >

15.a标签样式调整：

 a标签不支持高度和宽度的调整，其大小是内容撑大的。如果要调整需要添加display:block;

标签内的字体垂直居中：inline-height:xx px ;xx为标签的高度。