一、text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
答: 作用是设置内容在容器的水平方向上居中。作用在块级元素上(text-align: center; 这一属性要设置在块级元素上才能起作用,设置在行内和行内块中都不会起作用的。)。能让行内元素和行内块元素的内容水平居中。
二、IE 盒模型和W3C盒模型有什么区别?
答:
网页中的盒子模型,我们常常要控制盒子模型的宽度width:
w3c中盒子模型的宽包括margin+border+padding+width;
width: margin2+border2+padding2+width;
height: margin2+border2+padding2+height;
IE中的盒子模型的width:也包括margin+border+padding+width;
上面的两个宽度相加的属性是一样的。不过在ie中的宽度包括padding和border这两个属性;
例如:一个盒子模型如下:margin: 20px,border: 10px, width: 20px; height: 50px;
如果用w3c盒子模型解释,那么这个盒子模型占用的
宽度为: 202+102+102+200=280px;
高度为:202+102+202+50=130px;
盒子的实际宽度大小为: 102+102+200=240px;
实际高度:102+102+50=90px;
用ie的盒子模型解释: 盒子在网页中占据的大小为202+200=240px; 高:202+50=90px;
盒子的实际大小为:宽度: 200px , 高度: 50px;
我们经常理解的盒子模型是w3c这样的盒子模型!
三、* { box-sizing: border-box;}的作用是什么?
答: 页面上所有元素的盒模型按照IE盒模型的宽高计算方式来计算。
四、写一个 btn 的class, 任何 a,span,div,button 添加此class后后变成如下按钮的样式(鼠标hover背景色#c14d21, 鼠标按下背景色#e25f31)
代码预览
效果显示
五、inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
inline-block特性及如何去除缝隙
六、CSS sprite 是什么?
精灵图简单了解
七、让一个元素"看不见"有几种方式?有什么区别?
1.overflow: hidden; //将超出的部分裁剪掉了。(被裁减掉的部分在页面上不占据位置)
2.visibility: hidden; //可以将元素隐藏,但是在页面上还保留着原来的位置。
3.display: none;(与display: block; 是一对反义词) //可以将元素隐藏,并且在页面上不占据位置。
4.background-color: rgba(0,0,0,0);:背景透明,rgba中的a对应的数值为0~1,越小透明度越高;
5.opacity属性的取值范围是0~1,取值越小越透明,当值为0时,元素完全透明(整体)。
6.font-size:0; 会把元素包含的文本文字隐藏看不见;
文章著作权归饥人谷_sunny和饥人谷所有,转载须说明来源