CSS常见布局

时间 2019-11-17

标签 css 常见布局栏目 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实现三栏布局bash

<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实现三栏布局flex

<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>复制代码

面试官可能会就布局问题继续延申，好比每一个方案的优缺点是什么这样的问题：ui

浮动方案：搜索引擎

缺点(局限性)：spa	脱离文档流，须要清除浮动若是处理很差，会带来挺多问题，好比高度塌陷等code
优势： orm	兼容性好，只要清除浮动作的好，是没有什么问题的

绝对定位方案：

优势：	快捷，不一样意出问题
缺点：	可以使用性比较差（由于布局还有子元素都脱离了文档流）

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>复制代码

水平居中

水平居中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>复制代码