# 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
* 水平垂直居中
1. 定位 + margin 负边距 (已知父级元素固定宽高，才能确定 margin-left 和 margin-right)
```css
.father{
width: 200px;
height: 200px;
position: relative;
background-color: aliceblue;
}
.son{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
background-color: #789;
}
```
2. 定位 + margin: auto (无需要确定父级元素的宽高，但把定位属性全用上了)
```css
.father{
width: 200px;
height: 200px;
position: relative;
background-color: aliceblue;
}
.son{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #789;
}
```
3. 定位 + transform: translate(-50%，-50%) (无需要确定父级元素的宽高，translate属性兼容IE9+)
```css
.father{
width: 200px;
height: 200px;
position: relative;
background-color: aliceblue;
}
.son{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #789;
}
```
4. 子级元素是内联元素，父级元素用 display: table-cell; 和 vertical-align: middle (无需要确定父级元素的宽高，inline-block 、 table-cell 不兼容ie67)
```css
.father{
width: 200px;
height: 200px;
background-color: aliceblue;
display: table-cell;
text-align: center;
vertical-align: middle
}
.son{
width: 100px;
height: 100px;
background-color: #789;
}
```
5. flex 布局
```css
.father{
width: 200px;
height: 200px;
background-color: aliceblue;
display: flex;
justify-content: center;
align-items: center;
}
.son{
width: 100px;
height: 100px;
background-color: #789;
}
```
# flex 弹性布局
## 父元素属性(flex container)
* flex-direction row | row-reverse | column | column-reverse
> 主轴对齐方向
1. row: 行排布
2. row-reverse: 反向行排布
3. column: 列排布
4. column-reverse: 反向列排布
* flex-wrap newrap | wrap | wrap-reverse
1. nowrap (默认值) : 所有的 flex 项都会在同一行上排布，也就是我们常说的单行，或不换行
2. wrap: flex 项将从上到下根据实际情况排布再多行上，也就是我们常说的多行，或会换行
3. wrap-reverse: flex 项将 从下到上 根据实际情况排布再多行上折行。
* flex-flow
> flex-direction + flex-wrap
* justify-content flex-start | flex-end | flex-center | space-between | space-around | space-evenly
> 主轴对齐方式
1. flex-start (默认值) : flex 项从主轴的开始位置（main-start）开始排布
2. flex-end : flex 项从主轴的结束位置（main-end）开始排布
3. center: flex 项沿主轴居中排布
4. space-between: flex 项沿主轴均匀排布，即我们常说的沿主轴 两端对齐 ，第一个flex 项在主轴开始位置，最后一个flex 项在主轴结束位置
5. space-around: flex 项沿主轴均匀排布。要注意的是 flex 项看起来间隙是不均匀的，因为所有 flex 项两边的空间是相等的。第一项在容器边缘有一个单位的空间，但是在两个 flex 项之间有两个单位的间隙，因为每个 flex 项的两侧都有一个单位的间隙
6. space-evenly: 任何两个 flex 项之间的间距（以及到 flex 容器边缘的空间）相等。（注：该属性以前很少看到，原因是以前浏览器不支持，chrome 也是 60 版本之后才支持
* align-items
1. flex-start: flex 项按照交叉轴的开始位置（cross-start）对齐
2. flex-end: flex 项按照交叉轴的结束位置（cross-end）对齐
3. center: flex 项以交叉轴为中心，居中对齐
4. baseline: flex 项按照他们的文字基线对齐
5. stretch (默认值) : 拉伸 flex 项以填充整个容器
## flex 项属性 (flex items)
* order <number> default: 0
> 默认值 0, 小的排在前面，大的排在后面
* flex-grow <number> default: 0
> 定义了 flex 项在有可用剩余空间时拉伸比例。它接受的值作为比例，无单位。它规定了 flex 项应该占 flex 容器中可用空间的比例
> 如果所有 flex 项的 flex-grow 都设置为 1 ，则父容器中的剩余空间将平均分配给所有子项。 如果其中一个子项的值为 2 ，则该子项占用的剩余空间是其他子项的两倍
* flex-shrink <number> default: 1
> flex-shrink 定义了 flex 项的收缩的能力。（注：与 flex-grow 拉伸正好相反，flex-shrink 决定 flex 项允许收缩多少比例。）
* flex-basis <length> default: auto
> flex-basis 定义了在分配剩余空间之前 flex 项默认的大小。可以设置为某个长度值（e.g. 20%, 5rem,等）或者关键字。关键字 auto 意味着 flex 项会按照其本来的大小显示（暂时由 main-size 关键字完成，直到弃用）。关键字 content 意味着根据内容来确定大小——这个关键字到目前没有被很好地支持，所以测试起来比较困难，与content的类似的关键字还有max-content, min-content, fit-content。
* flex
> flex 是 flex-grow、flex-shrink、flex-basis 三个属性的缩写。其中第二个和第三个参数(flex-shrink 和 flex-basis)是可选的。默认值为0 1 auto
* align-self auto | flex-start | flex-end | center | baseline | stretch;
> align-self 属性允许某个单独的 flex 项覆盖默认的对齐方式（或由 align-items 指定的对齐方式）
# 优化
* 初始化 box-sizing
> 从 html 中继承 box-sizing 属性，这样的话，后期维护方便
```css
html{
box-sizing: border-box;
}
*,*:before,*:after{
box-sizing: inherit;
}
```
浙公网安备 33010602011771号