1.文档流的概念指什么?有哪种方式可以让元素脱离文档流?
大概就是元素没有浮动(float)或者绝对定位(position)的情况下,从左到右,从上到下排列的正常布局方式,可以显示布局时所占用的位置。
脱离文档流的方法有:
- float
-
position
1.position:fixed
2.position:absolute
2.有几种定位方式,分别是如何实现定位的,使用场景如何?
position | 描述 | 使用场景 |
---|---|---|
static | 静态定位 | 默认 |
fixed | 固定定位 | 广告,要求一直在页面上,就算滚动也在那个位置 |
relative | 相对定位 | 需要根据自身进行偏移的时候(但不脱离文档流) |
absolute | 绝对定位 | 需要定格在某个位置上 |
3.absolute, relative, fixed 偏移的参考点分别是什么
position | 参考点 |
---|---|
absolute | 选取最近一个已定位的父元素作参考点,倘若没有就选取Body坐标原点作为参考点 |
relative | 自身的位置 |
fixed | 浏览器的可视边框 |
4.z-index 有什么作用? 如何使用?
可以设置元素的堆叠顺序 值越大顺序越高(只可在定位的时候使用)
使用 只能在定位元素上使用
转载:
- 堆叠顺序
- 不对元素设position时,文档流后面的元素覆盖前面的元素。
- 将元素设置的position设置为relative ,absolute 或者 fixed,元素会覆盖没有设置 position 属性或者属性值为 static 的元素。
- 一般情况下z-index值越大者在前面。
- 子元素继承元素的堆叠关系,不论子元素的z-index值比父元素的兄弟元素大或者小,都继承父元素与其兄弟元素的堆叠关系。
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position:relative 无论发生怎样的偏移 元素还是在原来的位置上
- 负margin 元素发生偏移时,其元素位置也发生改变,同时带动其他元素的位置改变
6.如何让一个固定宽高的元素在页面上垂直水平居中?
假设width:100px height:100px
- 先让元素绝对定位-- position:absolute
- margin宽高设置为负固定宽高的1/2 -- margin-top: -50px margin-left:-50px
-
left和top分别设置为%50 --left:50% top:50%
7.浮动元素有什么特征?对其他浮动元素、普通元素、文字分别有什么影响?
- 脱离文档流
- 文字会环绕图片
- 可以从左或者从右浮动,直至触碰元素边框或者容器边框(border)
影响
- 对其他浮动元素影响
如果是同方向,紧挨其边框 如果超过容器容量,会换行继续 - 对普通浮动元素的影响
无视浮动元素,取代浮动元素的位置,并从左到右,从上到下排列 - 对文字影响
文字会环绕浮动元素
8.清除浮动指什么? 如何清除浮动?
用于清除浮动对其他元素的影响
clear:both/left/right