CSSのあれらの事3-簡単な配置、面接は必ず必要です

1.はじめに

cssレイアウトはフロントエンド面接で最もよく見られる問題であり、ここではその中で最もよく見られる4つの展示コードと効果についてのみ説明します.

2.やる

2.1単欄レイアウト

名前のように、すべてのブロックレベル要素がページに1つの順序で単列に表示される

すなわちheader,main,footerはcontentに統一的に包まれ、htmlページに単列が表示される:

|HTMLファイル|

  
  
  


  

     
header
     
main
     
foot
  

|CSSファイル|

#content{
  margin: 0 auto;
  margin-bottom:20px;
}
.header{
  height:50px;
  background:red;
  
}
.main{
  height:500px;
  background:blue;
}

.foot{
  height:100px;
  background:yellow;
  
}

効果:詳細はリンクを参照

2.2三列レイアウト

両側の2列の固定幅、中間列の適応幅私は枠を加えたついでにoverflowを通じて浮動問題|html|

を解決した.

  
  
  


 

  
    
  left
    
  right
    
  main
  

|CSS構成|

#layout{
  height:400px;
}
.left{
  width:100px;
  float:left;
  background:green;
  
}
.right{
  width:200px;
  float:right;
  background:yellow;
}
.main{
  margin-left: 100px; 
  margin-right: 200px;
  background:pink;
}

効果:詳細はリンクを参照

2.3聖杯レイアウト

  
  
  
  
  


  



  

    
main
    
aside
    
extra
  

効果の詳細はページを参照

2.4ダブルフラップレイアウト

  
  
  
  



  
  

    

      
main
    
    
aside
    
extra
  

効果の詳細はページを参照