標籤:瞭解 pre ima opera border 第一個 img web bottom
一、去掉input點擊時的藍色邊框
outline:none;
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
二、禁止文本選中
-webkit-touch-callout: none; /* iOS Safari */-webkit-user-select: none; /* Chrome/Safari/Opera */-khtml-user-select: none; /* Konqueror */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* Internet Explorer/Edge *//*說明:該屬性不加首碼不支援目前所有瀏覽器*/user-select: none; /* Non-prefixed version, currently not supported by any browser */
注意:
在 IE < 10 和Opera < 15中我們需要在需要禁止選中的元素上面添加一個屬性
unselectable="on",否則可能不會生效哦~不過現代瀏覽器如果不是非得相容一些老的瀏覽器也可以不加。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
三、CSS首碼
- Trident核心:首碼為
-ms
- Gecko核心:首碼為
-moz
- Presto核心:首碼為
-o
- Webkit核心:首碼為
-webkit
以上為四大主流核心。
Konqueror核心:首碼為-khtml- 註: 該核心並不主流,有興趣的可以百度做瞭解。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
四、textarea(文本域)禁止拖拽(禁止改變大小)
有兩種方式:
1)禁止右下的拖拽按鈕。(推薦這樣)
resize: none;
2)固定大小。(但是右下角的按鈕還是有,只是拖拽不會改變大小)
width: 350px;height: 150px;max-width: 350px;max-height: 150px;
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
五、區塊層級元素背景圖(background-img)展開填充整個元素。
background: url("Your Image URL"); background-repeat: no-repeat; background-size:100% 100%;
background-size處理auto contain cover常規值 還可以填寫百分比或者尺寸。第一個值為背景圖寬 第二個為背景圖高。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
六、背景圖超長不破壞原圖比例置中對齊。
background-repeat: no-repeat;background-position: center;
background-position設定背景圖對齊,可以設兩個值,第一個x軸 第二個y軸。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
七、absolute元素置中(水平,垂直置中)
方法一
margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
適用未知尺寸元素。
方法二
position:absolute;width:200px;height:400px;left:50%;top:50%;margin-left:-100px; /*設定為寬度的一半*/margin-top:-200px; /*設定為高度的一半*/
適用已知尺寸元素
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
八、給table中的thead和tbody加邊框。
thead和tbodytbody就這麼加border是不起作用的,一般的做法都是給thead和tbody裡面的tr的td加邊框,顯然這不是個好解決方案。
table { border-collapse: collapse;}/*把table標籤的border-collapse樣式設定一下,就可以給thead設定邊框樣式了。*/
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
九、js提起漢字(也可以提取數字,替換正則就行)
var str="怎樣從一個Html頁面中提取所有漢字呢?不能有其它Html代碼。"; alert(str.replace(/[^\u4e00-\u9fa5]/gi,""));
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
十、被忽略的一組標籤——群組方塊
<fieldset> <legend>組標題</legend> <!--內容--></fieldset>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
html+css常用小筆記(持續更新)