# 具体样式

# 隐藏

# 显示隐藏

.container {
  /* 隐藏元素，且脱离文档流，不在占有原来的位置；配合JS能做很多的网页特效(不会渲染) */
  display: none;
  /* 隐藏显示，不脱离文档流，保留原来的文字；(渲染但不显示) */
  visibility: hidden;
}

# 溢出隐藏

.container {
  overflow: visible;
  /* 默认情况，溢出部分显示; */
  overflow: hidden;
  /* 溢出部分隐藏，慎用； */
  overflow: scroll;
  /* 自带上下滚动条和左右滚动条 */
  overflow: auto;
  /* 溢出时，自动显示上下滚动条 */
}

# 背景

# 背景属性

background-color：rgb(red,green,blue);  设置背景颜色
background-image: url("./") ;设置背景图片
background-image: linear-gradient(x% rgba1, y% rgba2, z% rgba3);设置背景渐变
background-size:width | height | cover |contain;设置背景图片大小,可设置%,取容器的宽度
background-repeat: no-repeat/repeat/repeat-x/repeat-y;设置图片重复
background-position: top center;设置背景的位置，默认左上角定格。
background-attachment : scroll | fixed; 背景图像随对象内容滚动|背景图像固定

/* 简写 */
background: transparent url(image.jpg) repeat-y scroll center top;

# 透明属性

/* num从 0到 1; 注意此项属性会继承，导致子元素透明。 */
/* opacity 直译为不透明都，0 是完全透明 1是完全不透明  */
opacity: num;

# 文字

# 文字颜色

/* Alpha是文字的透明度，范围：0~1 */
color: rgba(red, green, blue, alpha);
/* Hex 最后两位表示透明度  */
color: #409eff;
color: #409eff77;

# 文字属性

font-size: <length>;
/* 字的大小 */
font-family: Microsoft Yahei;
/* 字体 */
font-style: normal italic;
/* 风格 */
font-weight: normal | bold | <number>;
/* 字重 */

# 文本属性

text-aligin: left | center | right;
/* 对齐方式 */
text-indent: -9999px;
/* 首行缩进 */
text-decoration: none | underline | overline | line-through;
/* 文字装饰 */
text-shadow: | 水平位置| 垂直位置 | 模糊距离 | 阴影颜色 |;
/* 文字阴影 */
/* 凹凸文字：凸：左上白右下黑 凹：左上黑右下白*/

line-height: 100%;
/* 行高 */
letter-spacing: 0;
/* 字间距 */
word-spacing: 0;
/* 词间距 */
white-space: ;
/* 空白是否换行 */

# 常见问题

# 鼠标样式

cursor: default|pointer |move |text|no-drop;
/* 指针|小手|十字箭头|文本|禁止|; */

# 输入框轮廓线

outline: none;
/* 取消输入框的蓝色边框 */

# 文字垂直对齐的问题

/* vertical-align 垂直对齐，它只针对于**行内元素**或者**行内块元素** */
vertical-align: baseline |top |middle |bottom;
/* 对齐文字基线 | 对齐顶部 | 对齐中间 | 对齐底部 */

# 去除图片底侧空白缝隙

图片或者表单等行内块元素的底线会和父级盒子的基线对齐，导致图片底侧会有一个空白缝隙

/*设置对齐，只要不是baseline即可*/
img.vertical-middle {
    vertical-align:middle | top | bottom
}
/*设置为块级元素*/
img.display-block{
     display：block;
}

# 让浮动元素的边框合并

/* 使用负的margin值来合并边框 */
div {
  float: left;
  border: 1px solid;
  margin-left: -1px;
}

# 取消文本域的拖拽

/*   取消文本域的拖拽； */
resize: none;

# 文本溢出时显示省略号

/* 单行文本溢出显示省略号 */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 多行文本溢出显示省略号 */
.text-ellipsis-clamp {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@for $i from 3 to 4 {
  .text-over-clamp-#{$i} {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: $i;
    -webkit-line-clamp: $i;
    -webkit-box-orient: vertical;
  }
}

# 调整滚动条的样式

::-webkit-scrollbar {
}
::-webkit-scrollbar-thumb {
}
::-webkit-scrollbar-thumb:active {
}
::-webkit-scrollbar-track {
}

# 优化技术

# 精灵技术

精灵图又称雪碧图，最早在游戏机上使用，把重复的和可组合成生的一组图像用一个图像文件来存储

在 Web 开发中，把多个小图标集成在一张图片上，减少网络请求次数，提高网页体验；

优点：减少加载网页图片时对服务器的请求次数
缺点；繁琐
适用：图标

# Base64

一种文本格式，显示的是一串文本，而这串文本就是图片本身。

优点：提高传输性能，减少 HTTP 请求
缺点：增大了体积的开销，增加了解码的开销
适用：小图标，例如：Loading 图
用法：一般用在构建中转，打包，比如webpack中的image-loader

# 点九图

点九图是 Andriod 平台的应用软件开发里的一种特殊的图片形式，文件扩展名为：.9.png。

其实相当于把一张 PNG 图分成了 9 个部分（九宫格），分别为 4 个角，4 条边，以及一个中间区域。

四周保持不同，中间区域根据内容伸缩。

← 盒模型新特性 →