1.text-align:center;的作用是什么?作用在什么元素上,能让什么元素居中。
text-align:center 是设置在块状元素中,能让内联子元素居中。对于块状元素下的块状子元素无效。
2.IE盒模型和W3C盒模型有什么区别?
IE盒模型的内容=width(height)+padding+border
W3C盒模型的内容=width(height)
3.*{box-sizing:border-box;}的作用?
通用选择器,块状元素采用IE盒模型。
4.line-height:2 和line-height:200%有什么区别?
子元素没有设置行高,子元素才会继承设置的父元素的行高。
line-height:2 表示的是自身文本高度的2倍,继承的时候会直接继承为2倍。
line-height:200% 表示的是父元素文本大小的2倍,继承时可以理解为先计算父元素字体大小2倍的高度为多少px,然后直接传递的是px。
5.inline-block有什么特性?如何去除缝隙?高度不一样的inline-block可以怎样对齐?
- inline-block的特性:
inline-block既有块状元素的特性,可以设置width,height,padding,marging等其他块状元素特性,又有行内元素的特性,可以水平排列,不会独占一行。
-
如何去除缝隙?
写html的时候,两个inline-block的标签中间不要有缝隙。
加一个块元素包裹,并且设置块元素的font-size:0;此处应注意font-size会继承的。
6.CSS sprite
css sprite是将很多小的图标合成到一张大图上,通过调整“视窗”大小及图片的位置来展示同一张图片上不同的icon。能实现这种效果的方法大概有
img 优点:可以任意放大缩小,兼容性好。缺点:请求过多(本就是为了避开用img)
-
sprite
icon font 使用css:before因为选择器本身,兼容性不好。
- CSS画
- SVG
这么做的原因是因为,每加载一张不同的图片都会发送一个http请求,虽然对客户端浏览器影响不大,但是过多请求会造成服务端线程增多,压力变大,对于用户来说流量野增加。
7.让一个元素“消失”的办法。
opacity: 0 ; 透明度为0,整体
visibility: hidden; 和opacity:0 类似
display:none; 消失,不占用位置
background-color: rgba(0,0,0,0)只是背景色透明