css常见的样式异常

昨天周一工作上忙的透支了，昨晚回到家，收拾完了之后十一点多了，突然发现自己今天没有更新简书...再去整理资料已经来不及写新文章了，就算写了新文章发布了，内容质量也是不堪的，不如不写了！实不相瞒，我挑战了简书的日更计划，由于昨天没有发布新文章，所以前功尽弃...伤心之余，还是要捡起这个flag。
那今天就来聊聊前端css样式的一些怪异现象吧！

1. display: inline-bloack的元素，如何解决间隙？

• 代码

// html
<div class="page">
  <div class="inline_block ib1"></div>
  <div class="inline_block ib2"></div>
</div>
// css
.inline_block {
  display: inline-block;
  width: 40%;
  height: 50px;
}
.ib1 {
  background: blue;
}
.ib2 {
  background: red;
}

• 现象 如下图；两个div之间有间隙
  

  间隙

• 解决
  方法一：因为标签之间的空格，因此去掉空格就可以解决了；但是这个方法很笨
  方法二：font-size:0这个方式可以解决空隙的问题

.page {
  font-size: 0;  // 父级元素设为font-size:0
}
.inline_block {
  display: inline-block;
  width: 40%;
  height: 50px;
  font-size: 0; // 还有这里
}

2. 设置opacity之后，子元素也会出现透明度

• 代码

// html
<div class="page">
  <div class="opacity">
    <span>opacity</span>
  </div>
</div>
// css
.page {
  opacity: 0.5;
}
.opacity {
  width: 40%;
  height: 50px;
  font-size: 15px;
  background: #000;
}
span {
  font-size: 20px;
  line-height: 50px;
  color: red;
}

• 现象 如下图
  透明度
• 解决
  不要使用opacity，使用background: rgba()方法来设置

// css 更改
.page {
  background: rgba(255, 255, 255, 0.5);
}

3. <img>和<span>元素，垂直方向上，不对齐

• 代码

<div class="page">
  <img src="../../assets/images/ceb_3x.png" alt>
  <span>text</span>
</div>

• 现象 如下图
  垂直未居中
• 解决 将img元素的vertical-align设置为middle

img {
  vertical-align: middle;
}

4. 弹窗出现，弹窗后面的元素还可以滚动

• 解决
  设置body的overflow:hidden，关闭弹窗的时候，再恢复overflow的属性

5. 最外层div想要占满一屏

设置div的css样式为

display: absolute;
min-height: 100%;

6. input 设置disabled属性之后 placeholder变成黑色

某些移动端会出现这样的奇怪样式，但是普遍情况下还是不会有这种怪异现象的

input::-webkit-input-placeholder{
  color: #cccccc;
  -webkit-text-fill-color: #ccc;
  opacity: 1;
  -webkit-opacity:1;
}
input:disabled{
  background: none;
  color: #333;
  -webkit-text-fill-color: #333;
  opacity: 1;
  -webkit-opacity:1;
}
input:disabled::-webkit-input-placeholder{
  color: #cccccc;
  -webkit-text-fill-color: #ccc;
  opacity: 1;
  -webkit-opacity:1;
}

7. input上边框有阴影

有些移动端会出现这样的问题，但是普遍情况下不会出现这样的问题

input:focus{outline:none}
-webkit-appearance: none;

8. pre标签中支持换行

pre标签中的内容是不支持换行，所以换行的话，需要自己设置换行属性

pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}