CSS杂记

June 22, 2018

Shiyong Yin

box-sizing

2个取值(inherit不计算在内)

  • content-box 简单来说，整个元素宽度=width+border+margin+padding，高度类似
  • border-box 简单来说，整个元素宽度=width，width=内容宽度+border+margin+padding

建议将所有元素的border-boxing都设置为border-box

示例

box-sizing: content-box; width: 100%; padding: 0; border-width: 0;
box-sizing: content-box; width: 100%; padding: 0; border-width: 0;
box-sizing: border-box; width: 100%; padding: 0; border-width: 0;

flex布局

.a {
  flex: 1 1 100px;
}

这表示什么意思？

上面的样式等价于

.a {
  flex-grow: 1; //扩展比率
  flex-shrink: 1; //收缩比率
  flex-basic: 100px; //伸缩基准值
}

flex-shrink示例

wrapper的总长度是500，根据基准值算出的总长度是200+200+200=600，显然超出了，所以根据收缩比率进行压缩 (600-500) / (1+2+3) = 16.666，那么green块收缩16.666x1，black块收缩16.666x2，blue块收缩16.666x3 所以最后的宽度green = 200 - 16.666x1, 同理，black,blue类似

<style>
.ysy-f-wrapper {
  display: flex;
  width: 500px;
  height: 50px;
}
.ysy-f-green{
  flex: 1 1 200px;
  background: green;
  height: 50px;
}
.ysy-f-black{
  flex: 2 2 200px;
  background: black;
  height: 50px;
}
.ysy-f-blue{
  flex: 3 3 200px;
  height: 50px;
  background: blue;
}
</style>
<div class="ysy-f-wrapper">
  <div class="ysy-f-green"></div>
  <div class="ysy-f-black"></div>
  <div class="ysy-f-blue"></div>
</div>

flex-grow示例

这个省略了，比flex-shrink好理解

作业

要求如下

  1. 内容居中，左右边距10px
  2. A元素垂直居中
  3. A元的内容垂直居中
A
Recent Posts