text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
text-align: center作用在块级元素上,可以使块内元素的文字、图片、和行内元素水平居中。但不能使块级元素居中。
注意text-align是可继承元素,所以此块级元素的子元素如果是块级元素会继承它的text-align属性。
IE 盒模型和W3C盒模型有什么区别?
W3C标准中padding、border所占的空间不在width、height范围内,大家俗称的IE的盒模型width包括content尺寸+padding+border
*{ box-sizing: border-box;}的作用是什么?
css3新样式box-sizing,box-sizing: border-box:“IE盒模型”,设置的边框包括内容,内边距,边框。
line-height: 2和line-height: 200%有什么区别?
- 使用line-height设置单行文本的行高,line-height属性可以继承,设置height = line-height 来垂直居中单行文本
- line-height: 2 是指行高是本身文字高度的2倍 给父元素设置 line-height:Number 之后 这个属性会直接继承给后代元素 后代元素根据自身文字高度去计算行高
- line-height: 200% 是指行高是父容器文字高度的2倍 给父元素设置line-height:百分比 之后 浏览器会立刻计算出这个值 然后把这个值继承给后代元素 例如 给body设置line-height: 200% 浏览器默认文字大小16px 那行高就是32px 后代元素继承的行高就是32px这个值
inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
- 既呈现 inline 特性(不占据一整行,宽度由内容宽度决定)
又呈现 block 特性 (可设置宽高,内外边距)
存在缝隙问题:是由于两行之间有很多空白字符,浏览器都会当作一个文字。 - 两段span中间的空隙去掉变成一行,不要留出空白字符或者设置父容器的font-size:0; 然后span子容器再设置font-size数值
- inline元素默认是文字的下基线对齐,设置vertical-align:top;设置顶端对齐,vertical-align适用于行内元素和表格。
CSS sprite 是什么?
- 指将不同的图片/图标合并在一张图上。
- 使用CSS Sprite 可以减少网络请求,提高网页加载性能。
让一个元素"看不见"有几种方式?有什么区别?
opacity: 0 ; 透明度为0,整体
visibility: hidden ; 和opacity:0 类似
display:none; 消失,不占用位置
background-color: rgba(0,0,0,0) 只是背景色透明
代码
使用 CSSsrpite 实现如下效果http://js.jirengu.com/yeza
代码如下:http://js.jirengu.com/yedin/1/edit?html,css,output
在iconfont上搜索"饥人谷"304, 使用字体图标实现代码1中的效果
代码如下:http://js.jirengu.com/sove/1/edit?html,css,output