一、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和饥人谷所有，转载须说明来源
网友评论