CSS常见样式2

2017-09-07 本文已影响0人向前冲冲的蜗牛

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

text-align:作用在行内元素上或文本上，如span，img。

能让字体居中也能让文本或行内元素位置居中

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

IE和模型是指宽度和高度是以border的宽度和高度,几种width=border+padding+content的值

标准的盒模型是指宽度和高度以content的高度和宽度 width=content的值。

一般不加<! doctype html>即使用IE盒模型，如果加了<!doctype html>则使用标准模型

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

对于css3中，为了使用方便，出现了 box-sizing属性，以适应不同盒模型的使用。

如果 box-sizing:content-box则是标准盒模型，如果是box-sizing:border-box则是IE盒模型。像一行为了显示三个div，为了方便使用，可以设置为使用IE盒模型，这样就不用在计算width以及padding了。

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

line-height:2是其行高是文字高度的2倍数。

line-height：200%是其父元素高度的两倍。

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

inline-block呈现inline特性（不占据一行，宽度由内容宽度决定）

又呈现block特性（可设置宽高，内外边距）

inline-block之间会出现间隙，出现间隙的问题是由于标签之间的空白所导致（图一)。

图1

常用的的解决办法如下（图二)：：

图2

高度不一样的inline-block元素会出现的问题(图三)：

图三

解决办法就是用：vertical-align：top或者vertical-align：bottom（图四）

图四

https://jsbin.com/gurobu/edit?html,css,output

CSS sprite 是什么?

指将不同的图片/图标合并到一张图片上。

使用css sprite可以减少网络请求，提高网页加载性能

缺点是：无法缩放，不好修改

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

opacity:0 透明度为0 占据位置

visibility：hidden 占据位置

display:none;不占据位置

background-color：rgba(0,0,0,0.2) 背景色为透明。占据位置

代码：

https://jsbin.com/welaxuf/edit?html,css,output

代码2：

图2

效果图

图三