CSS中容易忽略的问题

这篇博客用于记录在平时开发的过程中会遇到一些貌似奇奇怪怪的CSS问题。

1.为什么span元素设置宽高没有作用？

涉及块级元素和内联元素的区别：

块级元素	内联元素
1.可以容纳块级元素、内联元素、文本	1.可以容纳内联元素（尝试容纳块级元素会得到预料之外的结果）、文本
2.总是新起一行	2.不会新起一行
3.高度、宽度、内外边距可控	3.高度、宽度、内外边距不可控

span是内联元素(display: inline)，所以设置宽高无效。
有几种方式可以使得span宽高边距等属性变得可设置(具有块级元素属性)：
①设置display属性为inline-block或者为block
②使用浮动布局，即设置了float: left/right，则行内元素的display属性会被设置为block
③设置position: absolute/fixed都会使得行内元素变为块级元素

2.为什么设置了z-index属性无效 ?

z-index越小，元素会位于越底层，值越大，元素会位于越高层。如果设置了该属性值，但是并没有预期的效果，原因可能是：
①因为未设置position，z-index属性仅对定位元素(position值非static)生效！
②如果父元素设置了z-index且本身位于下层，那么z-index设置得再大，也是不可能翻身在上层的！

3.怎样让元素填满父元素剩余空间?

经常会遇到这个需求，目前常用的方法是使用flex布局：父元素设置display为flex，子元素设置flex属性为auto。
关于flex布局，可参考阮一峰的博客。

<div class="container">
   <div class="father">
     <div class="child1">child1</div>
     <div class="child2">child2</div>
   </div>
 </div>

.father
  display flex
  flex-direction column
  background yellow
  width 200px
  height 200px
  font-size 32px
  .child1
    width 100%
    height 50px
    background green
  .child2
    flex auto
    background gray

表现：

4.为什么设置了transform:translate (-50%,-50%)页面显示会出现模糊？

transform:translate (-50%,-50%)语句会将元素向左移动自身宽度的50%，向上移动自身高度的50%。而这个过程中有事会导致元素文本内容显示模糊，其原因是元素本身的宽度或者高度为奇数，取50%后会出现小数(0.5px)，这时候元素的内容就会表现出模糊。解决办法是在设置transform的translate属性为百分数的时候，设置元素自身的宽高以确保取百分比后的像素为整数。
常用的一个场景可能是实现元素基于父元素垂直居中，而往往元素自身的宽高又是未知(即可能为奇数)，这个情况下如果使用以下的CSS代码就很可能导致模糊：

  transform translate(-50%, -50%)
  position relative
  left 50%
  top 50%

这时候一个比较好的选择是使用flex布局，可以很好地解决垂直居中的问题。设置父元素为flex布局，同时设置元素交叉轴对齐方式为center即可：

<div class="div1">
  <div class="div2">
    测试文字
  </div>
</div>

.div1
  width 200px
  height 200px
  background green
  display flex
  align-items center
.div2
  width 45px
  height 45px
  background yellow

表现：

这就实现了垂直居中，如果要同时实现水平居中，可以设置父元素的justify-content为center即可，并不会模糊的呢。

---

后续遇到类似的问题再继续补充了～～