日常总结 -- html + css 篇

1. 鼠标箭头变成小手样式;  <div style="cursor:pointer;"></div>

2. DIV的高度固定，当超出固定高度时，出现自动滚动条; 

style { width:980px; height:100px; line-height:100px; overflow:auto; overflow-x:hidden; }

3. html点击子元素事件而不触发父元素的点击事件; e.stopPropagation();

4. 设置table中的宽度不随文字改变让其固定;  width:100px;height:25px;

word-wrap: break-word;自动换行;

overflow:hidden; white-space:nowrap; text-overflow:ellipsis;超出内容设为隐藏,并且用省略号代替;

overflow-x:hidden; overflow-y:hidden; 超过宽度和高度文字会自动隐藏 ;

5. css网格背景; 参考:https://www.jianshu.com/p/88c24110e88e

height: 300px; width: 300px; background:#58a; background-image: linear-gradient(white 2px,transparent 0), linear-gradient(90deg, white 2px,transparent 0), linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0), linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0); background-size:75px 75px,75px 75px,15px 15px,15px 15px;

6. css3 box-shadow阴影; 参考: https://www.cnblogs.com/wuchuanlong/p/5980766.html

box-shadow:-10px 0px 10px red,   /*左边阴影*/ 
                    0px -10px 10px #000,  /*上边阴影*/ 
                    10px 0px 10px green,  /*右边阴影*/ 
                     0px 10px 10px blue;" /*下边阴影*/ 

外阴影: box-shadow: 0 0 10px #f00;

内阴影: box-shadow: 0px 0px 10px red inset;

7. 网页整体缩放; transform: scale(0.8);

8. 删除div里的内容(将div的innerHTML置为空): 

   假设有如下的html片段：

<div id="test">这是要删除的内容，还要保留test本身</div>

    1. 原生js方式: 

document.getElementById('test').innerHTML = '';

    2. jQuery方式: 

$('#test').empty();    //jQuery方法一

$('#test').html('');   //jQuery方法二