1.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
- 作用:让块级元素内部内容水平居中,也就是文字、图片和行内元素,对块级元素设置,并不能让块级元素居中。同时,text-align具有继承性,其下的子块级元素也会继承,但子块级元素并不会居中,而是它内部的文字和图片。
2.IE 盒模型和W3C盒模型有什么区别?
区别
- 对标准盒模型设置width和height时,指的是content的宽高;对于IE盒模型,width和height要加上padding和border
- IE6/7/8在不添加doctype的情况下即(怪异模式)会使用IE盒模型;IE6、7、8在添加doctype的情况下,IE9以上和chrome使用w3c盒模型
3.*{ box-sizing: border-box;}的作用是什么?
这是CSS3的新样式,表示使用IE盒模型
4.line-height: 2和line-height: 200%有什么区别?
-
line-height: 2
:表示行高是当前文字高度的两倍 -
line-height:200%
:相对于行高是父容器字体的两倍
5.inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
-
inline-block特性
- 既呈现 inline 特性(不占据一整行,宽度由内容宽度决定)
- 又呈现 block 特性 (可设置宽高,内外边距)
去除缝隙
缝隙的产生是因为两个元素之间有回车,这会被当做空白字符,将其删除即可
-
将回车这个空白符当做一个字符,将其字体大小设置为0
inline-block以文字底部基线对其,当两个inline-block高度不同时,若要两个元素顶端对其,设置vertical-align:top可实现
6.CSS sprite 是什么?
- CSS sprite:CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。
- CSS sprite原理:CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。
7.让一个元素"看不见"有几种方式?有什么区别?
-
opacity: 0 ;
透明度为0,对选中元素进行整体的透明度设置,取值可从0(完全透明)到1.0(不透明),元素仍占据空间 -
visibility: hidden ;
和opacity:0
类似,也是对选中元素的整体进行透明度设置,元素仍占据空间 -
display:none;
直接让元素消失,不占用位置 -
background-color: rgba(0,0,0,0.2)
只是针对背景色透明