问题一:text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
答:text-align: center
可以让父元素中的内容水平居中,作用在块元素上使行内内容水平居中。
问题二:IE 盒模型和W3C盒模型有什么区别?
IE 盒模型和W3C盒模型的区别在于计算盒模型宽高的方式不一样。给某一盒模型设置宽高:
- 如果该盒模型是IE盒模型:
设置的宽度=内容宽度+左右padding值+边框宽度
设置的高度=内容高度+上下padding值+边框宽度 -
如果该盒模型是W3C盒模型:
设置的宽高=内容的宽高。
问题三: *{ box-sizing: border-box;}
的作用是什么?
答:*{ box-sizing: border-box;}
的作用是让所有元素的盒模型宽高的计算方式都按照IE盒模型宽高的计算方式去计算。
问题四:写一个 btn 的class, 任何a
,span
,div
, button
添加此class后后变成如下按钮的样式(鼠标hover背景色#c14d21, 鼠标按下背景色#e25f31
问题五:inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
- inlin-block的特性有以下几点:
inline-block元素可以设置宽高和上下左右的padding和margin。
inline-block元素并排排列
inline-block元素默认宽高为内容宽高 -
去除inline-block缝隙的方法有5种:
1.html标签连写:
2.设置浮动:
3.父元素字体设置font-size:0;
然后在inline-block元素上再重新设置字体;
4.inline-block元素设置负margin,会导致元素溢出父容器的问题:
- 高度不一样的inline-block元素如何顶端对齐?
答:使用vertical-align
样式,值设置为top(顶端对齐)
问题六:CSS sprite 是什么?
答:CSS sprite是CSS雪碧图,是一种将多张小图片合成为一整张图的大图,也是一种网页图片的请求方式,使用CSS sprite有如下好处:
1.因为多图合成为了一张图,所以减少了网页图片的请求,加快了网页的加载速度;
2.重复使用率高;
问题七:让一个元素"看不见"有几种方式?有什么区别?
-
opacity: 0
:元素透明度为0,还占有位置; -
visibility: hidden
:与opacity: 0
类似; -
display: none
:元素消失,不占位置; -
background-color: rgba(0,0,0,0.2)
:背景色透明。