整理一些网上常见面试题。
1.CSS隐藏元素的几种方法（至少说出三种）
- Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
- Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
- Display:display 设为 none 任何对该元素直接的用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
- Position:不会影响布局，能让元素保持可以操作;
- Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;
2.清除浮动
- 添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
- 父级div定义 伪类:after 和 zoom .clearfloat:after{display:block; clear: both; content:""; } .clearfloat{zoom:1}
- 父级div定义 overflow:auto 在父节点上设置一个新类名，然后在类名css中设置overflow:auto
3.水平居中和垂直居中
水平居中：
- 设置 text-align:center（内联元素）；
- 设置 左右 margin 值为 auto（定宽块元素）；
不定宽块元素：
- a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置margin 的值为 auto； table标签的宽度自适应，即其内部内容的宽度决定了它的宽度，所以能看成固定宽度。
- b:给该元素设置 display:inline 方法,改变为行内元素，然后使用text-align：center处理；
- c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50%；
垂直居中：
扫描二维码关注公众号，回复：
1668741 查看本文章
- 设置 height = line-height（父元素高度确定的单行文本内联元素）；
- a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle（多行文本）；
- b:先设置 display:table-cell 再设置 vertical-align:middle（多行文本）；