flex布局被撑大

使用 flex 布局，子内容设置 flex-1 后内容过长容器会被撑开。

解决方案：

设置 flex-1 后，将宽度/高度设置为 0，将布局完全交给 flex 布局解决此问题。

锚点定位scrollIntoView

scrollIntoView()是 HTML 元素的一个方法，假如我们有一个元素容器出现了滚动条，有滚动条必然就有一些元素是不可见的，为了让隐藏的元素可见，我们可以手动滚动滚动条，让元素出现，另一种方法就是调用隐藏元素的 scrollIntoView 方法，让它自动滚动到可视区内。

element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean 型参数
element.scrollIntoView(scrollIntoViewOptions); // Object 型参数

• alignToTop: 它是一个 Boolean 值，它用来规定元素出现在可视区后与可视区的对齐方式，为 true 代表顶端对齐，false 代表低端对齐。
• scrollIntoViewOptions: 它是一个对象，该参数主要是配置元素的动画效果以及位置的，它有一下 3 个属性：
• behavior: 它定义元素出现在可视区内过程的动画，有 auto 和 smooth 两种选择。
• block: 定义元素的垂直方向的对齐方式，有"start", "center", "end", 或 "nearest" 4 个选项，默认 start。
• inline: 定义元素水平对齐方式，有"start", "center", "end", 或 "nearest"4 个选项，默认"nearest"。

文本溢出单行&多行溢出显示省略号

单行溢出

单行文本css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分

<div class="ellipsis">
  单行文本css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分
</div>
<style>
  .ellipsis{
    width: 100px;
    display: block;          // 必须为块级样式
    overflow: hidden;        // 溢出隐藏
    text-overflow: ellipsis; // 文本溢出显示省略号
    white-space: nowrap;     // 文本不会换行
  }
</style>

多行溢出

多行文本css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分

<div class="mult_line_ellipsis">
  多行文本css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分
</div>
<style>
  .mult_line_ellipsis{
    width: 100px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
</style>

Css修改滚动条样式

::-webkit-scrollbar {
    width: 5px;
    /*height: 4px;*/
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #bdbdbd;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);

}
/* 说明 */
/*
::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track  外层轨道
::-webkit-scrollbar-track-piece  内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
*/

css实现瀑布流

使用多列布局(multi-column)

常用属性：

• column-count: 属性设置列的具体个数
• column-width: 属性控制列的宽度
• column-gap: 两列之间的缝隙间隔
• column-rule: 规定列之间的宽度、样式和颜色
• column-span: 规定元素应横跨多少列(n:指定跨n列 all:跨所有列）

Css文字两端对齐

第一种方式，justify对最后一行无效，所以新增一行数据，有个高度问题需要给.item设置height解决

.item{
  text-align: justify;
}
.item::after {
  content: "";
  display: inline-block;
  width: 100%;
}

第一种方式

第二种方式，使用新的属性text-align-last解决，所有新属性都有的兼容性问题

.item{
  text-align: justify;
  text-align-last: justify;
}

第二种方式

取消checkbox和radio的原生样式

-webkit-appearance: none;
outline: none;

-webkit-line-clamp

可以把 块容器 中的内容限制为指定的行数。并且在超过行数后，在最后一行显示”…”

display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/
-webkit-box-orient: vertical; /*值必须为vertical*/
-webkit-line-clamp: 2; /*值为数字，表示一共显示几行*/
overflow: hidden;

all

将除却 unicode-bidi 与 direction 之外的所有属性重设至其初始值，或继承值。

all: unset; /*initial | inherit | unset*/

• initial 改变该元素所有属性的值至初始值。
• inherit 改变该元素的值 至 从父元素继承的值
• unset 如果该元素的属性的值是可继承的，重置为父元素的继承的值，反之则改变为初始值。

caret-color

用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。

caret-color: red;

使用纯CSS实现大于号小于号关闭X样式

实现原理： 设置元素的边框线和旋转元素。

.gt{    //大于号>
  width: 10px;
  height: 10px;
  border-left: 1px solid red;
  border-bottom: 1px solid red;
  transform: translate(0,-50%) rotate(-135deg);
}
.lt{    //小于号<
  width: 10px;
  height: 10px;
  border-left: 1px solid red;
  border-bottom: 1px solid red;
  transform: translate(0,-50%) rotate(45deg);
}
.close{ //关闭按钮x
  position:relative;
  width:1px;
  height:15px;
  background: red;
  transform: rotate(45deg);
  display: inline-block;
}
.close:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width:1px;
  height:15px;
  background: red;
  transform: rotate(270deg);
}

<div class="gt"></div>

<div class="lt"></div>

<div class="lt"></div>