CSS常用技巧

• CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
  • CSS Sprite指的是包含许多不同的图标、按钮或图形的单个图像。
  • 使用CSS Sprite可以减少Web浏览器发出的服务器请求，显著加快下载速度。
  • 使用CSS Sprite把所有按钮、图标和各种图形集中在一个地方可以提高可维护性。
  • 从技术角度上简单的说就是一个图片的显示就需要向服务器发送一次请求，每发送一次请求就会和服务器链接一次，建立链接花费了额外的时间，当使用了CSS Sprite技术时，在总图片不变的情况下减少请求数达到优化。
• 应用场景
  1 静态图片，不随用户信息的变化而变化。
  2 小图片，图片大小比较小。
  3 加载量比较大。
• 一些大图片不建议使用CSS Sprite
• img标签和CSS背景使用图片在使用场景上有何区别
  • img标签是html标签表示从网页上链接图像，img标签是html结构的一部分，img 会在加载结构时进行加载。
  • img标签的alt属性可以被搜索引擎关注，可读性比background-img高。
  • background-img是CSS的一个样式，样式只有在结构和内容加载完成后才开始加载。
  • 有的网站会禁用css样式，那么比较重要的图片使用img标签就会更保险，如logo。
  • 应用的准则：
    1 如果一张图片是网页内容的一部分，就该用 img标签，否则就建议用 CSS 背景图。（比如网站的logo使用img标签）
    2 background-img常用在页面上的icon，或者当需要图像代替文本时。
• title 和 alt属性分别有什么作用

  • alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本。

  • title：是个全局属性，提供元素的描述(比如鼠标滑过图片时显示的文本)。

  • alt属性在web上非常必要的，因为无法确定用户在使用什么浏览器和设备或者在网速极慢的环境下来查看页面。在这些不确定性下使用alt属性，可以使浏览器为用户提供一些指示，告诉他们图像里有什么信息。

    

    一个logo图片没有显示

• background: url(abc.png) 0 0 no-repeat;这句话是什么意思
• 使用abc.png做为背景图，位于元素的x，y轴坐标0 0的位置即左上角，并且不进行x，y轴上下平铺。
• background-size有什么作用? 兼容性如何? 常用的值是?

• background-size可以设置和缩放背景图像的尺寸。

  
  
  

  background-size兼容性

常用值	效果说明
length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
auto	以背景图片的比例缩放背景图片

/* 关键字 */
background-size: cover//块元素完全被背景图覆盖，超出的多余部分不显示
background-size: contain//背景图完全显示在块元素内

cover效果

contain效果

/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 两个值: 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/* 逗号分隔的多个值：设置多重背景 /
background-size: auto, auto / 不同于background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

多重背景

多重背景

background-size: inherit

inherit属性继承父元素的bg-size

在多重背景的设置上，background-size:length, length;与background-size: inherit；不可混用。

• 当背景图设置的顺序不同时背景图会出现覆盖的情况

  
  
  

  背景图覆盖
  
  
  

  背景图覆盖1

• 利用背景图覆盖做一个图标（你可以继续用这种方式给背景上增加如气泡、标语等元素）

  
  
  

  利用多重样式做一个图标

• 把要做你想做背景的图放在最后一个，其他小元素放在背景之前

  
  
  

  给背景增加其他元素

简写形式

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

• 如何让一个div水平居中？如何让图片水平居中
• 单个块元素水平居中

margin:0 auto;

• 利用定位属性与外边距使块元素垂直水平居中

.warp {
  width:500px;
  height:500px;
  border:1px solid;
  position:relative;
}
.div1 {
  width:200px;
  height:200px;
  background-color:black;
  position:absolute;
  left:50%;
  top:50%;
  margin: -100px -100px;
}

使用定位

• 利用inline-block使块元素水平垂直居中

.warp {
  width:500px;
  height:500px;
  border:1px solid;
  display:table-cell;
  text-align:center;
  vertical-align: middle;
}
.div1 {
  width:200px;
  height:200px;
  background-color:black;
  display: inline-block;
}

使用inline-block

• 多个块元素水平居中

  
  
  

  Paste_Image.png

• 多个块元素在一排水平居中

  
  
  

  Paste_Image.png
• 图片水平居中

text-align: center;

图片水平居中

• 图片垂直居中

添加display: table-cell; vertical-align: middle;

图片垂直居中

• 如何设置元素透明? 兼容性？

• RGBA：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

  
  
  

  RGBA兼容性

• opacity：opacity属性指定了一个元素的透明度。

• IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明

opacity:0.4;
filter:alpha(opacity=40);/* 兼容IE8 */

opacity兼容性

• opacity 和 rgba都能设置透明，有什么区别

• opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承。

  
  
  

  继承性的区别

本博客版权归 本人和饥人谷所有，转载需说明来源