CSS/JS实用技术总结！

实用技术总结！

1.考虑到html在设计时的后续扩展问题，通常情况下需提前确定好body的基础参数
	举例如下：
	body,body *{//此处有空格
	margin:0;
	padding:0;
	box-sizing:border-box;
	font:14px/1.2 arial,"MicrosoftYahei";
	}
2.确保字体在盒子里垂直水平居中
	width：20px;
	height:20px;
	text-align:center;//水平居中
	line-height:20px;//垂直居中（注意高度设置必须与height相同）
3.父盒子设计成动态盒子后，所有子元素均变为块级元素
4.在子盒子中使用绝对定位时，一定要确保父盒子要相对定位
5.文字省略
	（1）文字单行省略三步骤
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
	（2）文字多行省略设置
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:n;//此处n为任意整数，控制文字在几行后省略
	-webkit-box-orient:vertical; 
6.子代选择器、后代选择器以及并集选择器的使用
<div class="grandFather">
	<div class="father">
		<div class="son"></div>
	</div>
</div>
	（1）子代选择器
	.grandFather>.fater{...}
	.father>.son{...}
	（2）后代选择器
	.grandFather son{...}//空格是后代选择器，控制一切使用了son选择器的后代
	（3）并集选择器
	.grandFather,.father,.son{...}//包含的共性元素可以放在一起，中间以逗号隔开
7.定位的使用
（1）定位不推荐大面积使用，防止使用不慎破坏页面布局
（2）在局部小布局中需设置个别对象的位置时，可以采用定位处理
（3）四种定位方式的操作细节
	1）static:	标准文档流		不发生偏移		不包含z轴
	2）relative:标准文档流		产生偏移			包含z轴
								参考自身原本位置
	3）absolute:非标准文档流		产生偏移			包含z轴
								参考其父辈定位元素否则参考body	
	4）fixed:	非标准文档流		产生偏移			包含z轴
								只参考浏览器窗口，不参考其他任何元素
8.结构伪类
（1）前置伪类：selector：：before{...}
（2）后置伪类：selector：：after{...}
注：无论content是否有内容，before和after中必须包含content（“”）;
9.筛选选择器
	.myjd>a:nth-of-type(odd){...}//odd表示仅控制myjd下奇数位的a标签
10.其他
（1）cursor:pointer;//将箭头变为手型图标
（2）transition:0.5s ease;//延迟显示
（3）垂直渐变线
	width:1px;
	background:linear-gradient(to bottom,#fff,#eee,#fff);//确认渐变方向，以及渐变颜色
	水平渐变线
	height:1px;
	background:linear-gradient(to right,#fff,#eee,#fff);
（4）透明
	color:transparent//使用后文本颜色不可见
	opacity:0~1;//背景颜色透明化，1为全透明