1.三种定位方式
(1)绝对定位
基本使用
position: absolute;
top: 10px;
left: 10px;
要点:
- 绝对定位是脱离文档流的,因此可能会遮挡其他页面上的元素(设置z-index属性来设置层叠级别)
- 一般left/right和top/bottom两对,每一对只设置一个值以防冲突
- 绝对定位的元素的包含块是距离它最近的定位祖先,如果没有定位祖先则相对于html标签定位
- left是当前文档元素的左边界距它的包含块的左边界的距离
- top是当前文档元素的上边界距它的包含块的上边界的距离
定位祖先的定义:
- 含有position属性
- position属性的值不是static
注意:无position属性 === position的值是static
(2)相对定位
基本使用
position: absolute;
top: 10px;
left: 10px;
要点
- 相对定位未脱离文档流,相对于其本来的位置进行定位
- 相对定位也会影响其他元素
(3)固定定位
基本使用
position: fixed;
left: 10px;
top: 10px;
要点
- 脱离文档流
- 固定在用户视角内
2.两栏布局
代码:
效果:
注意点:
- 首先要设置第一个div脱离文档流,这样第二个div才会上去
- 然后再文档流中的那个div要设置margin-left为第一个div的width,这样才不会遮挡
(3)两个经典bug:margin塌陷和合并
发生bug的几种情况
-
兄弟节点
-
父子节点
- 其中一个空元素,没有边框和填充
解决办法
-
兄弟元素
对于此类,只要将外边距设置为想要的值即可 ,不需要特地去解决 -
父子元素
BFC
(4)BFC
Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流。
具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。
触发BFC容器的条件
- body元素
- 浮动元素:float:除none以为的值
- 绝对定位元素:position:absolute/fixed
- display:inline-block/table-cells/flex
- overflow:除了visible以外的值(hidden/auto/scroll)