问答
1. text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
定义行内内容（例如文字）如何相对它的块父元素对齐。并不控制块元素自己的对齐，只控制它的行内内容的对齐。作用在块级元素上，可以使块级元素内的行级元素和display:inline-block,display:inline元素水平居中。
2.IE 盒模型和W3C盒模型有什么区别?
IE盒模型的宽度和高度包括：content尺寸+padding+border
W3C盒模型的宽高只包括content的宽高
3. *{ box-sizing: border-box;}的作用是什么？
将页面内所有的盒模型设置为IE盒模型。
默认值为content-box代表w3c标准盒模型。
4.line-height: 2和line-height: 200%有什么区别?
line-height: 2 是相对于自身的行高的2倍，会继承给子元素，子元素根据自己的font-size来计算。
line-height: 200% 是相对于父元素尺寸的2倍，这个数字是固定的，后代直接继承此计算好的数字。
5.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
可以设置宽高和内外边距。不占据一整行，宽度由内容决定。inline-block元素之间会有缝隙。
去除缝隙：
去除inline-block元素间间距的N种方法
- 在HTML文档中书写时去除标签之间的所有空格和回车，或用注释。
- 设置父元素font-size为0，再设置自身的font-size
顶部对齐使用vertical-align: top
6.CSS sprite 是什么?
雪碧图，就是将很多图片放在一张图上，减少网络请求，展示的时候利用图片定位来展示对应的图片。
- 让一个元素"看不见"有几种方式？有什么区别?
| 属性值 | 描述 |
|---|---|
| opicity:0 | 透明，还占据位置。会响应用户交互 |
| display:none | 消失，不占用位置 |
| visibility: hidden | 占据位置，不响应用户交互 |
| background-color: rgba(0,0,0,0) | 背景色透明 |
| position: absolute;top: -9999px;left: -9999px; | 元素移出可视区域。不影响布局，让元素保持可以操作 |
| clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); | 占据位置 |
Five Ways to Hide Elements in CSS
网友评论