css学習ノート

.clearfix:after 
	{content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /*        BFC BFC      ,BFC      */
}
.clearfix:after {
 clear:both;
}

</code></pre> 
  <h3>vertical-align</h3> 
  <ul> 
   <li> img vertical-align:middle | top  。           </li> 
   <li> img    display：block;                </li> 
  </ul> 
  <h3>word-break</h3> 
  <ul> 
   <li>normal             </li> 
   <li>break-all         </li> 
   <li>keep-all               </li> 
  </ul> 
  <h3>white-space</h3> 
  <ul> 
   <li>normal : 　      </li> 
   <li>nowrap : 　             ，          br       。</li> 
  </ul> 
  <h3>text-overflow</h3> 
  <ul> 
   <li>clip : 　       （…），       </li> 
   <li>ellipsis : 　               （…）</li> 
  </ul> 
  <p><strong>   <code>...</code>          </strong></p> 
  <pre><code>white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
</code></pre> 
  <h2>   </h2> 
  <p>        </p> 
  <p>       box,      ,   <code>repeat-x</code></p> 
  <h2>    </h2> 
  <ol> 
   <li> <p>  </p> <pre><code>@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
</code></pre> </li> 
   <li> <p>   </p> <pre><code>span {
		font-family: "icomoon";
	}
</code></pre> </li> 
   <li> <p>   </p> <pre><code>span::before {
		 content: "\e900";
	}
    
<span></span>  
</code></pre> </li> 
  </ol> 
  <h2>HTML5</h2> 
  <pre><code><header>    :           </header>
<nav>     :      </nav> 
<footer>   :           </footer>
<article>   :      </article>
<section>   ：     </section>
<aside>   ：                </aside>
</code></pre> 
  <h2>  </h2> 
  <p><code>div:first-letter</code></p> 
  <h2>   </h2> 
  <p><code>div::after</code></p> 
  <h2>   </h2> 
  <p>background-image          .     ,          ,  <code>background-color</code>      (   )</p> 
  <pre><code><span class="token url">url(test1.jpg)</span> no-repeat scroll 10px 20px/70px 90px,<span class="token url">url(test1.jpg)</span> no-repeat scroll 10px 20px/110px 130px c #aaa<span class="token punctuation">;</span>
</code></pre> 
  <h2>transition</h2> 
  <p><code>transition: width 0.6s ease 0s, height 0.3s ease 1s;</code></p> 
  <p>     css     ，                 ，        ,        .</p> 
  <h2>transform</h2> 
  <p>  ,     ,  </p> 
  <pre><code>transform: translate(100px, -50%); //        
transform: translateX(100px);
transform: translateY(100px);
transform: scale(0.8, 1); //         80%      
transform: scale(1, 0.8); //         80%      
transform: scale(0.8); //     0.8
transform: rotate(360deg); 
transform-origin: 10px 10px;transform: rotate(45deg)  //        x  10  y  10，        45  */ 
transform:skew(30deg,0deg);
</code></pre> 
  <h2>flex  </h2> 
  <pre><code>	section {
		width: 80%;
		height: 150px;
		/*background-color: pink;*/
		margin: 100px auto;
		display: flex;    /*         */
		flex-direction: column;  /*    */
	}
	section div {	
		height: 100%;
		flex: 1;   /*      */
	}
	section div:nth-child(1) {
		background-color: pink;
		flex:  2;
	}
</code></pre> 
  <h3>BFC</h3> 
  <p>BFC    /  /   margin/   padding/   border     BFC</p> 
  <h4>  BFC  </h4> 
  <ol> 
   <li> <p>block/table/list-item</p> </li> 
   <li> 
    <ul> 
     <li> <p>float    none</p> </li> 
     <li> <p>position absolute fixed</p> </li> 
     <li> <p>display inline-block, table-cell, table-caption, flex, inline-flex</p> </li> 
     <li> <p>overflow  visible。</p> </li> 
    </ul> </li> 
  </ol> 
  <h4>BFC  </h4> 
  <p>BFC BFC      .</p> 
  <h4>BFC  </h4> 
  <ol> 
   <li> <p>   </p> <p>        BFC            ，               overflow: hidden  </p> </li> 
   <li> <p>         </p> <p>     BFC        margin     ，            BFC，     margin   </p> </li> 
   <li> <p>BFC      .</p> <p>[        ,          ,             (img-1KAN2JFA-1570017852103)(css.assets/    20190915190010.jpg)]</p> </li> 
  </ol> 
  <h2>  </h2> 
  <h3>      </h3> 
  <p><code>vertical-align: middle;</code> + <code>margin-top: 10px;</code>       ,           </p> 
  <pre><code>	span {
		display: inline-block;
		vertical-align: middle;
		width: 10px;
		height: 10px;
		background-color: pink;
	/*	margin-top: 10px;*/
	}
	
    <div>
		<span/>    
	</div>
</code></pre> 
  <h3>            </h3> 
  <pre><code>	div {
		position: absolute;
		width: 200px;
		height: 200px;
		background-color: pink;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/*translate   x -50%       ，           */
		/*translate   y -50%       ，           */
	}
</code></pre> 
  <p>pink;<br/> /* margin-top: 10px;*/<br/> }</p> 
  <pre><code><div>
	<span/>    
</div>
</code></pre> 
  <pre><code>
###             

</code></pre> 
  <pre><code>div {
	position: absolute;
	width: 200px;
	height: 200px;
	background-color: pink;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*translate   x -50%       ，           */
	/*translate   y -50%       ，           */
}
</code></pre> 
 </div> 
</div>
                            </div>
                        </div>