css網頁製作中簡單實用的一些小技巧

這篇文章主要給大家分享了一些在網頁製作的時候，可以拿起就用的小技巧，文中通過範例程式碼介紹的非常詳細，對大傢具有一定的參考學習價值，需要的朋友可以參考借鑒

總結如下：

一、box-sizing：允許以特定的方式去定義匹配某個地區的特定元素。

content-box：在規定一個框的寬高之外給這個框加內邊距和邊框。

border-box：（textarea和select預設值）在規定的一個框的寬高之內給這個框加內邊距和邊框。

/*看個人習慣而用，但一般標籤預設屬性是content-box，除textarea,select*/   box-sizing: content-box;   -moz-box-sizing: content-box;    -webkit-box-sizing: content-box;

二、美化input框

/*在IE10+瀏覽器中, 使用css即可隱藏input文本輸入框右側的叉號*/input[type=text]::-ms-clear,::-ms-reveal{display:none;}input::-ms-clear,::-ms-reveal{display:none;}input{  /*去除點擊出現輪廓顏色*/  outline: none;  /*padding已在重設樣式中去除，如果沒有去除，記得有padding哦*/    }

三、美化textarea文本域

textarea{    /*別忘了文本域的box-sizing屬性值是border-box;所有的邊框和padding都是在你固定的寬高的基礎上繪製*/     /*去除點擊出現輪廓顏色*/      outline: none;          /*如果有需要，去掉右下角的可展開變大小的表徵圖和功能*/      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的預設選擇框樣式清除，隱藏下拉式箭頭*/select::-ms-expand { display: none; }select {  /*Chrome和Firefox裡面的邊框是不一樣的，所以複寫了一下*/  border: solid 1px #333;  /*將預設的select選擇框樣式清除*/  appearance:none;  -moz-appearance:none;  -webkit-appearance:none;  /*在選擇框的最右側中間顯示小箭頭圖片*/  background: url("小箭頭圖片路徑") no-repeat right center transparent;  /*為下拉小箭頭留出一點位置，避免被文字覆蓋*/  padding-right: 14px;  /*去除點擊出現輪廓顏色*/  outline: none;}

六、美化button按鈕

button{    /*本身有2px的邊框，一般的button都不需要邊框*/    border: none;    /*本身有的背景色，可以用其他顏色取代*/    background: #333;    /*padding已在重設樣式中去除，如果沒有去除，記得有padding哦*/}

七、美化單選框、多選框或者是上傳檔案按鈕

/*因為用input[type="radio"]和input[type="cheakbox"]都不能直接改變它們的樣式，這個時候要用到label標籤關聯，然後隱藏input標籤，直接給label標籤樣式就好了。選中label就是選中了此標籤*/<label for="sex">男</label><input type="radio" id="sex" value="男" />

八、多出文字用省略符號表示

white-space: nowrap; /* 強制不換行 */overflow:hidden; / *內容超出寬度時隱藏超出部分的內容 */ text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ，需與overflow:hidden;一起使用。*/

九、css頁面點擊文字出現藍色底色去掉方法

-moz-user-select: none; /* Firefox */-webkit-user-select: none; /* webkit瀏覽器 */-ms-user-select: none; /* IE10 */-khtml-user-select: none; /* 早期瀏覽器 */user-select: none;

十、在遇見表徵圖的垂直位置很難調整的時候可以用這個屬性

vertical-align: 30%;vertical-align: middle;

十一、如何讓一個p在頁面中上下左右置中

p{    width:400px;    height:300px;    position:absolute;    top:50%;    left:50%;    margin:-150px 0 0 -200px;}

十二、js

// 在js中寫的返回鍵onclick = 'history.go(-1)';// 強制重新整理頁面window.location.reload(true);

十三、換行，不換行，字間距

總結