站长和前端，掌握一些页面制作技巧可以更高效的完成页面制作。

1、box-sizing：以特定的方式去定义匹配某个区域的特定元素

content-box：在规定一个框的宽高之外给这个框加内边距和边框。

border-box：（textarea和select默认值）在规定的一个框的宽高之内给这个框加内边距和边框。

两者区别，请参见米扑博客：CSS3 box-sizing 属性

/*看个人习惯而用，但一般标签默认属性是content-box，除textarea,select*/
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;

2、美化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哦*/
}

3、美化textarea文本域

textarea{
	/*别忘了文本域的box-sizing属性值是border-box;所有的边框和padding都是在你固定的宽高的基础上绘制*/
	/*去除点击出现轮廓颜色*/
	outline: none;
	/*如果有需要，去掉右下角的可拉伸变大小的图标和功能*/
	resize: none;
	/*padding已在重置样式中去除，如果没有去除，记得有padding哦*/
}

4、改变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;
}

5、美化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;
}

6、美化button按钮

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

7、美化单选框、多选框或者是上传文件按钮

/*因为用input[type="radio"]和input[type="cheakbox"]都不能直接改变它们的样式，
这个时候要用到label标签关联，然后隐藏input标签，直接给label标签样式就好了。
选中label就是选中了此标签*/
<label for="sex">男</label>
<input type="radio" id="sex" value="男" />

8、多出文字用省略号表示（推荐）

white-space: nowrap; /* 强制不换行 */
overflow:hidden; / *内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ，需与overflow:hidden;一起使用。*/

9、css页面点击文字出现蓝色底色去掉方法

-moz-user-select: none; /* 火狐 */
-webkit-user-select: none; /* webkit浏览器 */
-ms-user-select: none; /* IE10 */
-khtml-user-select: none; /* 早期浏览器 */
user-select: none;

10、在遇见图标的垂直位置很难调整的时候可以用这个属性​（推荐）

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

11、如何让一个div在页面中上下左右居中​（推荐）

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

这个笔者也有详细的文章介绍 《使用CSS绝对定位实现块状元素自适应居中》

12、js 返回和刷新

// 在js中写的返回键
onclick = 'history.go(-1)';
// 强制刷新页面
window.location.reload(true);

13、换行，不换行，字间距​（推荐）

参考推荐：

CSS3 box-sizing 属性