阅读 92

CSS常见布局

假设高度已知,写出三栏布局,其中左右栏宽度各为300px;中间自适应

1.使用float实现三栏布局:

<div class='outer'>
    <div class='l-float'></div>    
    <div class='r-float'><div>
    <div class='center'></div>
</div>
<style>
   .outer{min-width:600px; height:100px;}   .outer>div{height:100%;}
   .l-float,.r-float{width:300px;}
   .l-float{float:left; background-color: antiquewhite;}
   .r-float{float:right; background-color:cadetblue;}
   .center{background-color:deepskyblue;}
</style>复制代码

2. absolute position实现三栏布局:

<div class='container'>
    <div class='left'></div>   
    <div class='center'><div>
    <div class='right'></div>
</div>
<style>
   .outer{min-width:600px; position:relative;}   
   .outer>div{height:100px;}
    div.left{background-color:cyan;width:300px;}
    div.right{background-color:darkmagenta;width:300px;}
   .left{position:absolute;top:0;left:0;}
   .right{position:right;top:0;right:0;}
   .center{position:absolute; top:0;left:300px;right:300px; background-color:gold;}
</style>复制代码

3. flex-box实现三栏布局

<div class='container'>
    <div class='left'></div>   
    <div class='center'><div>
    <div class='right'></div>
</div>
<style>
    div{height:100px;}
    .left,.right{background-color:red;width:300px;}
    .center{background-color:royablue;flex:1;}
    .container{display:flex;}
</style>复制代码

4. table layout实现三栏布局

<div class='table-container'>
    <div class='left'></div>   
    <div class='middle'><div>
    <div class='right'></div>
</div>
<style>
    .table-container{width:100%;display:table;height:100px;}
    .table-container>div{display:table-cell;}
    .left,.right{width:300px;background-color:red;}
    .middle{background-color:gold;}
</style>复制代码

5. Grid layout实现三栏布局

<div class='grid-container'>
    <div class='left'></div>   
    <div class='middle'><div>
    <div class='right'></div>
</div>
<style>
    .grid-container{width:100%;display:grid;grid-template-rows:100px;grid-template-columns:300px auto 300px;}
    .table-container>div{display:table-cell;}
    .left,.right{background-color:red;}
    .middle{background-color:green;}
</style>复制代码

面试官可能会就布局问题继续延申,比如每个方案的优缺点是什么这样的问题:


浮动方案:

缺点(局限性):

脱离文档流,需要清除浮动 如果处理不好,会带来挺多问题,比如高度塌陷等

优点:

兼容性好, 只要清除浮动做的好,是没有什么问题的

绝对定位方案:

优点:

快捷, 不同意出问题

缺点:

可使用性比较差(因为布局还有子元素都脱离了文档流)

flex-box方案:

优点:

比较完美

缺点:

不能兼容IE8及以下浏览器

table布局:

缺点:

对搜索引擎不友好,灵活度不高

优点:

兼容性好

grid布局:

优点:

简易

缺点:


两栏布局:左宽度固定,右自适应

1. flex-box实现两栏布局:

<section class='container'>
    <article class='left'></article>   
    <article class='right'></article>
</section>
<style>
    .container{display:flex;}
    .left,.right{height:100vh;}
    .left{background-color:green;width:200px;}
    .right{background-color:red;width:100%}
</style>复制代码

2. Absoulte position实现两栏布局

<section class='container'>
    <article class='left'></article>   
    <article class='right'></article>
</section>
<style>
    .container{position:relative;}
    .left,.right{height:100vh;}
    .left{background-color:green;width:200px;}
    .right{background-color:red;position:absolute;top:0px;left:200px;width:100%}
</style>复制代码

3. Grid实现两栏布局

<section class='container'>
    <article class='left'></article>   
    <article class='right'></article>
</section>
<style>
    .container{
        display:grid;
        grid-template-columns:200px auto;
        grid-template-rows:100vh;
     }
    .left{background-color:green;}
    .right{background-color:red;}
</style>复制代码

4. table实现两栏布局

<section class='container'>
    <article class='left'></article>   
    <article class='right'></article>
</section>
<style>
    .container{
        display:table;
        width:100%;
        table-layout:fixed;
     }
    .left,.right{display:table-cell;}
    .left{background-color:green; width:200px;}
    .right{background-color:red;}
</style>复制代码

5.  float+BFC 实现两栏布局

<section>
    <article class='left'></article>   
    <article class='right'></article>
</section>
<style>
    .left,.right{height:100vh;}
    .left{background-color:green; width:200px;float:left;}
    .right{background-color:red;overflow:hidden;}
</style>复制代码

6. 左边使用float:left固定宽度,右边使用margin-left隔开自适应:

<section>
    <article class='left'></article>   
    <article class='right'></article>
</section>
<style>
    .left,.right{height:100vh;}
    .left{background-color:green; width:200px;float:left;}
    .right{background-color:red;margin-left:200px;}
</style>复制代码

两栏布局:上高度固定,下自适应

1. flex-box实现两栏布局:

<section class='container'>
    <article class='item1'>fixed height top</article>   
    <article class='item2'>自适应</article>
</section>
<style>
    .container{display:flex;height:100vh;flex-direction:column;text-align:center;}
    .item1{background-color:green;height:50px;}
    .item2{background-color:red;height:100%}
</style>复制代码

2. Grid实现两栏布局:

<section class='container'>
    <article class='item1'>fixed height top</article>   
    <article class='item2'>自适应</article>
</section>
<style>
    .container{display:grid;height:100vh;grid-template-rows:50px auto;text-align:center;}
    .item1{background-color:green;width:100%;}
    .item2{background-color:red;width:100%}
</style>复制代码

水平居中

  1. 水平居中inline element/inline-block element使用 text-align:center

<div style="width:250px;height:100px;background-color:#ccc;text-align:center">
    <span> 行内元素水平居中 </span>
</div>复制代码

                                         

   2.  水平居中block element使用margin: 0 auto; ------>比如居中div

<div style="width:250px;height:100px;border:1px solid #ccc;text-align:center">
    <div style="width:100px;height:50px;border:1px solid red; margin:0 auto"> 块级元素水平居中 </div>
</div>复制代码

                                     

    3.  绝对元素的水平居中:absoulte+transform:

 <div class='outer'>
    <div class='inner'>
        I'm A absoluted 
    </div>
  </div>

<style>
    .outer{
          height:100px;
          width:200px;
          position:relative;
          background-color:#ccc;
    }
    .inner{
          height:40%;
          width:50%;
          background-color:lightcoral;
          position:absolute;
          top:50%;
          left:50%;
          transform:translate(-50%,-50%); /*这也是水平+垂直居中*/
    }
</style>

复制代码

                                                    


4. 通用方法:flex+justify-content:center 

5. 宽度不固定的浮动元素的水平居中: 

<section>
     <div class='outter'>
      <div class='inner'>
          这是一个宽度不确定的浮动元素
      </div>
    </div>
</section>
<style>
    section{
      height:100px;
      width:500px;
      background-color:lightcyan;
    }
   .outter{
      border:2px solid #ccc;
      float:left;
      position:relative;
      left:50%;/*相对于section的宽度计算的*/
    }
   .inner{
      border:1px solid green;
      float:left;
      position:relative;
      left:-50%;/*相对于.outter的宽度计算的*/
    }
</style>                 复制代码

                  

6. 宽度固定的浮动元素的水平居中:

<body>
      <div class='floatbox'>
          这是一个宽度确定的浮动元素
      </div>
</body>
<style>
    body{
      background-color:pink;
    }
    .floatbox{
      width:200px;
      background-color:lightblue;
      text-align:center;
      position:relative;
      left:50%;
      margin-left:-100px; /*浮动元素宽度的一半*/
    }
</style>复制代码

               


关注下面的标签,发现更多相似文章
评论