1、text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
- text-align:center规定行内内容相对父元素居中对齐,样式写在父元素上,作用在行内内容上。
- 行内内容包括行内元素、行内块元素和行内文本;父元素一般为块级元素。
2、IE 盒模型和W3C盒模型有什么区别?
W3C 盒模型的 width 和 height 只是指内容区的宽和高,而 IE 盒模型的 width 和 height 包含了内容区、border、padding 的宽高。
3、*{ box-sizing: border-box;}的作用是什么?
box-sizing: border-box; 设置使用IE盒模型,盒模型的 width 和 height 包含了内容区、border、padding 的宽高。
另外,默认情况下,box-sizing: content-box; 设置使用w3c盒模型,盒模型的 width 和 height 只是指内容区的宽和高。
4、line-height: 2和line-height: 200%有什么区别?
line-height: 2; 是将行高设置为元素字体高度的2倍,是相对值;
line-height: 200%; 是将行高设置为父元素字体高度的2倍,是固定值。
5、inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
- inline-block是一个块状行盒,表现为一个行内元素,它既拥有了块状元素可以设置width和height的特性,又保留了行内元素不换行的特点。
- 有缝隙的原因:inline-block水平呈现的元素间,标签段之间换行显示或空格分隔的情况下会有间距,这是符合规范的应有表现。
- 解决缝隙的方法:
方法1、去掉HTML中标签段之间的空格或用注释代替空格
方法2、设置margin值为负
方法3、去掉inline-block元素的闭合标签
方法4、设置父元素letter-space值为负值 - 顶端对齐:使用vertical-align: top
6、CSS sprite 是什么?
- CCS Sprite指的是把页面要用的所有小图标集合到一张图里面。
- 雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,减少了网络请求,对内存和带宽更加友好。
7、让一个元素"看不见"有几种方式?有什么区别?
- display: none 元素消失,不占用位置
- visibility: hidden 隐藏,但对浏览器来说还在,占用位置
- opacity: 0 元素透明,看不见但还是占用位置
- background-color: rgba(0, 0, 0, 0) 背景透明,只针对背景