CSS常见样式-2

关键词:
1 text-align: center的作用
** 2 IE 盒模型和W3C盒模型**
3 box-sizing: border-box
**4 line-height: 2和line-height: 200% **
**5 inline-block特性 **
**6 CSS sprite **
**7 怎么让一个元素"看不见" **

---

1.text-align:

• center的作用是什么?-作用在什么元素上？ 能让什么元素水平居中?
  text-align 属性规定元素中的文本的水平对齐方式
  center:文本水平居中

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

IE 盒模型:width/height = content(内容)的宽/高 + padding + border的值

W3C盒模型:width/height =content(内容) 宽/高.只包含内容
比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;

Paste_Image.png

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

:采取IE模型来计算
width = border + padding + 内容的 width，
height = border + padding + 内容的 height。

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

line-height: 2 :设为元素本身字体大小的2倍

line-height: 200% : 设为其父元素字体大小的2倍

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

: 有inline和block的特性, 不独占一行
可以设置高度,宽度,padding,margin.

Paste_Image.png

---

去除缝隙
1.把第一个闭合标签比如</span>和第二个开头标签放一起<span>
例如
<span>内容1</span><span>
内容2</span>

2.将父元素的font-size:0; 这一步会消灭空格; 再设自己的font-size:12px;
如下图

Paste_Image.png

6.CSS sprite 是什么?

：又称CSS精灵图，国内英盲称为雪碧图,即将不同的图片／图标合并到一张图上.
使用:改变一张集合多图的大图的位移来显示一部分的图片.positon属性的 x y坐标的px值.
作用：减少网络请求，提高网页加载性能.

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

1.opacity: 0; 将元素整体透明度设置为0; 占据页面空间
2.visibility: hidden;占据页面空间
3.display:none; 不占据页面空间
4.background-color: rgba(0, 0, 0, 0); 将背景色透明度设置为0