cssとcss 3エラストマーボックスモデルによる要素幅(高さ)適応

3622 ワード

css 3 html

一、css左側幅固定右側幅適応を実現
1、位置決め

2、フローティング

3、margin

二、css 3弾性ボックスモデルの適応を実現
1、上下高さ固定中間高さ適応




    
    
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            height: 100%;
        }
        #contain{
            display: flex;
            flex-direction: column;/*       */
            height: 100%;/*               html、body height：100%*/
        }
        #top{
           height: 200px;
            background: red;
        }
        #center {
            flex: 1;
            background: blue;
        }
        #bottom{
            height: 100px;
            background: green;
        }
    </style>



<div id="contain">
    <div id="top">  </div>
    <div id="center">  </div>
    <div id="bottom">   </div>
</div>

</code></pre>2、 
  <span style="color:#ff0000;"><span style="color:rgb(255,0,0);">          </span>   </span> 
  <br/> 
  <pre><code>


    <meta charset="UTF-8"/>
    <title/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #contain {
            display: flex; /*        */
        }

        #left {
            width: 100px;
            height: 200px;
            background: #fff8a8;
            margin-right: 10px;
        }

        #right {
            flex: 1; /*    /  */
            height: 200px;
            background: #ff9bad;
        }
    </style>


<div id="contain">
    <div id="left"/>
    <div id="right"/>
</div>

</code></pre> 
  <br/> 
  <p><span style="color:#ff0000;"><br/></span></p> 
 </div> 
</div>
                            </div>
                        </div>

jQueryアニメーション効果(表示と非表示)([スライド](Slide))(フェードアウト)

JS、CSSロードにおける小さな問題の検討