20161206作业

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

答： 作用是设置内容在容器的水平方向上居中。作用在块级元素上（text-align: center; 这一属性要设置在块级元素上才能起作用，设置在行内和行内块中都不会起作用的。）。能让行内元素和行内块元素的内容水平居中。

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

答：　

w3c盒子模型 IE盒子模型

网页中的盒子模型，我们常常要控制盒子模型的宽度width：
w3c中盒子模型的宽包括margin+border+padding+width;
width: margin2+border2+padding2+width;
height: margin2+border2+padding2+height;
IE中的盒子模型的width：也包括margin+border+padding+width;
上面的两个宽度相加的属性是一样的。不过在ie中的宽度包括padding和border这两个属性；
例如：一个盒子模型如下：margin： 20px,border: 10px, width: 20px; height: 50px;
如果用w3c盒子模型解释，那么这个盒子模型占用的
宽度为： 202+102+102+200=280px;
高度为：202+102+202+50=130px;
盒子的实际宽度大小为： 102+102+200=240px;
实际高度：102+102+50=90px;
用ie的盒子模型解释： 盒子在网页中占据的大小为202+200=240px; 高：202+50=90px;
盒子的实际大小为：宽度：　２００ｐｘ , 高度： 50px;

我们经常理解的盒子模型是w3c这样的盒子模型！

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

答： 页面上所有元素的盒模型按照IE盒模型的宽高计算方式来计算。

四、写一个 btn 的class， 任何 a，span,div,button 添加此class后后变成如下按钮的样式(鼠标hover背景色#c14d21, 鼠标按下背景色#e25f31)

代码预览

效果显示

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

inline-block特性及如何去除缝隙

六、CSS sprite 是什么?

精灵图简单了解

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

1.overflow: hidden; //将超出的部分裁剪掉了。（被裁减掉的部分在页面上不占据位置）

原图 裁剪掉了

2.visibility: hidden; //可以将元素隐藏，但是在页面上还保留着原来的位置。

Paste_Image.png

3.display: none;（与display: block; 是一对反义词） //可以将元素隐藏，并且在页面上不占据位置。

Paste_Image.png

4.background-color: rgba(0,0,0,0);：背景透明，rgba中的a对应的数值为0~1，越小透明度越高；

5.opacity属性的取值范围是0~1，取值越小越透明，当值为0时，元素完全透明（整体）。

6.font-size:0; 会把元素包含的文本文字隐藏看不见；

文章著作权归饥人谷_sunny和饥人谷所有，转载须说明来源