1.cssスタイルの読み込み優先度とjsの動的な変更スタイル

	
	
	


	

		

			cssスタイルの み み  、   
		
		
          
		  
	
	
		function test(){
			var txt=document.getElementById("pTxt");
			console.log(txt.innerHTML);
			txt.style.cssText="color:red;"
		}
	

以上のaラベルの中の文字の色はyellowです.aラベルの中でstyleスタイルを取り除いたら、aラベルのフォントの色は〓185です.
これにより、cssスタイルのロード優先度:行の中のスタイル>id>クラス>要素>共通*
2.固比固形形実現、以下はhtmlコードレイアウトです.

		
  200px
		
     
		
  200px
	

1)私の仕事で一番よく使われているのです.flexレイアウトを一番簡単に利用するべきです.2)時に絶対位置決めの方式を採用しました.3)表の属性を採用し、cssのcall c()メソッドを使用します.この方法に慣れない人は自分で拡張してもいいですよ.

/*          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)テーブル・セル

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