css常見面試問題

1.瀑布流的實現方式

 

https://www.cnblogs.com/ainyi/p/8766281.html

（1）css的multi-columns 寫法

html：

<div class="box">
          <div class="item">
            <div class="item_content content-lar">1我最大</div>
          </div>
          <div class="item">
            <div class="item_content content-sma">2我最小</div>
          </div>
          <div class="item">
            <div class="item_content content-mid">3我中號</div>
          </div>
          <div class="item">
            <div class="item_content content-sma">4我最小</div>
          </div>
          <div class="item">
            <div class="item_content content-mid">5我中號</div>
          </div>
          <div class="item">
            <div class="item_content content-lar">6我最大</div>
          </div>
          <div class="item">
            <div class="item_content content-sma">7我最小</div>
          </div>
          <div class="item">
            <div class="item_content content-lar">8我最大</div>
          </div>
          <div class="item">
            <div class="item_content content-lar">9我最大</div>
          </div>
          <div class="item">
            <div class="item_content content-sma">10我最小</div>
          </div>
          <div class="item">
            <div class="item_content content-mid">11我中號</div>
          </div>
          <div class="item">
            <div class="item_content content-mid">12我中號</div>
          </div>
          <!-- more items -->
        </div>

css:

box：是瀑布流的容器：在容器裏面column-count（列數） 和 column-gap（列間距）

item：是列表 break-inside:avoid，這是爲了控制文本塊分解成單獨的列，以免項目列表的內容跨列，破壞整體的佈局。

 

.content-sma {
  height: 50px;
}
.content-mid {
  height: 100px;
}
.content-lar {
  height: 150px;
}
.box {
  -moz-column-count: 4; /* Firefox */
  -webkit-column-count: 4; /* Safari 和 Chrome */
  column-count: 4; //設置列數
  -moz-column-gap: 2em;
  -webkit-column-gap: 2em;
  column-gap: 2em; //設置列間距
  width: 80%;
  margin: 2em auto;
}
.item {
  //  padding: 2em;
  border: 1px solid;
  margin-bottom: 2em;
  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid; //防止單獨成行
  background: #f60;
}

效果：

(2)flexbox 

html同上

css:

.content-sma {
  height: 50px;
}
.content-mid {
  height: 100px;
}
.content-lar {
  height: 150px;
}
.box {
  height: 600px;
  display: flex;
  flex-flow: column wrap;
  width: 80%;
  margin: 2em auto;
}
.item {
  //  padding: 2em;
  border: 1px solid;
  margin: 10px 5px;
  background: #f60;
}

效果：

2.實現垂直方向上的居中方式

3.談談絕對定位和相對定位