CSS常见样式2

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

text-align: center作用于块级元素,使得位于块级元素内部的行内元素水平居中。

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


IE 盒模型中设定的 width 宽度包括 content、padding、border 三部分的宽度;W3C 盒模型中设定的 width 宽度仅包括 content 自身,不包括 padding 和 border 部分的宽度。

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

box-sizing: border-box:IE盒模型
box-sizing: content-box:W3C标准盒模型
设置所有 CSS 的盒模型遵从 IE 盒模型的标准,此时在 CSS 设置的属性中,width 将包括内容宽度 + 内边距宽度 + 边框宽度,不再遵循 W3C 盒模型的标准。

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

line-height: 2 :设置行高为本身文字大小的两倍
line-height: 200%:设置行高为父元素文字大小的两倍

五."inline-block"有什么特性?如何去除缝隙?高度不一样的"inline-block"元素如何顶端对齐?

inline-block可以使得元素既拥有行内元素“不占据一整行,宽度由内容宽度决定”特性的同时,又呈现出块级元素“可设置宽高,内外边距”的特性。
去除缝隙 方法1.移除HTML中的空格;
方法2.使用margin负值;
方法3.使用font-size:0。
顶端对齐:vertical-align:top
底端对齐:vertical-align:bottom

六.CSS sprite 是什么?

CSS sprites叫css精灵图,是一种网页图片应用处理方式,指将不同的图片/图标合并在一张图上,使用CSS sprite 可以减少网络请求,提高网页加载性能。

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

  • display:none: 元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘;
  • visibility: hidden:和display:none的区别在于,元素在页面消失后,其占据的空间依旧会保留着,所以它只会导致浏览器重绘而不会重排;
  • opacity: 0:整体透明度为0,但是元素位置依然保留,其它元素不会占据该元素所在的位置;
  • background-color: rgba(0,0,0,0)只会改变背景色透明,不会变元素的颜色。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,711评论 1 92
  • 1.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中? text-alig...
    草鞋弟阅读 2,472评论 0 0
  • text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-align C...
    Sketch阅读 2,828评论 0 0
  • text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 1、当作用于块级元素时,...
    我要认真学前端阅读 3,904评论 0 1
  • 1、默默看着,会笑,那是幸福。 2、感叹就在一瞬间,一个不经意的注视。 3、生活就是无数个平淡与零星热烈的组合。 ...
    神秘的Q阅读 1,184评论 0 0

友情链接更多精彩内容