text-align:center 作用是什么?用于什么元素?使什么元素水平居中?
作用于行内元素,使行内元素水平居中,对inline-block也有作用。
IE盒模型和W3C盒模型有什么区别?
标准W3C盒模型
宽=width+(padding-left)+(padding-right)+(border-left)+(border-right)+(margin-left)+(margin-right)
高=height+(padding-top)+(padding-bottom)+(border-top)+(border-bottom)+(margin-top)+(margin-bottom)
IE盒模型
宽=width+(border-right)+(border-left)
高=height+(border-top)+(border-bottom)
{box-sizing:border-box};
的作用是什么?
设置一个元素为box-sizing:border-box时,此元素的内边距和边框不会增加他的宽度。
line-height:2和line-height:200%有什么区别?
line-height:2表示行高为本身字体高度的2倍,line-height:200%表示设置行高为父元素字体高度的200%高度。(推荐使用line-heignt:2)
inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
特性:行内元素设置display:inline-block 后,行内元素可以像块级元素一样设置宽高、padding、margin、border,但不占据一行。
去除缝隙:
方法一:将父元素height设置为0,行内元素单独设置字体大小;
方法二:display:block,然后让元素浮动;
方法三:行内代码录入数值后再换行;
对齐方法:
设置vertical-align:top;让顶端对齐。
CSS sprite 是什么?
css雪碧图或精灵图。用一张png格式的图片来防止所有的小图标,然后引用这一样张图片,设置backgroun-position 来显示不同的图标。这样可以减少向服务器的请求数量,提高加载速度。
让元素“看不见”有几种方式?有什么区别?
opacity:0;设置元素透明度为0,但还占据位置;
visibility:hidden:和opacity类似。
display:none;让元素消失,不占据位置。
background-color:rgba(0,0,0,1);设置背景色透明度。