基礎知識1-ページレイアウト

9580 ワード

ページレイアウト
标题:高さが既知であると仮定し、左欄右欄幅300 px、中間適応の3欄レイアウトを書いてください.答え:7つの方法1.フローティング2.絶対位置3.flex 4.table-cell 5.grid(グリッドレイアウト)6.聖杯レイアウト7.ダブルフラップレイアウト.

共通スタイル

  *{
      margin:0;padding: 0;
  }
  .container{
      margin-top: 20px;
  }
  article > div {
      min-height: 100px;
  }
  .left,.right{
      background: red;
      width: 300px;
  }
  .center{
      background: #ccc;
  }

フローティング

ぜったいいち



    
                
        absolute  
        
            absolute  
          
        absolute

flexレイアウト

table-cellレイアウト

    

    
    
        table    
        table

gridレイアウト

聖杯レイアウト

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

メリットとデメリット

フローティングレイアウト1.センターは一番下にしか置けませんが、ドキュメントのレンダリング方法は上から下にあります.通常、センターの内容が最も重要で、一番上に置くべきなので、聖杯レイアウトと翼レイアウトがあります.2.フローティングは周囲の要素に影響し、ドキュメントフローから離れ、フローティング要素と周辺要素の関係をうまく処理します.3.不定高リストのフローティングはサポートされていません.4.互換性が良い

絶対位置決め1.ドキュメントフローから離れ、サブエレメントもドキュメントフローから離れ、適用性が低い.速い

flex css 3属性、移動端多用

table 1.1つのセルの高さが超えると、両側のセルも高くなり、必要ない場合があります.レンダリングするには、ページのロードが完了するまで待たなければなりません.表

に適用

gridコード量が少なく、新技術

聖杯レイアウト幅が小さすぎて

変形

両翼レイアウトIE 6+互換性

高さを除いて、flexとtableは

で使用できます.
意味化、全編divしないで
ページレイアウトの理解を深める
cssの基礎はしっかりしなければならない
思考が柔軟で積極的に向上する(新技術は注目しなければならない)
コード書き込み仕様
どのように1つの不定幅の高さのDIVを譲って、垂直に水平に中央になりますか?

css 3 transformメソッド

div

flexメソッド

div

table-cellメソッド


    
    table-cell      div

11.埋め込み式PHP

linuxプロセス---execファミリー関数(execl,execlp,execle,execv,execvp,execvpe)