乐趣区

文档流相关

jiezi

文档流

标准文档流，元素默认会从左至右，上至下，块级元素独占一行，行内元素共享一行

position

  • static

预留空间，出现在正常文档流，（忽略 top, bottom, left, right 或者 z-index 声明）

  • relative

预留空间，相对于之前的位置移动

  • absoute

没有预留空间，相对于非 static 的位置移动，如果没有，就一路到根元素

  • fixed

没有预留空间，相对于屏幕视口的位置移动

  • sticky（兼容不好）

相对于第一个有滚动的父级块元素的位置移动，就是正常像 relative，滚动时像 fixed

z-index

层叠顺序，整数越大，越被层叠在上面，父子关系的话，一定是父在上子在下，同节点如果不按顺序来的话，就应该去查看其父元素，俗称“拼爹”

clear Float

如果子元素用了 float，如果不清除浮动，父元素无法撑开子元素

  • clear: both：在父元素下增加一个新元素
  • overflow: auto
  • clearfix：写一个类在父元素，利用伪元素插入两个元素块 
.clearfix:after{
  content: '';
  display: block;
  clear: both;

BFC

直译为 ” 块级格式化上下文 ”，与外部区域毫不相关，是一个容器，用来管理块级元素

创建 BFC

  • float 为 left|right
  • overflow 为 hidden|auto|scroll
  • display 为 table-cell|table-caption|inline-block|inline-flex|flex
  • position 为 absolute|fixed
  • 根元素

BFC 特性

特性 1：BFC 阻止 margin 重叠

属于同一个 BFC 时，margin 会重叠，只要他们之间没有阻挡（比如边框、非空内容、padding 等）就会发生 margin 重叠

  • 兄弟元素 margin 重叠，解决方案是，中间加个 BFC
  • 子元素 margin 父元素不撑开，解决方案是，父元素 BFC

特性 2：BFC 不会重叠浮动元素

就是把浮动元素和其他元素分开，行成自适应两拦布局

特性 3：BFC 可以包含浮动

子元素浮动，就脱离了文档流，父元素高度坍塌，解决方案是，把父元素变成一个 BFC

退出移动版