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.谈谈绝对定位和相对定位