-css杂

---

• (1)设置logo:

 用一个<a href="#"><img src="" alt=""></a>
 对于可能有下载需求的图片，都用img来实现

• (2)css中颜色命名方法：

 命名颜色：color:gray;
 RGB颜色：color:rgb(0,125,246);
 十六进制颜色：color:#cccccc;
 短十六进制颜色：color:#fff;

• (3)子元素选择器：> 选择元素的直接的目标子元素，不是选择所有的子元素

 <ul>
   <a>1</a>
   <li><a>2</a></li>
   <li><a>3</a></li>
 </ul>  // ul>a即选的1

• (3)相邻同胞选择器：+ 选择元素后面有同一父元素的兄弟元素

 <ul>
   <a>1</a>
   <li class="firstli"><a>2</a></li>
   <li><a>3</a></li>
 </ul>  // .firstli+li即选的3

• (4)letter-spacing属性 ： 调整字体之间的距离

p {
letter-spacing:2px;
}

• (5)line-height属性：设置行高

• (6)a 伪类设置顺序，未后悬按 link（未点击），visited（点击之后），hover（悬停），active（按下）

• (7)min-width: 设置元素的最小宽度

• (8)修改placeholder的颜色：由于placeholder的颜色不能由input修改，所以需要用下面代码。

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: green;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: green;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
 color: green;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: green;
}
/* 但是 用这种方法是将input和textarea所有的都修改 */
/* 如果只修改input的颜色，则在前面加上input，如： */
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: green;
}

• (9)用position使元素水平垂直居中: 元素在绝对定位以后,left/rigth和top/bottom是没有优先等级的，不像margin-left作用的时候margin-right没用，那么现在left:0,right:0,两方实力相当，浏览器没办法，都得满足，那就水平居中吧，而绝对定位元素默认top是0.现在margin:20px，那就是把自己往下移动20px。严格来说移动25px才真正的垂直居中

.element {
    width: 200px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;/*这行代码是关键*/
}

• (10)内联元素设置宽高、边距：内联元素设置宽高是无效的，设置margin的上下是无效的(左右可以)，设置padding4个值都是可以的
• (11)background-position属性：如果仅规定了一个关键词，第二个默认为center

    值 关键词:top left right center bottom；
    // 用关键字定位时，left就是图像左边对应着元素左边，center
    // 就是图像50%对应着元素50%，right就是图像右边对应着元素右边
    
    百分数: x% y%；
    // 用百分数定位时，元素百分比那个点对着图像百分比的那个点
     如 background-position: 50% 50%;
    // 将图像上距离左上角50%的点，定位到父元素上距离左上角50%的点，这个实例，实质上为图像居中
    
    像素: xpos ypos；// 用像素定位时，是相对于父元素左上角的点进行定位

    计算公式为：top_percent = 子盒子顶部距父盒子顶部的距离 / （父盒子高度-子盒子高度）

• (12)修改页面右侧滚动条样式：

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动（取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有thumb）
::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调小方块的位置
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，及两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar
{
    width: 8px; /*滚动条宽度*/
    height: 8px; /*滚动条高度*/
    background-color: transparent;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow: none;
    border-radius: 10px; /*滚动条的背景区域的圆角*/
    background-color: transparent; /*滚动条的背景颜色*/  
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius: 10px;  /*滚动条的圆角*/
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: rgba(163,157,157,0.8);   /*滚动条的背景颜色*/
}

/*设置一个元素后面的 scrollbar; 前面为一个类名*/
.scroll-bar::-webkit-scrollbar-thumb
{
    border-radius: 10px;  /*滚动条的圆角*/
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: rgba(163,157,157,0.8);   /*滚动条的背景颜色*/
}

.task-container::-webkit-scrollbar {
  width: 6px;
}
.task-container::-webkit-scrollbar-track {
  box-shadow: none;
}
.task-container::-webkit-scrollbar-thumb {
  background-color: rgba(31, 35, 41, 0.3);
}

.task-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(31, 35, 41, 0.6);
}

二、JPG、PNG、GIF区别

(1) jpg/jpeg:

• 优点: 体积比png小,打开速度比png快

• 缺点:属于有损压缩，不能显示透明像素，每次保存都会产生数据损失(jpeg artifacts), 故不适合用于多次编辑保存。压缩率过高图像会失真

• PS:网络上最最常见的格式，也是静态图片(不只是照片)就常用的保存格式,就算是同一小组开发的jp2(相当于jpg第2代)也无法取代它。一般如果肉眼无法识别与png的差别和没有特殊要求就用jpg.

(2)png:

• 优点:无损压缩，有透明选项，压缩效率高于bmp

• 缺点:一般体积比同尺寸的90%压缩率的jpg要大很多(通常是5倍以上),但人眼很难识别其中的区别

• PS:最常见的无损压缩图片格式,如果是经常对某图片进行编辑保存,要求图片数据100%完整,或需要透明效果(给PS当素材或用作图标等)则推荐使用

(3)gif:

• GIF是无损的，一般只作为动态图像格式使用，正在被google的webm格式取代中=。= 好吧感觉gif真没啥可说的，要不是因为有动态效果谁会用这破玩意。。。

(4)BMP:

• BMP格式是Windows电脑系统的标准图片格式，同样也可适用于OS/2系统。BMP格式的图片文件内存较大，未经过压缩，保存了每个像素的信息

(5)TIFF/TIF:

• TIF格式是一种跨平台的图片格式，可同时支持Windows和Mac系统的操作。TIF格式可以在保证图片不失真的情况下压缩，且保留图片的分层或是透明信息

(6)WMF:

• 由于其图文合一的特殊性，WMF格式的图片大多比较粗糙，却也因为其图文合一的特殊性，WMF格式广泛用于Word内部储存图片，无论放大还是缩小，其图片质量都不会有变化

(7)PSD/EPS:

• PSD格式是Adobe制图软件PhotoShop的专属图片格式。EPS格式专属于Adobe的Illustrator矢量制图软件