# 具体样式
# 隐藏
# 显示隐藏
.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 条边,以及一个中间区域。
四周保持不同,中间区域根据内容伸缩。