前端知识点小总结

1.css样式加载优先级 以及js动态修改样式

	
	
	


	

		

			
				css样式加载顺序、优先级
			
		
		
点击按钮更改字体样式
		点击
	
	

以上a标签中文字颜色为yellow；若将a标签中style样式去除后a标签的字体颜色为#185；

由此可看出css样式加载优先级：行内样式>id>类>元素>通用*

2.固比固样式实现，以下是html代码布局

		
左宽200px
		
中间自适应
		
右宽200px
	

1）是我工作中最常用的，也应该是最简单的 利用flex布局；2）时采用了绝对定位的方式；3）采用了表格的属性，并且使用css中的calc()方法。对于此方法陌生的可以自己扩展一下哦

/*第一种也是最常用的 flex布局
		.wrap{
			width: 100%;
			height:50px;
			display:flex;
		}
		.left,.right{
			float:left;
			width:200px;
			height:100%;
			background-color:#090;
		}
		.center{
			float:left;
			flex:1;
			background-color: #185;
		}*/
		/*第二种绝对定位
		.wrap{
			width: 100%;
			height:50px;
			position: relative;
		}
		.left,.right{
			position: absolute;
			top: 0;
			height: 100%;
			width: 200px;
			background-color: #090;
		}
		.left{
			left: 0;
		}
		.right{
			right: 0;
		}
		.center{
			width: 100%;
			height: 100%;
			padding:0 200px;
			box-sizing: border-box;
			background-color: #182;
		}*/
		/*第三种 表格样式*/
		.wrap{
			width: 100%;
			height:50px;
			display: table;
		}
		.left,.right{
			width: 200px;
		    height: 100%;
		    background-color: #B1D5EF;
		    display: table-cell;
		}
		.center{
			width: calc(100% - 200px);
		    width: -webkit-calc(100% - 50px);
		    height: 100%;
		    background-color: #268BD2;
		    display: table-cell;
		}

3.元素垂直水平居中

第一种比较符合不确定父级元素宽高时

2）当父级有固定宽高时

.wrap{
			width: 500px;
			height: 500px;
			background-color: #268BD2;
			position: relative;
		}
		.container{
			width: 200px;
			height: 200px;
			background-color: #185;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -100px;
			margin-left: -100px;
		}

3)flex 布局

.wrap{
			display: flex;
			width: 500px;
			height: 500px;
    		background-color: #268BD2;
    		justify-content: center;
    		align-items:  center;
		}
		.container{
			width: 200px;
			height: 200px;
			background-color: #185;
		}

4）table-cell

.wrap{
			width: 500px;
			height: 500px;
			display: table-cell;
			vertical-align: middle;
    		background-color: #268BD2;
		}
		.container{
			width: 200px;
			height: 200px;
			background-color: #185;
			margin: auto;
		}