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>複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。