浮动、定位

问答

文档流的概念指什么？有哪种方式可以让元素脱离文档流?

• 文档流指块级元素从上到下占满一行，行内元素左右一次排列。
  -脱离文档流
  • 使用浮动方式 float
  • 使用绝对定位position:absolute
  • 使用position:fixed

有几种定位方式，分别是如何实现定位的，使用场景如何？

position有多种定位方式

• 默认为static，元素处在文档流中它当前的布局位置，top, right, bottom, left 和 z-index 属性无效。
• relative 相对定位，相对于元素本身在文档流存在的位置进行定位，
• absolute 绝对定位，相对于具有定位属性的父元素进行定位
• fixed 相对浏览器窗口定位，适用于一直停留在浏览器窗口的元素

absolute, relative, fixed偏移的参考点分别是什么

• absolute 相对于父容器具有position属性的进行定位
  • absolute定位相对于父元素边框内侧进行定位
    absolute都设置为0的时候 可以充满整个父元素 可当做蒙层
• relative 相对于它自身原来的位置进行定位
• fixed 固定定位，相对于浏览器的窗口进行定位

z-index 有什么作用? 如何使用?

• 控制浮动元素的互相遮盖的方式，可以理解为Z轴
• z-index较大的元素会遮盖掉较小的元素，默认为0，可以为负

position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

• position:relative 本身还处在文档流中，对其他元素没有影响
• 负margin方法使元素位置偏移，使元素在文档流中的位置发生了改变，其后的元素受其影响。

如何让一个固定宽高的元素在页面上垂直水平居中?

块级元素垂直水平居中有多种方式，介绍采用绝对定位+负margin的实现方式

• 让固定宽高元素相对于祖先元素进行定位.设置top: 50%;
  和left: 50%;
  margin设置为宽高值的负数的二分之一.
• 两个例子 http://js.jirengu.com/vopumavali/1/edit?html,css,output

浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?

• 浮动元素不占用文档流，撑不开容器的宽高，块级元素不再具有占满一行的特点，收缩为自身宽度。浮动会往边靠，直到碰到容器边框或其他浮动元素，浮动元素往边上靠的时候会被其他浮动元素卡住。
• 浮动元素不再占用文档流，但其浮动的起点是在渲染完上个块级元素的后面开始浮动，并不会跨过元素向上浮动。后面的元素占用其文档流的位置。
• 浮动元素的margin、padding作用于其他浮动元素，且不与浮动元素发生外边距折叠。对于普通元素，普通元素可能会被浮动元素遮盖，可以使用clear:both清除浮动。对于文字，会围绕着浮动元素进行布局。
• 向右的浮动元素 文字会排在下面 不会环绕

Paste_Image.png

清除浮动指什么? 如何清除浮动?

• 给元素添加 clear: left |right |both 属性可以清除浮动，具有这条属性的元素，不会被浮动元素所遮盖。如果本身在浮动元素范围内，会自动跑到浮动元素的后面。
• clear 是对自身生效，会改变自身的位置！注意渲染的顺序。浮动的首个元素一般不能clear
• 可以给父容器元素定义这个CSS用以包裹浮动元素,如需要兼容IE6、7，就包含clearfix。 ::after 的作用是在元素的最后生成一个子元素

.container::after{ 
    content: ''; //空字符
    display: block;// 显示为块级元素
    clear: both;//清除两侧浮动
} //用于清除浮动 
.clearfix{ 
    *zoom: 1;//用于兼容IE6、7
}

本教程版权归 张宇 和 饥人谷 所有，转载须说明来源