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
- 凡是有浮动的地方，其直接父元素必须清除浮动
- 自备创意，风格样式不需要和范例保持一样，技术上到位就行
- 代码示例
