阴影盖住、trim、窗口、inline-block、字间距等问题（2021-1-28）

阴影盖住、trim、窗口、inline-block、字间距等问题

• 当阴影被下面的元素盖住时，此时给该元素增加定位，然后在增加层级即可以。

.list {
  color: black;
  width: 400px;
  height: 300px;
  margin: auto;
  box-shadow: 0 0 15px 8px red;
  position: relative;
  z-index: 100;
}
.list2 {
  color: #fff;
  width: 400px;
  height: 300px;
  margin: auto;
  background: black;
}

• 如
• ,当 标签的行高和
• 的行高不同时，加入下面一行代码即可以。

li {
    vertial-align: top;
}

• 一个块元素中，去除一部分固定宽度的元素，其他元素用百分比表示。

  width: calc(100%-100px);
  

• trim()去掉文本框首尾的空格。

• 改变窗口宽度时，调用的函数

  $(window).on('resize',function(){
  .....
  })
  

• 解决display: inline-block;元素产生间隙的问题。

  1.为父元素中设置font-size: 0，在子元素上重置正确的font-size

  <div class="parent" style="font-size: 0px">
    <div class="child" style="font-size: 16px">child1</div>
    <div class="child" style="font-size: 16px">child2</div>
  </div>
  

  缺点：inline-block元素必须设定字体，不然行内元素中的字体不会显示。 增加了代码量。

  2.为inline-block元素添加样式float:left

  缺点：float布局会有高度塌陷问题。

  3.最优解：设置父元素，display:table和word-spacing

  .parent{
    display: table;
    word-spacing:-1em; /*兼容其他浏览器，题主还未验证*/
  }
  

• 字间距

  letter-spacing: 2px;