text-align: center
的作用是什么,作用在什么元素上?能让什么元素水平居中##
text-align作为HTML元素属性其主要是用来文本水平居中的。text-align属性定义行内内容(例如文字)如何相对它的块父元素对齐,它并不控制块元素自身的对齐,只控制块元素行内内容的对齐。
- text-align:center的意思是块级元素中的行内内容居中。
- 作用在block-level元素上(包括了block和inline-block);
- 能让block-level的元素中的行内元素,替换元素和inline-block元素居中。
IE 盒模型和W3C盒模型有什么区别?##
W3C盒模型中的padding
,border
所占的空间不在width
,height
计算范围之内,而IE盒模型width
包含content
尺寸+padding
+border
。
*{ box-sizing: border-box;}
的作用是什么?##
此元素的内边距和边框不再会增加它的宽度,宽度、高度=content
尺寸+padding
+border
,实现类似于IE盒模型的功能。
line-height: 2
和line-height: 200%
有什么区别?##
line-height: 2
表示行高是其本身文字高度的2倍;
line-height: 200%
表示其父元素文字高度的2倍;
line-height:2
在继承关系中页面所有元素都会以自身文字高度2倍进行继承;
line-height:200%
在继承关系中会先计算具体的行高,页面元素继承计算后得到的行高;
inline-block
有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?##
特性
既呈现inline特性(不占据一整行,宽度由内容宽度决定),又呈现block特性(可以设置宽高,内外边距),可以设置他text-align
属性,可以用vertical-align
设置垂直对齐。
去除缝隙
在源代码中删除空白字符
在其父元素或祖先元素中设置font-size:0;
然后再设置其自己需要的字号
顶端对齐
样式设置为vertical-align:top;
CSS sprite 是什么?##
CSS Sprites,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,再利用CSS的“background-image”
,“background- repeat”
,“background-position”
的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。CSS Sprites能减少图片的字节,能很好地减少网页的http请求,从而大大的提高页面的性能。缺点就是无法缩放,不好修改。
让一个元素"看不见"有几种方式?有什么区别?##
- opacity:0 整体透明度为0
- visibility:hidden;和opacit类似
- display:none;消失,不占位置
- background-color:rgba(0,0,0,0)背景色透明