css基础自适应布局

基础布局没有用到浮动特性和弹性盒模型以及百分比

一.说明

两列布局和三列布局用到的原理都是一样的。

二.实例
1.利用子元素盒模型width100%,有margin值后宽度=父-margin

        <div class="box">
             <div class="son1">
                  
             </div>
             <div class="son2">
                111111111111111111111111
                111111111111111111111111
                111111111111111111111111
                111111111111111111111111
                111111111111111111111111
                111111111111111111111111
                111111111111111111111111
                111111111111111111111111
             </div>
        </div>

            .box{
                width: 900px;
                height: 300px;
                border: 1px solid black;
                margin: auto;
                position: relative;
            }
            .box>div{
                height: 100%;
            }
            .son1{
                width: 200px;
                background: black;
                position: absolute;
                left: 0px;
                top: 0px;
            }
            .son2{
                margin-left: 200px;
                
            }

2.利用子元素盒模型width100%,有padding值后内容区域宽度=子-padding变为自适应
//缺点是再给自适应box设置的padding值要减去左边盒子固定宽度

    <div class="box">
             <div class="son1">
                  1111
             </div>
             <div class="son2">
                111111111111111111111111
                111111111111111111111111
                111111111111111111111111
                111111111111111111111111
                111111111111111111111111
                111111111111111111111111
                111111111111111111111111
                111111111111111111111111
             </div>
        </div>

.box{
                width: 900px;
                height: 300px;
                border: 1px solid black;
                margin: auto;
                position: relative;
            }
            .box>div{
                height: 100%;
            }
            .son1{
                width: 200px;
                background: black;
                position: absolute;
                left: 0px;
                top: 0px;
                
            }
            .son2{
                padding-left: 200px;
                background: red;
                
            }

3.利用父元素box-sizing内置后，子元素盒模型100%宽度会是父元素内容宽度

        <div class="box">
             <div class="son1">
                  1111
             </div>
             <div class="son2">
                111111111111111111111111
                111111111111111111111111
                111111111111111111111111
                111111111111111111111111
                111111111111111111111111
                111111111111111111111111
                111111111111111111111111
                111111111111111111111111
             </div>
        </div>

            .box{
                width: 900px;
                height: 300px;
                border: 1px solid black;
                margin: auto;
                padding-left: 200px;
                box-sizing: border-box;
                position: relative;
            }
            .box>div{
                height: 100%;
            }
            .son1{
                width: 200px;
                background: black;
                position: absolute;
                left: 0px;
                top: 0px;
                
            }
            .son2{
                background: red;
                
            }

4.三列布局
原理是中间内容区域盒模型100%，自身左右有margin值，两边就有空的区域
然后其他盒子浮动到该区域

<div>
        <div class="left">百度新闻是包含海量资讯的新闻服务平台,真实反映每时每刻的新闻热点。您可以搜索新闻事件、热点话题、人物动态、产品资讯等,快速了解它们的最新进展。</div>
        <div class="right">1</div>
        <div class="container">百度新闻是包含海量资讯的新闻服务平台,真实反映每时每刻的新闻热点。您可以搜索新闻事件、热点话题、人物动态、产品资讯等,快速了解它们的最新进展。</div>
    </div>

<style>
    *{
        margin:0;
        padding:0
    }
    div{
        height:300px;
    }
    .left{
        width:200px;
        float:left;
        background:red;
    }
    .right{
        width:150px;
        float:right;
        background:green;
    }
    .container{
        margin: 0 150px 0 200px;
        background:yellow;
    }
  </style>