文档流的概念指什么？有哪种方式可以让元素脱离文档流?
文档流：指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。简单地说，相对布局就是文档流。
脱离文档流即是元素打乱了这个排列，或是从排版中拿走。
脱离文档流的方法：浮动和定位。
有几种定位方式，分别是如何实现定位的，使用场景如何？
position: static | relative | absolute | fixed
** static ** 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。
** relative ** 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
** absolute ** 脱离文档流，通过top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
** fixed **固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
** position:relative + position:absolute ** 相关联的绝对定位。
固定定位与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。
浮动改变文档流的使用场景：当列的高度可变时。
absolute, relative, fixed偏移的参考点分别是什么？
- absolute 偏移参考点是参考点为其父元素，如果没有父元素则为body。
- relative 偏移参考点是自身原来的位置。
- fixed 偏移参考点是浏览器视窗。
z-index 有什么作用? 如何使用?
Z-index属性决定了一个HTML元素在Z轴上的层叠级别。
Z-index只能作用在被明确定义了absolute，fixed或relative 这三个定位属性的元素中。
CSS中定位的层叠分级：z-index: auto | number;
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别？
positive:relative 是相对于其本身，原来的空间会留存,不影响其他元素。
负margin：当元素margin的 top和left是负值时会引起元素的向上或向左位置移动。而当元素margin的bottom和right是负值时会影响右边和下边相邻元素的参考线。
margin-top,margin-left
margin-right,margin-bottom
参考文章负Margin
如何让一个固定宽高的元素在页面上垂直水平居中?
-
绝对定位。父容器的宽高一半-子元素宽高一半=子元素magin的值。
设置margin使元素垂直水平居中
-
相对定位+负margin的方法。
相对定位
浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
CSS浮动最初是为了解决文字环绕图片问题。
浮动元素特征：脱离文档流，会收缩，只能撑开自身内容所占据的空间，浮动的块级元素失去占一行的特性。
-
浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示。
div浮动后空间收缩
-
浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个（实例中为父元素）任意非浮动元素靠齐。
边框背景忽略浮动元素
3.浮动元素后面的内联元素会向此浮动元素的外边距靠齐。
内联会和外边距靠齐
清除浮动指什么? 如何清除浮动?
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
为什么要清除浮动
清除浮动：
1..clearfix 应用在包含浮动子元素的父级元素上
.clearfix:after {
content:'';
display:block;
clear:both;
}
2.父元素BFC
BFC(Block Formatting Context)：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
如何形成一个BFC？
- float的值不为none。
- overflow的值不为visible。
- display的值为table-cell, table-caption, inline-block中的任何一个。
- position的值不为relative和static。
** 常见的应用 是：使用overflow:hidden创建BFC ,来清除浮动元素对后面元素的布局影响 。 **
BFC常见应用
网友评论