基本布局方法

最新推荐文章于 2024-06-16 22:45:39 发布

桃良之伊123

最新推荐文章于 2024-06-16 22:45:39 发布

阅读量44

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/lyscq/article/details/129696416

版权

多栏布局

两栏布局
侧边栏一般定宽，将主栏设置overflow:hidden
解决高度坍塌.clearfix::after{ content:""; display:block; clear:both; }
三栏布局
左右边栏左右浮动，定宽

 <style>
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
        .left{
            float: left;
            width: 300px;
            background: green;
            margin-right: 20px;
        }
        .right{
            float: right;
            width: 300px;
            background: gray;
            margin-left: 20px;
        }
        .container{
            padding: 30px;
            border: 3px solid;
            
        }
         .main{
            overflow: hidden;
        }
        
    </style>
</head>
<body>
    <div class="container clearfix">
 <div class="left">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi quasi delectus rem tenetur nobis perferendis dolor quo. Vel a cumque esse aperiam autem blanditiis nostrum! Id consequuntur qui ullam quidem quibusdam illum vitae assumenda repellat nobis. Aliquid totam quia impedit, ipsum dolor numquam porro facilis fugiat. Obcaecati minus, facere saepe similique deserunt illum, rerum optio autem sequi eaque ad </div>
 
  <div class="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, dolore. Architecto accusantium mollitia tenetur at odio, ugiat, quisquam iusto ex optio veniam.</div>
 <div class="main">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos porro, tempora id distinctio consequatur architecto dita ut excepturi. Laborum enim odit ducimus ex molestiae quidem, eveniet consectetur provident, laudantium, ad id veritatis corrupti!</div>
</div>
</body>

等高

css3的弹性盒
js控制
伪等高

 <style>
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
        .container{
            width: 90%;
            margin: 0 auto;
            overflow: hidden;
        }
        .aside{
            float: left;
            background: #008c8c;
            color: aliceblue;
            width: 300px;
            margin-right: 30px;
            height: 10000px;
            margin-bottom: -9990px;
        }
        .main{
            overflow: hidden;
            background: gray;
        }
    </style>
</head>
<body>
    <div class="container clearfix">
    <div class="aside">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos quas assumenda illo perspiciatis animi aliquid quis nulla corporis voluptas architecto. Hic nobis similique tenetur, perspiciatis necessitatibus quisquam veniam in iure?</div>
    <div class="main">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, explicabo? Veritatis sapiente, molestiae nobis modi aliquid consectetur rerum deserunt corrupti error dicta. Cupiditate tempora est ut libero laudantium asperiores quis deserunt distinctio maxime? Consi ad eum nobis expedita vero mollitia ipsam. Adipisci accusantium mollitia ea vel explicabo illum alias! Distinctio iste provident deserunt mollitia.</div>
</div>
</body>

盒子书写顺序

主代码靠前

 <style>
        
        .left{
            position: absolute;
            left: 30px;
            top: 30px;
            width: 300px;
            background: green;
            margin-right: 20px;
        }
        .right{
           position: absolute;
           right: 30px;
           top: 30px;
            width: 300px;
            background: gray;
            margin-left: 20px;
        }
        .container{
            padding: 30px;
            border: 3px solid;
            position: relative;
            
        }
         .main{
            margin: 0 300px;
            border: 2px solid;
        }
        
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="main">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos porro, tempora id distinctio consequatur architecto commodnon atque id quae exercitationem expedita ut excepturi. Laborum enim odit ducimus ex molestiae quidem, eveniet consectetur provident, laudantium, ad id veritatis dolor sit amet consectetur adipisicing elit. Dignissimos porro, tempora id distinctio consequatur architecto commodnon atque id quae exercitationem expedita ut excepturi. Laborum enim odit ducimus ex molestiae quidem, eveniet consectetur provident, laudantium, ad id veritatis  corrupti!</div>
 
        <div class="left">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi quasi delectus rem tenetur nobis perferendis dolor quo. Vel a cumque esse aperiam autem blanditiium, rerum optio autem sequi eaque ad evempedit, animi corporis? Molestiae obcaecati aliquam aut ullam similique sit laborum aperiam, perferendis nemo, dicta vel corporis fugit neque illum, magni corrupti.</div>
 
         <div class="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, dolore. Architecto accusantium mollitia tenetur at odio, am est velit aliquam. Minima sequi tio a, id placeat eligendi laborum cupiditate porro harum velit quaerat quas vitae possimus fugiat doloribus nostrum, laudantium quos nisi beatae animi voluptatibus iusto corrupti! Ducimus fugiat, quisquam iusto ex optio veniam.</div>
 
 
</div>
</body>

后台布局

 <style>
        body{
            margin: 0;
        }
        h1{
            margin: 0;
        }
        .app{
            position: fixed;
            width: 100%;
            height: 100%;
            background: gray;
        }
        .header{
            height: 60px;
            background: #000;
            color: #fff; 
            position: absolute;
            text-align: center;
            left: 0;
            top: 0;
            width: 100%;
        }
        .container{
            width: 100%;
            height: 100%;
            background: lightblue;
            padding-top: 60px;
            box-sizing: border-box;
        }
        .container .left{
            float: left;
            width: 300px;
            background: bisque;
            color: #fff;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            overflow: auto;
        }
        .container .main{
            overflow: hidden;
            height: 100%;
            color: antiquewhite;
            padding: 20px;
            box-sizing: border-box;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="app">
        <hearder class="header">
        <h1>符合你的接送费数据库</h1>
        </hearder>
        <div class="container">
                   <aside class="left">
                      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat corporis vitae fuga consectetur impedit alias sapiente vero hic veritatis placeat cum similique porro a quisquam omnis minima obcaecati qui magni officiis, atque nihil ducimus ab ciendis tempora repudiandae, non 
                   </aside>
                   <div class="main">
               em vel corporis sapiente omnis ad quas vero hic eos eum est quaerat, quisquam praesentium? Non quam expedita voluptates quia debitis quibusdam tenetur dignissimos vero?
                   </div>
        </div>
    </div>
</body>