CSS常见样式2

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

text 文本 align 对齐 centenr 中心。
text-align:center:实现元素内部文字的居中。

二、IE 盒模型和W3C盒模型有什么区别?
20140124141001609.jpg

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。

20140124141131218.jpg

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。

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

指定使用IE盒模型,通常一个块级元素实际所占宽高度=外边距(margin)+ 边界宽度(border-width) + 内边距(padding)+ 高度(height) / 宽度(width),如果设置了border-box,实际所占宽高度 = 设置的高度(height)/ 设置的宽度(width)+ 外边距(margin)

四、line-height: 2和line-height: 200%有什么区别?

区别体现在子元素继承时:

  • 父元素设置line-height:2会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height。
  • 父元素设置line-height:200%是计算好了line-height值,然后把这个计算值给子元素继承,子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。

比如父元素设置属性:font- size:14px;line-height:1.5,child设置font-size:26px;
那么父元素:line-height = 14px * 1.5 = 21px,子元素:line-height = 26px * 1.5 = 39px。
父元素设置属性:font-size:14px;line-height:150%,child设置font-size:26px;
那么父元素:line-height = 14px * 150% = 21px,子元素:line-height = 父元素的line-height = 21px。

五、inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
  • inline-block特性:
    应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性
  • 去除缝隙:
    inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距。
    1、元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了
    2、去除闭合标签:


    4444.png

3、使用font-size:0
将父元素字体大小设置为0,行内元素单独设置字体大小,就可以去除缝隙
......

六、CSS sprite 是什么?

通俗点讲CSS Sprite就是将多个背景图片拼合到一个图片上。然后在CSS里通过position定义到该图片上,实现多个位置的背景,一张图片搞定。

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

1、display:none
设置元素的display为none是最常用的隐藏元素的方法,将元素设置为display:none后,元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘。
2、visibility:hidden
设置元素的visibility为hidden也是一种常用的隐藏元素的方法,和display:none的区别在于,元素在页面消失后,其占据的空间依旧会保留着,所以它只会导致浏览器重绘而不会重排。
3、opacity:0
opacity属性表示元素的透明度,将元素的透明度设置为0后,元素也是隐藏的,这算是一种隐藏元素的方法。这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间。
4、background-color:rgba(0,0,0,0.2);设置背景色透明

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,858评论 1 92
  • text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 1、当作用于块级元素时,...
    我要认真学前端阅读 665评论 0 1
  • 1. text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-alig...
    QQQQQCY阅读 290评论 0 0
  • 一,text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 作用在块级元素上面,...
    DeeJay_Y阅读 263评论 0 0
  • text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 作用:使行内元素实现水平...
    ychenxi阅读 340评论 0 0