text-align: center
的作用是什么,作用在什么元素上?能让什么元素水平居中?
用于行内元素水平居中。
IE 盒模型和W3C盒模型有什么区别?
IE盒模型:设置宽(高)时,内容宽(高)+padding+border=width(height)
W3C盒模型:设置宽(高)时,内容宽(高)=width(height)
*{ box-sizing: border-box;}
的作用是什么?
box-sizing: content-box;
:W3C标准盒模型。
box-sizing: border-box;
:"IE盒模型",设置padding和border时不会额外增加宽高。
line-height: 2;
和line-height: 200%;
有什么区别?
line-height: 2;
:相对于自身字体大小的两倍。不会出现字体重叠。
line-height: 200%;
:相对于父元素字体大小的两倍。可能会出现字体重叠。
inline-block
有什么特性?如何去除缝隙?高度不一样的inline-block
元素如何顶端对齐?
设置了inline-block后,该元素不会独占一行,但是又可以设置元素宽高、内外边距。
去除缝隙:
两个设置了inline-block的元素间去掉空白符如回车和空格。即可去掉两个元素间的间隙。但是去除回车后代码的阅读性下降了。所以可以通过一下几种方式即消除:
- 父元素设置:font-size: 0;再在设置了inline-block的元素新设置一个font-size。
- 使用注释
<div>1</div><!--
--><div>2</div><!--
--><div>3</div>
- 标签换行
<div>1</div
><div>2</div
><div>3</div>
inline-block
顶端、基线、中心线对齐:
vertical-align: top;
:顶端对齐。
vertical-align: bottom;
:基线对齐。
vertical-align: meddle;
: 中心线(垂直居中)对齐。
CSS sprite 是什么?
CSS sprite也称为雪碧图,将一个页面中多个小图标集中在一张图上。可以减少网络请求。提高网页加载性能。
让一个元素"看不见"有几种方式?有什么区别?
-
opacity: 0;
整体透明度为 0,元素依旧在文档流中。 -
visibility: hidden;
与opacity一样。 -
background-color: rgba(0, 0, 0, 0.2);
元素透明,依旧在文档流中。 -
display: none
元素隐藏,不再在文档流中。
网友评论