CSS常用技术
1、处理图片底部 5px 间距
<style>
body {background: #2d97db;}
.imgBox {
background: #fff;
font-size: 0; /* 方式一 */
line-height: 5px; /* 方式二 */
}
img {
width: 100%;
display: block; /* 方式三 */
vertical-align: bottom; /* 方式四 */
}
</style>
<div class="imgBox">
<img src="http://dsdximg.dsdxo2o.com/goods/201907031643333142607.jpg"/>
</div>
2、元素高度跟随窗口
块级元素宽度是随窗口100%适应的,高度则是随内容而变。
如果希望元素高度和窗口一致,如果用百分比设置,那html、body等元素也要跟着设置height:100%;
<style>
* {
padding: 0;margin: 0;
box-sizing: border-box;
}
/*
方式 1:
html {height: 100%;}
body {height: 100%;}
.eleBox {
height: 100%;
background: #2d97db;
}
*/
/* 方式 2 */
.eleBox {
height: 100vh;
background: #3FB2FF;
}
</style>
<div class="eleBox"></div>
3、:not()
所有元素都设置某些样式了,唯独最后一个不需要,这时候使用 not 选择器会特别方便。
li:not(:last-child) { border-bottom: none }
4、caret-color
使得光标颜色和 input 框样式更协调。
input { caret-color: #333}
5、移除 type="number" 尾部的箭头
input::-webkit-inner-spin-button { -webkit-appearance: none; }
6、移除 input 框选中时默认的状态线
input { outline: none; }
7、IOS 滚动条卡顿
html,body,div {-webkit-overflow-scrolling: touch;}
8、画三角形
<style>
.parent { display: flex }
.child {
margin-right: 10px;
border: 20px solid rgba(0,0,0,0);
}
.top { border-top: 20px solid #2d97db }
.right { border-right: 20px solid #2d97db }
.bottom { border-bottom: 20px solid #2d97db }
.left { border-left: 20px solid #2d97db }
</style>
<div class="parent">
<div class="child top"></div>
<div class="child right"></div>
<div class="child bottom"></div>
<div class="child left"></div>
</div>
9、箭头
<style>
.triangle {
position: relative;
display: inline-block;
margin-right: 10px;
width: 0;
height: 0;
border: 16px solid;
border-color: transparent #2d97db transparent transparent;
}
/* 利用伪元素盖在上面 */
.triangle::after {
position: absolute;
content: '';
right: -16px;
top: -16px;
border: 16px solid;
border-color: transparent #fff transparent transparent;
}
.top { transform: rotate(90deg) }
.right { transform: rotate(180deg) }
.bottom { transform: rotate(270deg) }
.left { transform: rotate(0deg) }
</style>
<div class="box">
<div class="box-inner">
<div class="triangle top"></div>
<div class="triangle right"></div>
<div class="triangle bottom"></div>
<div class="triangle left"></div>
</div>
</div>
10、隐藏滚动条(chrome | Safari)
.scrollEle::-webkit-scrollbar { display: none }
11、自定义选中文本样式
p::selection { background-color: #f00 }
12、禁止选择文本
p { usr-select: none }
13、clear: left | right | both
用在被浮动元素影响的元素身上。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style> .d1, .d2 { width: 100px;height: 100px; border: 1px solid; } .d1 {float: right;} .d2 {clear: both;} </style> <div class="d1">111</div> <div class="d2"></div>