问答####
1- text-align:center的作用是实现元素内部文字的居中。
text-align:center的意思是块级元素中的行内内容居中。
作用在block-level元素上(包括了block和inline-block);
能让block-level的元素中的行内元素,替换元素和inline-block元素居中。
2- IE盒模型和W3C盒模型的区别:
IE盒模型:width=内容宽度+边框+内边距
W3C盒模型:width=内容宽度
W3C标准中padding、border所占的空间不在width、height范围内,大家俗称的IE的盒模型width包括content尺寸+padding+border
3- *{box-sizing:border-sizing;}
的作用是设置"IE盒模型",即设置:
宽度=边框+内边距+内容宽度
4- line-height:2 和line-height:200%有区别
line-height:2设置行高为当前字号的2倍;line-height:200%设置行高为默认字号(即html默认字体字号)的2倍。
继承性的区别:有单位时,子元素继承了父元素计算得出的行距;无单位时继承了系数,子元素会分别计算各自行距(推荐使用)。
5- line-block特性:
既呈现 inline 特性(不占据一整行,宽度由内容宽度决定)
又呈现 block 特性 (可设置宽高,内外边距)
缝隙问题
:给父元素设置font-size:0,然后行标签font-size设置为需要的值即可去除行级元素之间的缝隙。
高度不一样的inline-block元素顶端对齐可以用vertical-align:top来实现。
6- icon是页面小图标的实现方式,目前主要有以下几种方式:
①img方式②CSS sprite方式③icon font方式④css icon方式⑤SVG方式
其中,CSS sprite又称CSS精灵图,
指将不同的图片/图标合并在一张图上。
使用CSS Sprite 可以减少网络请求,提高网页加载性能
实现方法:
首先将小图片整合到一张大的图片上;
然后根据具体图标在大图上的位置,给背景定位。background-position:-8px -95px;
7- 让一个元素看不见有几种方式
①opacity:0;透明度为0,整体(opacity后代元素会随着一起具有透明性,Opacity中的字随着透明值下降越来越看不清楚)
②visibility:hidden;和opacity:0类似。
③display:none;元素消失,不占位置。
④backgroune-color:rgba(0,0,0,0.2)只是背景色透明度,对于子元素没有影响。
计算标准:line-height: 2根据自身元素的字体大小来计算,line-height: 200%根据父元素的字体大小来计算。
继承:line-height: 2继承给子元素的是2这个缩放因子,line-height: 200%继承给子元素的是200%计算后的值。
代码##
1- 使用 CSSsrpite 实现如下效果:http://js.jirengu.com/nafejopedu/1/edit?html,css,output
2-在iconfont上搜索"饥人谷"316, 使用字体图标实现代码1中的效果:
http://js.jirengu.com/paqoceriwa/2/edit