1.文档流的概念指什么？有哪种方式可以让元素脱离文档流?
文档流：从左往右一次排列内联元素，块级元素一直从上往下排列。
脱离文档流方式：
绝对定位position:absolute;
固定定位：position:fixed;
浮动：float;
2.有几种定位方式，分别是如何实现定位的，使用场景如何？
有4种定位方式：
（1）static:表示默认值
（2）relative:相对于元素自身的正常位置进行定位，定位后还占据其原始位置使后面的元素还是像以前的位置进行排列，所以不会脱离文档流。
（3）absolute:表示绝对定位，将元素从文档流中脱离出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性（relative、absolute、fixed）的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素。
（4）fixed:相对于窗口进行定位，表示固定在窗口的某一位置，它不会随浏览器窗口的滚动条滚动而变化，也不会受文档里影响。
3.absolute, relative, fixed偏移的参考点分别是什么
absolute：static 定位以外的第一个父元素进行定位。
relative：相对于元素自身的正常位置进行定位。
fixed：相对于浏览器窗口进行定位。
4.z-index 有什么作用? 如何使用?
z-index用来控制层叠元素显示的优先级，值越大，优先级就越高。
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别？
position:relative：是相对于自身静态位置进行定位，还占据着原有的位置，所以不会脱离文档流，也就没有影响其他元素。
负margin：通过负margin进行偏移，元素会放弃原有自身静态的位置，脱离了文档流，从而其他元素会被影响，所以其他元素的位置也发生了变化。
6.如何让一个固定宽高的元素在页面上垂直水平居中?
在元素上设置position: absolute;这样就是相对于父容器进行绝对定位，再给这个元素设置top和left值都是-50%，然后再设置margin值为宽高的一半。
垂直水平居中
7.浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
特征：
（1）浮动元素会脱离文档流，从而不占据自身的原本位置，也导致了其他元素会受到影响。
（2）浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
（3）设置元素的浮动都会被显示为一个块级元素。
对其他浮动元素的影响：其他浮动元素会依次排列在浮动元素的左边或右边，如果父容器包裹不下会自动排列到下一行。
对普通元素的影响：浮动元素会脱离文档流，不在占据原有的位置，所以对普通元素来说会自动填满浮动元素的原有位置，而且浮动元素会浮在上面。
对文字的影响：文字受到浮动元素的影响，会留出浮动元素占据的空间，从而形成文字环绕效果。
8.清除浮动指什么? 如何清除浮动?
清除浮动指的是清除浮动元素所带来的影响，比如由于浮动，父元素无法撑起高度，影响与父元素同级的元素；与浮动元素同级的非浮动元素会紧随其后；若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响布局。
通过使用clear:left / right / both / none；来清除浮动（清除浮动只对元素本身有效）
网友评论