文: jack同学

jack同学.jpg

规定单个盒子的规则叫盒模型，那么规定多个盒子排列的规则叫做视觉格式化模型
视觉格式化模型将页面排列布局分为三种方式

常规流 / 文档流

• 所有元素默认属于常规流
  • 布局规则：块盒独占一行，行盒水平依次排列
  • 包含块：每个盒子的活动区域（布局区域/排列区域），大部分情况下，盒子的包含块为父元素的内容盒(content-box)
  • 常规流中块盒的布局规则
    • 水平方向上
      • 每个块盒的总宽度(content+padding+border+margin)，必须刚好等于包含块的宽度
      • 块盒的宽度默认值为auto，在没设置宽度时水平方向上默认撑满剩余空间
      • 块盒的margin默认值为0，在块盒宽度计算后还有剩余空间则margin-right全部撑满剩余空间
      • 由于上面的规则所以可以理解常见的问题：为什么设置margin设置负值盒子的宽度增加了，就是因为水平方向上计算的宽度必须等于包含块的宽度
      • 由于规则可知：margin设置margin-left: atuo; margin-right: auto; 可以水平居中的原因
    • 垂直方向上
      • height默认值为auto，也就是默认高度由内容撑开，跟宽度的auto值含义不一样
      • margin垂直方向设置auto时，表示0，也就是设置auto也并不会垂直居中
    • 百分比取值
      • 设置块盒宽度、padding、margin为百分比值时的规则
      • 以上所有百分比设置的大小都是相对于包含块的宽度进行计算的
      • 常应用于宽高按比例自适应 / 画自适应圆、矩形等
      • 设置块盒高度为百分比时的规则
        • 如果包含块的高度由子元素内容撑开，那么设置百分比无效。
        • 如果包含块的高度不是有子元素内容撑开，那么子元素盒子高度百分比相对于父元素高度
    • 外边距合并
      • 兄弟元素垂直方向外边距会合并
      • 父子元素垂直方向外边距也会合并
      • 解决：1) 父元素添加border。2) 父元素添加padding。3) 父元素触发bfc

浮动

• 元素浮动之后必为块盒
• 浮动元素的包含块和常规流一样是父元素的内容盒
• 浮动元素的尺寸规则
  • 浮动元素宽度为auto时(也就是不设置宽度)，宽度由内容撑开
  • 浮动元素高度为auto时(也就是不设置高度)，高度由内容撑开
  • 浮动元素margin为auto时，为0
  • 浮动元素border、padding、百分比设置规则跟常规流一样
  • 浮动元素不会发生外边距合并问题
  • 排列规则
    • 左浮动靠上靠左排列
    • 右浮动靠上靠右排列
    • 浮动元素在包含块中排列时，看不到块盒，能看到行盒，以及产生bfc的块盒
    • 如果文字不在行盒中时又浮动了，那么浏览器会自动生成一个行盒包裹浮动元素，这个行盒叫做匿名行盒。这种情况常用在文字包含图片中使用。
  • 高度坍塌：高度自适应的常规流盒子包含浮动流盒子，那么常规流盒子高度会坍塌
    • 原因：浮动元素脱离了常规流产生了浮动流，常规流盒子计算高度时只会计算内部为常规流的盒子高度
    • 解决：清除浮动（ 给父元素添加类样式 .clearfix::after{content:""; display:block; clear: both;} ）/ 或者让父元素变成bfc元素

  定位

  • position: reletive; 相对定位
  • position: absolute; 绝对定位
  • position: fixed; 固定定位
  • 定位元素会脱离文档流（相对定位除外)
  • 相对定位定位规则：相对自己原来的位置定位
  • 绝对定位定位规则：找有定位的父级进行定位，没有则根据文档进行定位，那个有定位的父级就是包含块

    注意：具有绝对定位的元素，如果不设置定位，则可以配合margin属性来进行相对自己的定位，可以做一些固定位置图标

  • 固定定位定位规则：包含块为视口，所以根据视口定位
  • 绝对定位、固定定位元素一定是块盒
  • 设置了绝对定位或者固定定位，则不能设置浮动，浮动会强制设为none
  • 定位没有外边距合并
  • z-index可以设置堆叠上下文，可以为负数，如果时负数，则显示在常规流和浮动流背后