- 文档流的概念指什么？有哪种方式可以让元素脱离文档流?
文档流指语言文本从左到右，从上到下显示，这是传统HTML文档的文本布局。
定位(position)中的absolute,fixed;浮动（float）的float:left/right。
- 有几种定位方式，分别是如何实现定位的，使用场景如何？
四种方式：
默认static：没有定位；
相对定位（relative）：相对于原始位置进行定位；常用于布局，让子元素有参考对象。
绝对定位（absolute）：该方法令元素不再占有自己原有位置，完全脱离文档流。
fixed：生成绝对定位的元素，常用于广告弹窗等。
absolute,relative,fixed偏移的参考点分别是什么
absolute相对于父容器的偏移量；
relative相对于原有位置的偏移量；
fixed相对于浏览器窗口进行定位。
- z-index 有什么作用? 如何使用?
用来控制层叠元素的显示优先级，值越大优先级越高。
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position：relative会让元素脱离文档流，且没有改变自身占据的空间大小；
负margin没有脱离文档流，会改变自身占用空间大小。
- 如何让一个固定宽高的元素在页面上垂直水平居中?
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>boxcenter</title> 6 <style type="text/css" media="screen"> 7 .ct{ 8 border: none; 9 position: relative; 10 width: 500px; 11 height: 500px; 12 line-height: 500px; 13 background-color: #ccc; 14 color: #000; 15 } 16 .box{ 17 border: none; 18 position: absolute; 19 top: 50%; 20 left: 50%; 21 margin-left: -50px; 22 margin-top: -50px; 23 color: #fff; 24 background-color: red; 25 width: 100px; 26 height: 100px; 27 line-height: 50px; 28 text-align: center; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="ct"> 34 <div class="box">box</div> 35 </div> 36 37 </body> 38 </html>
- 浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
特征：
- 浮动的元素可以向左或向右移动，直到它的外边缘碰到父元素的边缘或另一个浮动元素的边缘为止。
- 浮动元素不在文档的普通流中，文档普通刘中的元素会占据浮动流原本的位置。
影响：
1.浮动元素：能感知浮动元素的存在，碰到其他浮动元素的边框时会停止。
2.普通元素:块级元素无法感知浮动元素的存在，会占据其空间；行内元素不会占据浮动元素空间。
3.文字：文字会被浮动元素挤开，环绕浮动元素排布。
- 清除浮动指什么? 如何清除浮动?
清除浮动是指为元素设置其左右能否有浮动元素。
清除浮动：
1.为被浮动元素遮挡的元素添加clear:both/left/right
2.为浮动元素的父元素添加overflow:hidden
3.在最后一个浮动元素的后面添加一个元素并加入clear:both样式。