CSS常见样式2

1.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中

text-align: center使作用是让块级元素里的内容(如文字,图片等)相对于块级元素居中,可继承

2.IE 盒模型和W3C盒模型有什么区别?
盒模型

W3C标准盒模型中padding、border所占的空间不在width、height范围内,大家俗称的IE的盒模型width包括content尺寸+padding+border。
ie678怪异模式(不添加 doctype)使用 ie 盒模型,宽度=边框+padding+内容宽度。chrome, ie9+, ie678(添加 doctype) 使用标准盒模型, 宽度= 内容宽度。

3.*{ box-sizing: border-box;}的作用是什么?

可把整个页面的所有元素默认的W3C盒模型标准转化为IE盒模型标准
box-sizing: content-box:w3c标准盒模型
box-sizing: border-box:“IE盒模型”

4.line-height: 2和line-height: 200%有什么区别?
  • 数值:继承的时候,浏览器会先将line-height这个属性继承给子元素,再由子元素计算。自身font-size的2倍。
  • 百分数:继承的时候,浏览器会先将行高对应的具体的数值计算出来以后再继承。父元素的font-size的200%。
5.inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?

inline-block 内联块级元素,既能放在一行(内联元素特性),又能设置宽高及padding margin(块级元素特性)。
inline-block 元素间的空白/回车换行会产生缝隙,去除缝隙可以使html标签连续(无空白/折行),还可以设置其父元素font-size:0; 然后在inline-block元素内恢复font-size。
在父元素中使用vertical-align:top; 可以让高度不一样的inline-block 元素顶端对齐。(取值:top/bottom/middle)

6.CSS sprite 是什么?

CSS精灵图(雪碧图)
CSS Sprites
简单来说:指将不同的图片/图标合并在一张图上。
使用CSS Sprite 可以减少网络请求,提高网页加载性能。

7.让一个元素"看不见"有几种方式?有什么区别?

隐藏or透明
opacity: 0 ; 透明度为0,整体
visibility: hidden ; 类似于 opacity:0
background-color: rgba(0,0,0,0); 只是背景色透明
display:none; 消失,不占用位置,浏览器不会去绘制它
前三种方法仅仅是改变其透明度,让其"假消失",看不见,但存在。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容