CSS常见样式-2

1.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

• text-align:center作用在行内元素上，能让行内元素和文本水平居中

2.IE 盒模型和W3C盒模型有什么区别?

20140124141001609.jpg

20140124141131218.jpg

• 通过上面两张图我们可以了解到：

  • W3C盒子模型
    width = content;
    height = content;

  • IE盒子模型
    width:margin2+border2+padding2+width;
    height:margin2+border2+padding2+height;

CSS3新增盒子模型转换：

 box-sizing:content-box(默认：W3C盒子模型)            border-box(IE盒子模型)

3.*{ box-sizing: border-box;}的作用是什么？

• CSS3新增属性，将盒子模型转换为IE盒子模型

4.line-height: 2和line-height: 200%有什么区别?

• line-height: 2表示行高为本身字体高度的两倍，line-height: 200%表示设置行高为父元素字体高度的200%高度。

5.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?

• 特性：

  • 呈现 inline 特性(不占据一整行，两个元素能在同一行展示，宽度由内容宽度决定)

  • 呈现 block 特性 (可设置宽高，内外边距)

• 去除缝隙：

去缝隙.png

• 顶端对齐：

  vertical-align: top;

6.CSS sprite 是什么?

• CSS Sprite 是一种利用 CSS 特性对网页中图片进行的特殊处理的运用方式，主要是将多张零星图片综合到一张图片中。这样做的好处是可以减少用户浏览网页时对服务器的请求数，减少服务器负载，达到优化网站的目的。
  icon的五种实现方式

7.让一个元素"看不见"有几种方式？有什么区别?

• opacity: 0 ; 透明度为0，盒子还存在，占用位置

• visibility: hidden ; 和opacity:0 盒子还存在，占用位置

• display:none; 消失，不占用位置

• background-color: rgba(0，0，0，0.2) 只是背景色透明

8.CSSsrpite

代码一
代码二

sprite图技巧

• 图片合并可以使用这个线上地址 csssprites.com54

• 在生产环境中使用的图片都需要经过压缩再使用，线上压缩图片地址 tinypng.com43

作者：饥人谷_米弥轮
链接：https://www.jianshu.com/p/19661e86550b