一、文档流的概念指什么？有哪种方式可以让元素脱离文档流?
文档流就是元素从左到右，从上到下排列；
元素脱离文档流可以进行如下设置：position:absolute、position：fixed，float:left、float:right可以脱离文档流。
二、有几种定位方式，分别是如何实现定位的，使用场景如何？
定位方式有四种，position：static，默认的样式，即元素正常出现在文档流中；默认样式时设置top、right、z-index不起作用。
position:absolute,绝对定位。即元素脱离文档流，依据第一个定位样式为非static的父容器进行定位，如果父容器都没有设置position,则根据body进行设置；
position:relative，相对定位。元素不脱离文档流，相对于自己原来的位置定位，但是之前的文档流还在，后面的元素直接接着原来的位置排列，忽略偏移后的元素位置
position:fixed，固定定位。即元素脱离文档流，相对于浏览器窗口进行定位。广告位一般用fixed定位，不管滚动条如何滚动，元素始终在原来的位置，不会改变。
三、absolute,relative,fixed偏移的参考点分别是什么
absolute偏移参考点是相对于第一个有定位设置（relative absolute fixed）的父元素，如果不存在已进行定位的父元素，那么相对于最初的根元素
relative相对于自己原来的位置（在文档中的初始位置）进行偏移
fixed相对于浏览器窗口进行定位，无论滚动条怎么滚动，内容始终在原来的位置不会改变。
四、z-index 有什么作用? 如何使用?
z-index设置元素的层叠，对要显示的元素进行设置，避免遮盖。在元素设置position：relative(absolute/fixed)时有效。
值越大，可以覆盖值小的元素，即最大的可见，较小的被覆盖，值可以为负值；都没有设置时，谁在后面显示谁
五、position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative和负margin都可以设置偏移，但是position:relative脱离文档流，不占位置，不影响其前后的元素；负margin占位置，会影响其后面元素。
六、如何让一个固定宽高的元素在页面上垂直水平居中?
让固定宽高的元素再页面上水平垂直居中，可以进行如下设置：
在position:absolute的前提下，设置top:50%；left:50%;margin-left:-宽度的一半；margin-top:-高度的一半（如果未设置position：absolute,无效）
七、浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
浮动的元素可以向左或向右浮动，直到它的外边缘碰到另一个元素或者另一个浮动元素或者边框；
浮动元素脱离文档流，对其他浮动元素来说，其他浮动元素会紧挨此元素进行相应的浮动；
浮动元素对其他普通元素来说，由于浮动元素不占位置，不保留原始位置，其他元素会直接占据其位置，从浮动元素原始位置左上角排列；
浮动元素对文字，文字会紧挨着向左浮动元素右侧（向右浮动元素左侧）排列，放不下的时候会下行。
八、清除浮动指什么? 如何清除浮动?
浮动会对后面的元素造成影响，清除浮动是指清除其他浮动元素对元素造成的影响；
clear:none(不清除浮动，允许该元素左右两侧有浮动元素);clear:left（清除元素左边浮动，不允许左边有浮动元素）;clear:right（清除元素右边浮动，不允许该元素右边右浮动元素）;clear:both（清除浮动，不允许该元素左右两侧有浮动元素）
本教程版权归 崔敏嫣 和 饥人谷 所有，转载须说明来源
网友评论