浮动、定位

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

• CSS普通流/文档流（normal flow）是元素按照其在 HTML 中的位置顺序决定排布的过程，或者说在排布过程中将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。
• 元素脱离文档流可以进行如下设置：display:none,position:absolute、position：fixed，float:left、float:right可以脱离文档流。

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

定位方式	实现	使用场景
static	默认值，没有定位，元素出现在正常的流中	wu
absolute	生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位.会脱离文档流	适用于实现水平垂直居中
relative	生成相对定位的元素,相对于浏览器窗口进行定位。不会脱离文档流	一般与绝对定位配合使用
fixed	生成绝对定位的元素,相对于其正常位置进行定位。其完全脱离文档流	适用于固定顶部导航条，广告弹窗等

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

• absolute相对于自己的父元素，若他的父级没有设置position的话，就再往父元素的父元素找一直找到有定位属性的一个元素，然后相对于该元素做一个偏移，若一直没找到，就相对于根节点去做偏移。
• relative相对于自身原始的位置做一个偏移。
• fixed是相对于浏览器的窗口做偏移，不会管页面是否滚动，不管页面其它元素在哪里，只是相对于窗口。

4 . z-index 的作用， 如何使用

• 作用：设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
• 使用：该元素设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为复数则表示离用户更远。只有在使用了position并脱离了文档流（absolute、fixed）的情况下可以使用，其他情况使用z-index不起作用。

5 . position:relative和负margin都可以使元素位置发生偏移?二者的区别

• position:relative和margin的负值发生的偏移都是针对自己位置的移动。
  不同的是 position：relative的偏移 不会影响其他的元素，原来的元素还保持相同的文档流位置。margin的负值偏移会影响与它相邻的元素，改变别的元素的位置

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

先水平居中的话，margin:0 auto;可以满足；垂直居中，可以利用绝对定位，让其发生偏移，再通过margin上和左调动元素的位置。
代码展示
1. 使用绝对定位设置top：50%，left：50%，负margin-top和负margin-left各为元素宽和高的一半

position:absolute

2. 使用margin值设置margin:50%,auto;

margin

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

• 特征：浮动元素会脱离标准文档流，不占据文档流中的空间，其后面的普通元素会占据原本元素的空间，所以后面的元素会被遮挡 。
• 浮动元素会让其他浮动元素紧跟其后排列；
• 文字遇到浮动元素边框会避开另起一行有环绕效果。
• 如果有其他元素有清除浮动，同一层的浮动元素则会另起一行放置。

8 . 清除浮动指什么， 如何清除浮动

• 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
  清除浮动就是清除掉元素的float属性，其方法有：
• 使用伪元素清除

.box::after{
  content:"";
  display:block;
  clear:both;
} 
.left,.right{
  width:100px;
  height:100px;
  background:red;
  float:left;
}
<div class="box"> 
  <div class="left"></div> 
  <div class="right"></div> 
</div>

• 将父容器也进行浮动

.box{
  float:left;
}
.left,.right{
  width:100px;
  height:100px;
  background:red;
  float:left;
}
<div class="box"> 
  <div class="left"></div> 
  <div class="right"></div> 
</div>

• 使用overflow:hidden清除

.box{
  overflow: hidden;
} //overflow:auto也是可以的 
.left,.right{
  width:100px;
  height:100px;
  background:red;
  float:left;
}
<divclass="box"> 
  <divclass="left"></div>
  <divclass="right"></div> 
</div>

• 使用空div清除

.clear{
  clear:both;
} 
<divclass=”clear”></div>

代码

1 . 写出如下两栏布局, 其中中间区块宽度900px, 居中,左侧边栏宽度200px, 右侧边栏宽度自适应，缝隙10px

• 做完可参考范例
  范例代码参考
• ps: 图片左浮动，导航栏整体右浮动，导航栏里面的li元素左浮动。
• ps: aside左浮动，main 不浮动设置 margin-left
• 凡是有浮动的地方，其直接父元素必须清除浮动
• 自备创意，风格样式不需要和范例保持一样，技术上到位就行
• 代码示例

2 . 不适用背景图片实现如下效果

范例

• 代码示例