text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
text-align:center的作用是使元素居中,一般作用于内联元素,类似文本以及图片,使其居中。对于text-align: center;而言,是使在块级元素中的文本居中,但是text-align: center;只是控制块级元素中的内容居中,无法控制块级元素的位置调整。
IE 盒模型和W3C盒模型有什么区别?
对于IE盒模型只会出现在IE5.5或者更早的版本中,在IE6以及更新版本标准兼容模式下使用的都是W3C盒子模型,即标准盒子模型
具体区别是:
IE盒模型的宽度和高度是指包括border和padding的宽度和高度
标准盒子模型的宽度和高度是指content的宽度和高度
*{ box-sizing: border-box;}的作用是什么?
当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度,一般制作自适应网页时应用此功能
line-height: 2和line-height: 200%有什么区别?
line-height:2代表着行高为当前内容的文字高度的两倍。
line-height:200%代表着行高为当前父元素文字高度的两倍。
inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
inline-block即有着行内元素的特性,不占据一整行;也具有块级元素的特点,能够设置宽高,内外边距;
当存在空隙时候是因为html将元素与元素之间的空格以及换行识别成一个空字符,因此最简单的方式就是将中间的空格以及换行消除掉,但是这样下来很不方便代码的阅读,比较通用的方法是将inline-block的父元素的font-size设置为0,然后再单独对inline-block里面的元素的font-size进行设置。
当高度不一致的inline-block没有顶端对齐的时候,可以使用
vertical-align: top;
CSS sprite 是什么?
CSS sprite是将很多零碎的图标图片整合到一张图上,用来提高网页响应速度,减少加载请求,提高网络性能的处理方式。
让一个元素"看不见"有几种方式?有什么区别?
opacity: 0;整体透明度设置为0;区域空间还在,点击的话链接还是能工作。
visibility: hidden;和上者相似;
display: none;消失,没有占位;但是内容完全没有了。区域空间还在,但是点击的话链接不会产生任何效果。
background-color: rgba(0,0,0,0.2)只是背景色透明,rgba最后一个参数指的是透明度,其中1为100%,相应的0.2为20%的透明度。