css常见样式(下)

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

作用:定义行内内容(如文本、i图片等)相对于它的块级父元素居中
作用在行内元素中
作用在它的块级父元素中

问题2:IE 盒模型和W3C盒模型有什么区别

ie盒模型:元素的宽=content的宽+padding的宽+border的宽
W3C盒模型(标准盒模型):元素的宽=content的宽

示例

在IE5.5和以及更早的IE版本中,IE都采用了IE盒模型,从IE6开始提供了一种IE使用W3C盒模型的方式:在html中声明Doctype。但是,IE6默认的仍是IE盒模型。
在css3.0中加入了box-sizing,用来修改css box model,默认值是content-box(标准盒模型),border-box值设置IE盒子。


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

声明body里面元素采用IE盒模型

问题4:line-height: 2line-height: 200%有什么区别
  • line-height: 2表示行高为当前字体高度的2倍
  • line-height: 200%表示行高为默认字体行高的2倍,也就是32px,为定值。
问题5:inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?

特性:既有行内元素的特性(不占据一整行),也有块级元素的特性(可设宽高、margin和padding值在水平及竖直方向均有效)

未设inline-block时

设置inline-block时

去除缝隙:两个span元素之间有空格,以字符的形式出现,设置它字符的字体大小为0,即可清除,见下图
去除缝隙

顶端对齐:vertical-align:top;


问题6:CSS sprite 是什么?

CSS Sprite,是一种通过CSS技术将原本需要多张图像文件分别显示,整并为单一图像文件的分区显示技术,借由减少下载图像文件数量,提高网页的显示性能

问题7:让一个元素"看不见"有几种方式?有什么区别?
  • opacity:0 :透明度为0,整体
  • visibility: hidden:和opacity:o类似
  • color: transparent :同上
  • display: none:消失,不占用位置

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,863评论 1 92
  • text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-align样式...
    阿鲁提尔阅读 294评论 0 1
  • 1.text-align:center的作用是什么?作用在什么元素上?能让什么元素水平居中 text-align:...
    BAWScipes阅读 404评论 0 0
  • text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-align: ...
    饥人谷_二釉阅读 256评论 0 0
  • 1. text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中? text-ali...
    饥人谷_Jack阅读 209评论 0 0