css基礎知識整理編

ある大神が整理した面接問題から

ケースモデル

標準ボックスモデル

  （content）+   （padding）+   （margin）+   （border）;

低バージョンIEボックスモデル

content   border padding    

CSSセレクタ

1、id     #myid
2、      .myClassName
3、       div,h1,p
4、       h1+p
5、      ul>li
6、       li a
7、        *
8、       a[rel = "external"]
9、       a:hover,li:nth-child

      ：font-size  font-family  color  ul  li  dl  dd  dt;
       ：border  padding  margin  wdith  height

CSS 3新規擬似クラス

p:first-of-type            P     p  
p:last-of-type              p     p  
p:only-of-type             p     p  
p:only-cild                  p  
p:nth-child(2)                    p  
:after           
:before           
:enabled             
:disabled    
:checked            

垂直方向中央揃え

https://segmentfault.com/a/11...

displayはどれらの値があります

block            
inline           
inline-block           ，              
list-item            ，         
table               
inherit            

position:relative/absolute

absolute:         ，      static           
fixed:         ，            
relative:         ，            
static:   ，    ，          ，  top,bottom,left,right,z-index   
inherit:        

CSS 3はどれらの新しい特性があります

https://segmentfault.com/a/11...

純粋なCSSで三角形を作成

#demo {
    width:0;
    height:0;
    border-width:20px;
    border-style:solid;
    border-color:transparent transparent red transparent;
}

フルスクリーンフォントレイアウト

html:



css:
#div {
    width:100%;
    height:50%;
}
#div2,#div3{
    width:50%;
    height:50%;
}
#div2{
    float:left;
}

Liとliの間の空白間隔

            （  、  ）   ，         ，           ，    ，      ，       0，      

CSSスタイルの初期化

          ，                  ，    CSS                    

visibility:collapse;

CSSの中のvisibilityの属性は1つのcollapseの属性の値があって何のために使いますか?ブラウザの下ではどんな違いがありますか?

      visibility      collapse  ，       ，     hidden    。
     ，       table     ，  table ，table group，table ，table column group，
      display: none  ，    ，           。   
       ，  collapse    hidden       ;
      、Opera IE11 ，  collapse        display:none;

positionとdisplay、margin collapse、overflow、floatなどの特性を重ね合わせるとどうなりますか?

positionとdisplayとfloatが重なる結果:

 display:none, position float     ；

display  none, position:absolute fixed   ，float      none, display      
inline-table ——> table
inline,run-in,table-row-group,table-column,table-column-group,table-eader-group,table-footer-group,table-row,table-cell,table-caption,inline-block ——> block
   ——>     

display  none,position  absolute fixed,
 float  none，     ， display          ；

 float none，      ：
       ，display          ，
    ，      

margin collapse

1.                       margin    。

    margin    :
1).       margin     :
  margin         ，    margin         margin  。   
2).       margin     :
  margin        ，           ，  ，  0   ，    。
3).       margin     ，   
    ，     margin         ，  ，   margin       margin   。
4).     margin        ，      

2.     、inline-block   、        margin               margin   

3.              ，          margin    

4.      margin-bottom   margin-top                

BFC

  BFC   ：
1、    ，float   none     ； 
2、      ，position（absolute，fixed）； 
3、display           inline-block，table-cell，table-captions； 
4、overflow    visible     （hidden，auto，scroll）

CSSの最適化、性能向上の方法はどれらがありますか?

1、         
2、    css  
3、    display  
4、     
5、   web  
6、      font-size
7、        id   
8、     h1~h6  
9、  0          
10、          
11、  CSS       ，           
12、       

ブラウザはどのようにCSSセレクタを解析しますか?右から左へ

ページで奇数と偶数のどちらのフォントを使うべきですか?どうしてですか。

       ，          

marginとpaddingはそれぞれどんなシーンに適していますか?

    margin:
   border       ；
         ；
              ，       。

    padding:
   border       ；
        ；
              ，          

手動でアニメーションを書く必要がある場合、最小時間間隔はどのくらいだと思いますか?なぜですか?

          60Hz， 1   60 ，          1/60＊1000ms ＝ 16.7ms

::beforeと:afterの二重コロンと単一コロンの違いは何ですか。この2つの偽元素の役割を説明します。

   (:)  CSS3  ，   (::)  CSS3   。