前端小技巧总结

盒子模型：

box-sizing:border-box; //启动盒子内减模式，使盒子维持大小不变
padding:内边距，出现的位置：盒子与内容边缘的位置。如果写四个值：表示上 下 左 右；三个值：上 左右 下；两个值：上下 左右；
margin：外边距,出现的位置：盒子外面的距离，拉开两个盒子之间的距离。与padding的设置方法完全相同

CSS初始化：

blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
	margin: 0;
	padding: 0;
}
文字垂直居中小方法：
	设置行高属性的值等于自身高度属性的值
标签左右居中：
	margin:0 auto;

显示隐藏：

display:none; //隐藏  不占位隐藏
display:block;//显示
visibility:hidden;//隐藏  占位隐藏

溢出：

overflow：
	hidden	隐藏，不管有多少，剩下的都不会显示
	auto	只要超出字数限制了才会显示出竖直滚动条
	scroll	显示水平竖直滚动条，并且无论是多少字，都会有，不常用
	visable	默认值，显示所有

浮动：

如果想让哪一行标签在一行，那么所有的标签就都得使用float 

定位：

position：
	relative	相对定位
		特点：
			1.改变位置的参照物时自己
			2.占位 脱离 标准流/文档流（）标签默认的显示方式
			3.还具备换行的特点
	
	absolute	绝对定位
		特点：
			1.不占位
			2.参照物默认是浏览器，改：以最近的已经定位的父级为参照物
			3.不具备换行的特点
	
	fixed		固定定位
		特点：
			1.不占位
			2.参照物时浏览器
			3.不具备换行的特点
定位的灵活运用：
	如果绝对定位的话，想让其居中但是不想使用margin：0 auto时，可以用left：50%;margin:长度的一半来;来使其固定在浏览器中间，高度与左右方法类似
		如：div{
				width: 800px;
				height: 400px;
				background-color: aqua;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -400px;
				margin-top:-200px;
			}
	

z-index:改变显示级别
opacity:0~1;改变其透明度，改变内容和其背景色
background：rgb(数值1，数值2，数值3，数值4);前三个数值决定颜色，最后一个决定透明度