先端学習ノート_css一般レイアウト(1)

列レイアウト-幅を指定

名前の通り幅を決めるのは固定の幅を使ってレイアウトし、中央に直接margin:0 autoしたいと思っています.単純で直接的

css代码如下：

.wrap{
      width: 960px;
      margin:0 auto;
 }

等分レイアウト

html構造を見てみましょう.

    

        
1
    
    

        
2
    
    

        
3
    
    

        
4
    

各itemのpadding-left値が20 pxの場合、一番左に20 pxが多く出てくるので、以下のように設定します.

.parent{
     margin-left: -20px;
 }

.parent > .item{
     padding-left:20px;
     width: 25%;
     height: 300px;
     float: left;
     box-sizing: border-box;
 }
 .item > div{
      height:100%;
 }

またはflexレイアウトを直接使用します.

.parent{
     display: flex; 
 }

 .parent > .item{
     flex:1;
     height: 300px;
 }

 .item + .item{
     margin-left: 20px;
  }

 .item > div{
     height:100%;
 }

tableレイアウトを使用するには、html構造にparentに親要素を追加するだけです.

...

cssの設定は次のとおりです.

.parent-fix{
    margin-left:-20px;
 }

 .parent{
   display: table;
   width: 100%;
 }

 .parent > .item{
    display: table-cell;
    padding-left:20px;
    height: 300px;
 }

 .item > div{
    height:100%;
 }

以上の3つの方式はいずれも等分の効果を実現することができ,同様にブラウザの幅が変化するにつれて変化する.

とうこうはいち

幅が同じで、一方のheightが変化し、他方も変化します.html構造は以下の通りです.

    

        hello 

        hello 

    

    

        hello 

        hello 

        hello 

    

1つ目の方法は次のとおりです.

.parent{
     overflow: hidden;
 }

 .left, .right{
     padding-bottom:9999px;
     margin-bottom: -9999px;
 }

 .left{
     float: left;
     background: deeppink;
     width: 100px;
     margin-right: 20px;
 }

 .right{
     overflow: hidden;
     background: pink;
 }

同様にflexを使用してレイアウトすることもできます.

.parent{
     display: flex;
 }

 .left{
     background: deeppink;
     width: 100px;
     margin-right: 20px;
 }

 .right{
     flex:1;
     background: pink;
 }

tableレイアウトも使用できます.

.parent{
     display: table;
     width: 100%;
     table-layout: fixed;
 }

 .left, .right{
     display: table-cell;
 }

 .left{
     background: deeppink;
     width: 100px;
 }

 .right{
     background: pink;
 }

以上の方法はいずれも等高効果を実現でき,flexはIE 10以下ではサポートされていないので,状況に応じて適切なレイアウトを選択する.

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

上下の幅の適応を実現し、中間のleftは幅を定めてrightは適応し、以下はhtml構造である.

    
top
    
left
    

        
test
    
    
bt

位置決めを使用して、次のような効果を実現します.

html,body, .parent{
        height: 100%;
        overflow: hidden;
    }

    .top,.bt{
        position: absolute;
        left:0;
        width:100%;
        height: 100px;
        background: pink;

    }

    .top{           
        top:0;
    }

    .bt{
        bottom:0;
    }

    .lt{
        position: absolute;
        width: 200px;
        top:100px;
        bottom:100px;
        background: deeppink;
    }
    
    .rt{
        position: absolute;
        left:200px;
        top:100px;
        bottom: 100px;
        right:0;
        overflow: auto;
    }

    .rt .inner{
        min-height: 1000px;
    }

この方式は唯一ではないので、必要に応じて異なるレイアウトを書けばいいです.