笔记：面试 - cssCSS相关水平垂直居中日期：9/17拓展水平居中left、middle、right布局两边固定，中

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下来