CSS常见样式问答

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

  • text-align:center作为HTML元素属性主要用来使文本水平居中,text-align属性只针对文本文字和img标签,作用在block元素上,可以让块级元素(block)内的inline和inline-block元素水平居中

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

IE盒模型的宽高包含:content、padding、border
W3C盒模型的宽高:content

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

指定所有元素的的盒模型为IE盒模型标准,若设置border-box,实际所占宽高度=设置height/width + margin(外边距)

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

   line-height:2     //本身文字位置占据高度的两倍
   line-height:200%    //继承父元素文字高度的两倍,一般为浏览器默认文字大小font-size

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

  • 特性:既有inline特性(不占据一整行,宽度由内容宽度决定),又有 block特性(可设置宽高,内外边距)

  • 去除缝隙:可先将具有inline-block特性的元素标签加一个空的div块包裹,将其font-size设置为0,同时在将inline-block对应的元素标签字体在css中恢复原来样式,这样可以巧妙的出去两个inline-block之间的空字符所产生的间隙

  • 顶端对齐:添加CSS样式vertical-align:top;

6、CSS sprite 是什么?

  • CSS小精灵图标或雪碧图:将一些小的图标或者精灵放在一张图片上,通过对background-position的设置,达到切换不同小图片的目的,同时可以减少网络请求,提高网页加载性能

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

让一个元素“看不见”即为透明,从这个方向上考虑有以下4中方式,其中0~1表示透明度,0为全透明,1表示全不透明

  • opacity: 0 ; //透明度为0,原来位置的事件连接还在
  • visibility: hidden; //与opacity:0 类似,但是原来位置上事件连接不在了
  • display:none; //内容完全没有消失,不占用位置
  • background-color: rgba(0,0,0,0) /raba中最后一个a字母对应数值表示透明度,只是背景色透明
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容