CSS中容易忽略的问题

以你之姓@ 2022-05-19 03:48 382阅读 0赞

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

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

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

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

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布局，可参考[阮一峰的博客][Link 1]。

<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

表现：  
![这里写图片描述][70]

#### 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即可：

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

表现：  
![这里写图片描述][70 1]  
这就实现了垂直居中，如果要同时实现水平居中，可以设置父元素的justify-content为center即可，并不会模糊的呢。

--------------------

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

[Link 1]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[70]: /images/20220519/743c8c96f20244308722361b7896aa3a.png
[70 1]: /images/20220519/c85b8f8e3fd2456e988aaff1f0e60adf.png