關於css佈局、居中的問題以及一些小技巧

Caddo發表於2018-10-07
CSS

CSS的兩種經典佈局

  • 左右佈局

  • 一欄定寬，一欄自適應
    <!-- html -->
    <div class="left">定寬</div>
    <div class="right">自適應</div>
    <!-- css -->
    .left{
      width: 200px;
      height: 600px;
      float: left;
      display: table;
      text-align: center;
      line-height: 600px;
    }
    .right{
      margin-left: 210px;
      height: 600px;
      background: yellow;
      text-align: center;
      line-height: 600px;
    }
  • 利用絕對定位實現
    <!-- html -->
    <div class= "left">
    </div>
    <div class= "right">
    </div>
    <!-- css-->
    .left{
        position:absolute;
        left:0;
        width:200px;
    }
    .right{
        margin-left:200px;
    }

  • 左中右佈局

  • 利用絕對定位實現
    <!-- html-->
    <div class= "left">
    </div>
    <div class= "main">
    </div>
    <div class= "right">
    </div>
    <!-- css-->
    .left{
      width:200px;
      background-color:yellow;
      position:absolute;
      top:0;
      left:0;
    }
    .main{
      margin-left:200px;
      margin-right:300px;
    }
    .right{
      width:300px;
      background-color:orange;
      position:absolute;
      top:0;
      right:0;
    }
  • 利用浮動定位實現
    <!-- html-->
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
    <!-- css-->
    .left{
      width:300px;
      background-color:yellow;
      float:left;
    }
    .right{
      width:200px;
      background-color:orange;
      float:right;
    }
    .main{
      margin-left:300px;
      margin-right:200px;
}
  • 聖盃佈局，兩邊定寬，中間自適應
    <!-- html-->
    <div class="container">
        <div class="main col">Main</div>
        <div class="left col">Left</div>
        <div class="right col">Right</div>
    </div>
    <!-- css-->
        .col{
            float: left;   
            position:relative;
        }
        .container{
            padding:0 200px 0 100px;
        }
        .left{
            left:-100px;
            width: 100px;
            height:100%;
            margin-left: -100%;
            background: red;
        }
        .main{
            width:100%;
            height: 100%;
        }
        .right{
            right:-200px;
            width:200px;
            height:100%;
            margin-left: -200px;
            background: yellow;
        }
  • 雙飛翼佈局
    <!-- html-->
     <div class="container"> 
        <div class="left col ">Left</div>
        <div class="main col ">
            <div class="main_inner">Main</div>
        </div>
        <div class="right col ">Right</div>
    </div>
    <!-- css-->
     .col{ 
            float: left;
        }
        .main{ 
            width:100%;
            height:100%;
        }
        .main_inner{
            margin:0 200px 0 100px;
        }
        .left{
            width: 100px;
            height: 100%;
            margin-left: -100%;
            background: red;
        }
        .right{
            height:100%;
            width:200px;
            margin-left: -200px;
            background: yellow;
        }

CSS居中問題

  • 水平居中

  • 對於行內元素(inline)：text-align: center; 
    <!-- html -->
    <div>
       <span >kaka</span>
    </div>
    <!-- css -->
    div {
        text-align:center
    }
  • 對於塊級元素(block)：
    1.給此塊級元素設定寬度
    2.margin:0 auto; 
    <!-- html -->
    <div class="parent">
        <div class="child">kaka</div>
    </div>
    <!-- css -->
    .parent {
        width:1002px;
    }
    .child {
        width:50%;//也可以是固定畫素
        margin:0 auto;
    }

  • 垂直居中

  • 行高與高度一致使其居中，適用於只有一行文字的情況
    <!-- html -->
    <div class="parent">
        <div class="child">kaka</div>
    </div>
    <!-- css -->
    .parent {
        height:1002px;
        line-height:1002px;
    }

  • 水平垂直均居中

  • 已知寬高，給負margin
    <!-- html -->
    <div class="parent">
        <div class="child">kaka</div>
    </div>
    <!-- css -->
    .parent {
        position: relative;
    }
    .child {
      position: absolute;
      width:1002px;
      height:828px;
      top: 50%;
      left: 50%;
      margin-top:-414px;
      margin-left:-501px;
    }
  • 未知寬高，transform方案
    <!-- html -->
    <div class="parent">
        <div class="child">kaka</div>
    </div>
    <!-- css -->
    .parent {
      position: relative;
    }
    .child {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

CSS的一些小技巧

  • 請寫出「姓名」與「聯絡方式」兩端對齊的例子
<!-- html -->
<span>姓名</span>
<span>聯絡方式</span>
<!-- css -->
span{
    line-height:20px;
    font-size:20px;
    height:20px;
    overflow:hidden;
}
span::after{
    content: ``;
    display: inline-block;
    width: 100%;
}
  • 文字內容過長如何變成省略號？
    1 一行文字過長,只需要對該div作以下操作：
<!-- css -->
div{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
2 多行文字超出,如：在第二行後省略：
<!-- css -->
div{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
  • 如何使固定高度的div裡面的文字垂直居中？

1.先確定行高 2.再用padding補全高度。這種寫法的好處是在文字增減過程中不會出現bug。
例：一個高 40px 的 div，裡面的文字垂直居中

<!-- css -->
div{
    line-height:20px;
    padding:10px 0;
}
  • 使該元素變大1.2倍
    transform: scale(1.2);
  • 動畫過渡效果
    transition: all 0.3s;

相關文章