前端开发易忘内容收录

1.滚动滚动时，想让某一个区域保持位置不变，不随着滚动条的滚动发生变化，只需要给该区域追加position：fixed

2.需要某个块级区域自动居中的话，只需要将该区域的宽度设置一下，然后添加 margin-left:auto,margin-right:auto;不可追加float属性。或者直接将该区域放在<center>标签中。

注：html5不支持center，但是主流浏览器都支持html4.01和之前的标准，因此center还是可以在适当的时机使用的，同样放在center标签中的元素一样不可追加float属性。

3.对于不同的浏览器，css样式往往是有区别，可以用css hack来处理

#demo
{   
    background-color:blue;      /*firefox*/
    background-color:red9;      /*all ie*/
    background-color:yellow;    /*ie8*/
    +background-color:pink;        /*ie7*/
    _background-color:orange;       /*ie6*/
}
:root #test { background-color:purple9; }  /*ie9*/
@media all and (min-0px){ #test {background-color:black;} }  /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  /*chrome and safari*/

/*记住以上css hack 即可处理大部分的css不兼容的问题*/
/*最好不要改变样式的顺序*/
/* 另外还有一些样式可以被多中浏览器识别 */

#demo
{
　　*background-color:blue; /*ie7、ie6*/
}

4.important关键字具有很高的优先级，同时important关键字被很几乎所有浏览器支持(ie6也部分支持)，因此可以在界面设计过程中适当的使用 !important能够省去很多麻烦。

5.某些浏览器默认情况下给整个窗体加上了滚动条，比如ie7，要想去掉滚动条，只需要加上

html, body {
    overflow: hidden;/*前提是不要滚动条*/
}

6.想让div固定某一个宽度，高度随浏览器自动变化，可以设置

.div
{
    width: 120px; 
    height: 100%; /*高度自动变化*/
    position: absolute;/*这个属性不可少*/
}

7.想让文字超长后显示省略号

.testTD
{
    float:left;/*这个属性不可少;否则会将td的宽度撑开*/
    width:300px;
    /*下面这两句是实现省略号的.上边的两句也不可少 */  
    overflow:hidden;
    text-overflow:ellipsis;       
}

8.文字换行

p
{
    word-break:    break-all; // 在单词的任何位置都可以换行
    /*normal     使用浏览器默认的换行规则。
    break-all    允许在单词内换行。
    keep-all     只能在半角空格或连字符处换行。
    word-break只是定义文字换行的规则，想让文字不换行不需要word-break属性
    */
}

想让文字强制不换行需要添加white-space:nowrap;

white-space的其它属性值，

pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

pre-wrap：保留空白符序列，但是正常地进行换行。

pre-line：合并空白符序列，但是保留换行符。

9.限制文本框(input type="text")仅能输入整数

添加样式

input
{
    ime-mode:disabled;/*关闭本地输入法*/
}

给input绑定事件

<input type="text" onkeypress="return event.keyCode>=48&&event.keyCode<=57" onpaste="return !clipboardData.getData('text').match(/D/)"/>

其中onkeypress是限制输入，onpaste是限制粘贴非法数据，不过是IE才能使用的，其它浏览器最好找替代的事件。

10.想设置元素样式的过度变化效果，可以设置transition属性

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

11.对于opacity在ie8和之前的版本中不支持的情况，可以使用css：

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);

而大多数浏览器现如今支持的是：

opacity:0.3;