初级前端面试基础知识整理 - 好文

整理一些网上常见面试题。

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%；
垂直居中：

* 设置 height = line-height（父元素高度确定的单行文本内联元素）；

* a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle（多行文本）；
* b:先设置 display:table-cell 再设置 vertical-align:middle（多行文本）；

热门工具换一换