昨天周一工作上忙的透支了，昨晚回到家，收拾完了之后十一点多了，突然发现自己今天没有更新简书...再去整理资料已经来不及写新文章了，就算写了新文章发布了，内容质量也是不堪的，不如不写了！实不相瞒，我挑战了简书的日更计划，由于昨天没有发布新文章，所以前功尽弃...伤心之余，还是要捡起这个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;
}
