筆記：面試 - css

CSS相關

在這裡分享本人面試遇到的一些問題與解決方案，將會持續更新
水平垂直居中 日期： 9/17

如何在一個div中垂直居中

  <body>
    <div class="father"><!--
      --><div class="son"></div><!--
      --></div>
  </body>
複製程式碼

  1.flex
  *{
      margin: 0;
      padding: 0;
    }
    .father {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 500px;
      background-color: cadetblue;
    }
    .son {
      width: 50px;
      height: 50px;
      background-color: aqua;
    }
    2.absolute
    *{
      margin: 0;
      padding: 0;
    }
    .father {
      position: relative;
      height: 500px;
      background-color: cadetblue;
    }
    .son {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      background-color: aqua;
    }
    3.fixed-height
        
    *{
      margin: 0;
      padding: 0;
    }
    .father {
      position: relative;
      height: 500px;
      background-color: cadetblue;
    }
    .son {
      position: absolute;
      width: 50px;
      height: 50px;
      top: 50%;
      left: 50%;
      margin-top: -25px;
      margin-left: -25px;
      background-color: aqua;
    }
    4.table-cell
    /*
        需要三個div,
        外層為display: table;
        father為display: table-cell;
        son為display: inline-block;
    */
    html{
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      display: table;
      width: 100%;
      height: 100%;
    }
    .father {
      display: table-cell;
      background-color: cadetblue;
      text-align: center;
      vertical-align: middle;
    }
    .son {
      width: 50px;
      height: 50px;
      display: inline-block;
      background-color: aqua;
    }
複製程式碼

擴充

水平居中

    1.flex
    * {
      margin: 0;
      padding: 0;
    }
    .father {
      display: flex;
      justify-content: center;
      height: 500px;
      background-color: cadetblue;
    }
    .son {
      height: 50px;
      width: 50px;
      background-color: aqua;
    }
    2.absolute
    * {
      margin: 0;
      padding: 0;
    }
    .father {
      height: 500px;
      position: relative;
      background-color: cadetblue;
    }
    .son {
      position: absolute;
      height: 50px;
      width: 50px;
      left: 50%;
      /* margin-left: -25px; */
      transform: translateX(-50%);
      background-color: aqua;
    }
    3.margin
    * {
      margin: 0;
      padding: 0;
    }
    .father {
      height: 500px;
      background-color: cadetblue;
    }
    .son {
      height: 50px;
      width: 50px;
      margin: 0 auto;
      background-color: aqua;
    }
    ```
    - 垂直居中
    ```css
    1.flex
    * {
      margin: 0;
      padding: 0;
    }
    .father {
      display: flex;
      align-items: center;
      height: 500px;
      background-color: cadetblue;
    }
    .son {
      height: 50px;
      width: 50px;
      background-color: aqua;
    }
    
    2.absolute
    * {
      margin: 0;
      padding: 0;
    }
    .father {
      height: 500px;
      position: relative;
      background-color: cadetblue;
    }
    .son {
      position: absolute;
      height: 50px;
      width: 50px;
      left: 50%;
      /* margin-left: -25px; */
      transform: translateX(-50%);
      background-color: aqua;
    }
    
    3.line-height
    * {
      margin: 0;
      padding: 0;
    }
    .father {
      height: 500px;
      line-height: 500px;
      background-color: cadetblue;
    }
    .son {
      display: inline-block;
      height: 50px;
      width: 50px;
      background-color: aqua;
    }
複製程式碼

left、middle、right佈局

兩邊固寬、中間自適應

<div class="wrapper">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>
複製程式碼

兩邊固定，中間自適應

1.flex
*{
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  height: 500px;
}

.left {
  width: 100px;
  background-color: lightgrey;
}

.middle {
  flex: 1;
  background-color: lightcyan;
}

.right {
  width: 100px;
  background-color: lightgrey;
}
2.float
*{
  margin: 0;
  padding: 0;
}

.wrapper {
  height: 500px;
}

.left {
  width: 100px;
  height: 100%;
  float: left;
  background-color: lightgrey;
}

.middle {
  float: left;
  width: calc(100% - 200px);
  height: 100%;
  background-color: lightcyan;
}

.right {
  float: left;
  height: 100%;
  width: 100px;
  float: right;
  background-color: lightgrey;
}
複製程式碼

擴充

在做這個的時候搜到了聖盃+雙飛翼佈局

雙飛翼杯佈局

    <header>header</header>
    <section class="wrapper">
      <section class="col main">main</section>
      <aside class="col left">left</aside>
      <aside class="col right">right</aside>
    </section>
    <footer>footer</footer>
複製程式碼

* {
  margin: 0;
  padding: 0;
}
header,footer { 
  height: 50px;
  background-color: beige;
}
.wrapper { 
  position: relative;
}
.main { 
  height: 200px; 
  margin:0 100px;
  background-color: aqua;
}
.left, .right{ 
  width: 100px; 
  height: 200px; 
  position: absolute; 
  top: 0;
  background-color: lightgray;
}
.left{ left: 0;}
.right{ right: 0;}
複製程式碼

聖盃佈局

<header>聖盃佈局</header>
<section class="wrapper">
  <section class="main">
    main
  </section>
  <aside class="left">
    left
  </aside>
  <aside class="right">
    right
  </aside>
</section>
<footer>footer</footer>
複製程式碼

* {
  padding: 0;
  margin: 0;
}
body {
  min-width: 600px;
}
header, footer {
  text-align: center;
  width: 100%;
  background-color: #bbbbbb;
}

.wrapper {
  overflow: hidden;
  padding: 0 200px 0 200px;
}
.main {
  float: left;
  width: 100%;
  height: 200px;
  background-color: #ddd;
}
.left {
  /* opacity: 0.5; */
  float: left;
  width: 200px;
  height: 200px;
  background-color: #da4242;
  /* 產生布局效果的屬性 */
  margin-left: -100%;
  position: relative;
  left: -200px;
}
.right {
  /* opacity: 0.5; */
  float: left;
  width: 200px;
  height: 200px;
  background-color: #4ddef1;
  /* 產生布局效果的屬性 */
  margin-left: -200px;
  position: relative;
  left: 200px;
}
複製程式碼

聖盃的弊端

如果將瀏覽器無限變窄，「聖盃」將會「破碎」掉

當 main 部分的寬小於 left 部分時就會發生布局混亂
- 加min-width可以解決

固定 footer佈局

內容不足時固定在頁面底部、頁面超出時在頁面底部

    <div class="container">
        <header>header</header>
        <main>main content</main>
        <div class="empty"></div>
    </div>
    <footer>footer</footer>
複製程式碼

    html,body{
      height:100%;
      margin:0;
      padding:0;
    }
    .container{
      min-height:100%;
      margin-bottom:-100px;
    }
    .empty,footer{
      height:100px;
    }

複製程式碼

利用empty-div將footer推到頁面的最底部

本人把所有程式碼都寫成了demo放在了git上，有興趣的可以clone下來

筆記：面試 - css

CSS相關

兩邊固定，中間自適應

雙飛翼杯佈局

聖盃佈局

聖盃的弊端

相關文章