CSS常见样式(下)

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

  • text-align作为HTML元素属性其主要是用来文本水平居中的。
  • text-align属性只能针对文本文字和img标签,对其他标签无效。

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

  • W3C标准中padding、border所占的空间不在width、height范围内
  • IE的盒模型width包括content尺寸+padding+border
d3bbc6ef43b6c4d1f883ffc458e6267538d16a6f.JPG

503315ee47e0efa18426508d4f0604415f39e395.JPG

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

  • 是CSS3的新样式,使用IE盒模型的样式。

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

  • line-height:2:本身文字的2倍的高度。
  • line-height:200% :是相对于父容器,父元素高度的2倍。

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

  • inline-block
    既呈现 inline 特性(不占据一整行,宽度由内容宽度决定)
    又呈现 block 特性 (可设置宽高,内外边距)
  • 缝隙问题:
    1.可以将两个元素挨在一起,不换行
    2.也可以用div包裹住,然后把font-size:0设置
  • 可以设置其中一个元素中加vertical-align:top

CSS sprite 是什么?

  • CSS精灵图,把图片拼接到一张图片上来实现css样式,以节约请求。

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

  • opacity: 0 ; 透明度为0,整体
  • visibility: hidden ;本身还是存在的,浏览器也知道 和opacity:0 类似
  • display:none; 消失,不占用位置
  • background-color: rgba(0,0,0,0.2) 只是背景色透明
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容