前言
本文主要給大家總結(jié)了自己在日常網(wǎng)頁制作的時候遇到問題的一些解決技巧，分享出來供大家參考學(xué)習(xí)，下面話不多說了，感興趣的朋友們下面來一起看看詳細(xì)的介紹：
總結(jié)如下：
一、box-sizing：允許以特定的方式去定義匹配某個區(qū)域的特定元素。
content-box：在規(guī)定一個框的寬高之外給這個框加內(nèi)邊距和邊框。
border-box：（textarea和select默認(rèn)值）在規(guī)定的一個框的寬高之內(nèi)給這個框加內(nèi)邊距和邊框。
/*看個人習(xí)慣而用，但一般標(biāo)簽?zāi)J(rèn)屬性是content-box，除textarea,select*/ box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box;
二、美化input框
/*在IE10+瀏覽器中, 使用css即可隱藏input文本輸入框右側(cè)的叉號*/input[type=text]::-ms-clear,::-ms-reveal{display:none;}input::-ms-clear,::-ms-reveal{display:none;}input{ /*去除點(diǎn)擊出現(xiàn)輪廓顏色*/ outline: none; /*padding已在重置樣式中去除，如果沒有去除，記得有padding哦*/ }三、美化textarea文本域
textarea{ /*別忘了文本域的box-sizing屬性值是border-box;所有的邊框和padding都是在你固定的寬高的基礎(chǔ)上繪制*/ /*去除點(diǎn)擊出現(xiàn)輪廓顏色*/ outline: none; /*如果有需要，去掉右下角的可拉伸變大小的圖標(biāo)和功能*/ resize: none; /*padding已在重置樣式中去除，如果沒有去除，記得有padding哦*/}四、改變placeholder的字體顏色大小
input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: #333;} input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ font-size:14px; color: #333;} input::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size:14px; color: #333;} input:-ms-input-placeholder { /* Internet Explorer 10+ */ font-size:14px; color: #333;}五、美化select
/*清除ie的默認(rèn)選擇框樣式清除，隱藏下拉箭頭*/select::-ms-expand { display: none; }select { /*Chrome和Firefox里面的邊框是不一樣的，所以復(fù)寫了一下*/ border: solid 1px #333; /*將默認(rèn)的select選擇框樣式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在選擇框的最右側(cè)中間顯示小箭頭圖片*/ background: url("小箭頭圖片路徑") no-repeat right center transparent; /*為下拉小箭頭留出一點(diǎn)位置，避免被文字覆蓋*/ padding-right: 14px; /*去除點(diǎn)擊出現(xiàn)輪廓顏色*/ outline: none;}六、美化button按鈕
button{ /*本身有2px的邊框，一般的button都不需要邊框*/ border: none; /*本身有的背景色，可以用其他顏色取代*/ background: #333; /*padding已在重置樣式中去除，如果沒有去除，記得有padding哦*/}七、美化單選框、多選框或者是上傳文件按鈕
/*因?yàn)橛胕nput[type="radio"]和input[type="cheakbox"]都不能直接改變它們的樣式，這個時候要用到label標(biāo)簽關(guān)聯(lián)，然后隱藏input標(biāo)簽，直接給label標(biāo)簽樣式就好了。選中l(wèi)abel就是選中了此標(biāo)簽*/<label for="sex">男</label><input type="radio" id="sex" value="男" />
八、多出文字用省略號表示
white-space: nowrap; /* 強(qiáng)制不換行 */overflow:hidden; / *內(nèi)容超出寬度時隱藏超出部分的內(nèi)容 */ text-overflow:ellipsis;/* 當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記(...) ，需與overflow:hidden;一起使用。*/
九、css頁面點(diǎn)擊文字出現(xiàn)藍(lán)色底色去掉方法
-moz-user-select: none; /* 火狐 */-webkit-user-select: none; /* webkit瀏覽器 */-ms-user-select: none; /* IE10 */-khtml-user-select: none; /* 早期瀏覽器 */user-select: none;
十、在遇見圖標(biāo)的垂直位置很難調(diào)整的時候可以用這個屬性
vertical-align: 30%;vertical-align: middle;
十一、如何讓一個div在頁面中上下左右居中
div{ width:400px; height:300px; position:absolute; top:50%; left:50%; margin:-150px 0 0 -200px;}十二、js
// 在js中寫的返回鍵onclick = 'history.go(-1)';// 強(qiáng)制刷新頁面window.location.reload(true);
十三、換行，不換行，字間距
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網(wǎng)的支持
新聞熱點(diǎn)
疑難解答
圖片精選
