# css 样式汇总
* 处理图片 5px 间距问题
1. 给父元素设置 font-size: 0
2. 给 img 设置 display: block
3. 给 img 设置 vertical-align: bottom
4. 给父元素设置 line-height: 5px
* 元素高度跟随窗口
```js
<!-- html -->
<temlplate>
<div class="app">
<div class="child"></div>
</div>
</temlplate>
<!-- css -->
*{
margin: 0;
padding: 0;
}
.child{
width: 100%;
height: 100vh;
background-image: linear-gradient(180deg,#2af598 0%, #009efd 100%)
}
```
* 修改 input placeholder样式
```js
<!-- html -->
<imput type="text" class="placeholder-custom" placeholder="请输入用户名搜索"></imput>
<!-- css -->
input{
width: 300px;
height: 30px;
border: none;
outline: none;
display: block;
margin: 15px;
border: solid 1px #dee0e9;
padding: 0 15px;
border-radius: 15px;
}
.placeholder-custom::webkit-input-placeholder{
color: #babbc1;
font-size: 12px;
}
```
* 巧用 not 选择器
> 最后一个元素不需要下边框
```js
<!-- html -->
<ul>
<li>靓仔01</li>
<li>靓仔02</li>
<li>靓仔03</li>
<li>靓仔04</li>
</ul>
<!-- css -->
li:not(:last-child){
border-bottom: 1px solid #ebedf0;
}
```
* 使用 caret-colot 改变光标颜色
> 在做表单相关需求时，有时候需要修改一闪一闪光标的颜色。caret-color 属性完美支持这个需求
```js
<!-- html -->
<input type="text" class="caret-color" />
<!-- css -->
.caret-color{
caset-color: #ffd476;
}
```
* 移出 type="number" 尾部的箭头
> 默认情况下 input type="number" 时尾部会出现小箭头
```js
<!-- html -->
<input type="number" class="no-arrow">
<!-- css -->
.no-arrow::webkit-inner-spin-button{
-webkit-appearance: none;
}
```
* outline:none 移除状态线
> 输入框选中时，默认会带有蓝色的状态先, 使用 outline: none 一键移除
* 解决 IOS 滚动条卡顿
```css
body,html{
-webkit-overflow-scrolling: touch;
}
```
* 画三角形
```js
<!-- html -->
<div class="box">
<div class="triangle bottom"></div>
<div class="triangle right"></div>
<div class="triangle top"></div>
<div class="triangle left"></div>
</div>
<!-- css -->
.triangle{
display: inline-block;
margin-right: 10px;
/* 基础样式 */
border: solid 10px transparent;
}
/* 下 */
.triangle.bottom{
border-top-color: #0097a7;
}
/* 上 */
.triangle.bottom{
border-bottom-color: #0097a7;
}
/* 左 */
.triangle.bottom{
border-right-color: #0097a7;
}
/* 右 */
.triangle.bottom{
border-left-color: #0097a7;
}
```
* 画小箭头
```js
<!-- html -->
<tempalte>
<div class="box">
<div calss="box-inner">
<div class="arrow bottom"></div>
<div class="arrow top"></div>
<div class="arrow right"></div>
<div class="arrow left"></div>
</div>
</div>
</tempalte>
<!-- css -->
.arrow {
display: inline-block;
margin-right: 10px;
/* 基础样式 */
width: 0;
height: 0;
/* 基础样式 */
border: 16px solid;
border-color: transparent #CDDC39 transparent transparent;
position: relative;
}
.arrow::after {
content: "";
position: absolute;
/* 通过位移覆盖背景 */
right: -20px;
top: -16px;
border: 16px solid;
border-color: transparent #fff transparent transparent;
}
/*下*/
.arrow.bottom {
transform: rotate(270deg);
}
/*上*/
.arrow.top {
transform: rotate(90deg);
}
/*左*/
.arrow.left {
transform: rotate(180deg);
}
/*右*/
.arrow.right {
transform: rotate(0deg);
}
```
* 图片尺寸自适应
```js
<template>
<div class="box">
<div class="img-container">
<img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="">
</div>
</div>
<div class="box">
<div class="img-container">
<img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="">
</div>
</div>
<div class="box-vw">
<div class="img-container">
<img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="">
</div>
</div>
</template>
.box, .box-vw{
background-color: #f5f6f9;
border-radius: 10px;
overflow: hidden;
margin-bottom: 15px;
}
.box:nth-of-type(2){
width: 260px;
}
/* vw方案 */
.box-vw .img-container{
width: 100vw;
height: 66.620879vw;
padding-bottom: inherit;
}
/* padding方案 */
.img-container{
width: 100%;
height: 0;
/* 图片的高宽比 */
padding-bottom: 66.620879%;
}
img{
width: 100%;
}
```
* 隐藏滚动条
```js
<template>
<div class="box">
<div>
爱情会离开，朋友会离开，快乐会离开，但是考试不会,因为你不会就不会
</div>
</div>
<div class="box box-hide-scrollbar">
<div>只是因为在人群中多看了你一眼，你就--问我游泳健身了解一下？</div>
</div>
</template>
.box {
width: 375px;
overflow: scroll;
}
/* 关键代码 */
.box-hide-scrollbar::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.box > div {
margin-bottom: 15px;
padding: 10px;
background-color: #f5f6f9;
border-radius: 6px;
font-size: 12px;
width: 750px;
}
```
* 自定义文本选中的样式
```css
.box-custom::selection{
color: #fff;
background: #ff4c9f;
}
```
* 禁止选中
```css
.forbid{
user-select: none;
}
```
* 单行文本溢出显示省略符
```css
.ellipsis{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* 非必填，只是为了制造一行放不下的效果 */
max-width: 375px;
}
```
* 多行文本溢出显示省略号
```css
.ellipsis{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
```
* 使用 filter: grayscale(1) 使得网页呈现哀悼模式
* 多个行内元素并排展示是，中间有一个字符的空隙
1. 给父元素设置 font-size: 0px;
2. 取消换行符
3. 使用margin负值
4. 使用浮动
* margin 塌陷问题
* 兄弟元素 垂直方向塌陷
1. 尽量只给一个盒子添加margin值
2. 给一个盒子添加一个父元素设置样式 overflow: hidden
* 父子包含关系 垂直塌陷
1. 父元素设置: border: 1px solid transparent;
2. 父元素设置: overflow: hidden;
3. 父元素设置: position: fixed/absolute
4. 子元素的margin 改成 padding
# 优化
* 初始化 box-sizing
> 从 html 中继承 box-sizing 属性，这样的话，后期维护方便
```css
html{
box-sizing: border-box;
}
*,*:before,*:after{
box-sizing: inherit;
}
```
标签：总结,box,bottom,样式,margin,color,border,width,css From： https://www.cnblogs.com/G-Lose/p/16932089.html