- 文档流的概念指什么？有哪种方式可以让元素脱离文档流?
1 在页面中从左到右从上到下依次排列元素（快级元素独占一行）
2
float:left|right
position:absolute|fixed
都让元素脱离文档流 需要注意的是position:relative 并没有脱离文档流仍然会占据中间
- 有几种定位方式，分别是如何实现定位的，使用场景如何？
position:absolute:绝对定位 依据离自己最近一个不为static 定位的父元素
在使用双栏，三栏布局的时候我们会使用到 或者想要一些弹出层 但是又不想对当前布局产生影响
position:fixed:绝对定位 根据浏览器的窗口来定位
想要一直展示在页面的元素 不随滚动而变 如对话框 导航等
position:relative 相对定位 相对于自身来定位
当我们想要微调一个元素 但是又不想变动周围其他元素的时候 或者一些相对自身的动画效果
- absolute, relative, fixed 偏移的参考点分别是什么
absolute 依据离自己最近一个不为static 定位的父元素
relative 相对于自身原来的位置来定位
fixed 相对于浏览器窗口
- z-index 有什么作用? 如何使用?
相当于xzy 中的z轴
可以控制重叠元素的次序 只有作用在绝对定位元素上才有用
- position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
使用margin之后元素不再占据原来的空间
使用position:relative 元素仍然占据原来的空间
案例：
http://js.jirengu.com/hogoyujeki/1/edit
- 如何让一个固定宽高的元素在页面上垂直水平居中?
.div1{
width: 50px;
height: 50px;
border: 1px solid;
position:absolute;
right: 50%;
top: 50%;
margin-right:-25px;
margin-top:-25px;
}
.div2{
width: 50px;
height: 50px;
border:1px solid red;
margin: 0 auto;
margin-top:50vh;
position: relative;
top: -25px;
}
两种方法
http://js.jirengu.com/yeledipiho/1/edit?html,css,output
- 浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示
浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐
浮动元素后面的内联元素会向此浮动元素的外边距靠齐
浮动元素对于其他浮动元素是外边距靠齐
Paste_Image.png
对于没有内容的元素会忽略浮动元素和浮动元素重叠在一起
Paste_Image.png
对于有内容的元素会背景和边框部分和浮动元素发生重叠，而内容跟浮动元素外边距靠齐
Paste_Image.png
- 清除浮动指什么? 如何清除浮动?
清除浮动是指清除浮动造成的影响
在需要清除浮动的元素加上
clear:both;
.clearfix:afer{
content: "";
clear: both;
display: block;
}
在需要清除浮动的父级元素加上fixclear类名
本教程版权归菲龍探雲和饥人谷所有，转载须说明来源
网友评论