position fixed脱离文档流吗_文档流

目录

• 基本概念
• 理解以下几个重要的概念
  • 文档流Normal Flow
  • 块（block）、内联（inline）、内联块（inline-block）
  • margin合并
  • 两种盒模型(border-box更符合人类思维方式)

文档流

• 基本概念（文档的流动方向）
  • • 内联元素（inline）从左到右，到达最右边才会换行
      • 当内联元素<span>到达最右端时，发现空间不够会截取自己（字会断开）
    • 块级元素（block）从上到下，每一个都另起一行
    • 内联块（inline-block）也是从左到右
      • 到达最右端时，发现空间不够时不会截取自己（字不会断开）注意与内联的区别

小技巧：
1.做东西前先加 border
2.批量生成代码：<span>{第$个元素}*8+tab键
    output：<span>第1个元素</span>
                ...
                <span>第8个元素</span>

注释:新的HTML5不区分内联元素和块级元素——通过"display"来决定

• 宽度

1. inline宽度为内部inline元素的和，不能用width指定

注释：inline内部不能设置block元素！

2. block默认自动计算宽度，可用width指定

注释：任何时候都不能指定block（宽度）width：100%，会引起bug！
width可以指定单位像素px、em...

3. inline-block结合前两者特点，可用width指定

注释：与inline宽度一样，但可以设置宽度

• 高度

1.inline高度有 line-height 间接 确定，跟height无关，与padding也无关！

注释：padding控制的是可视范围，实际范围并没有变化；inline<span>的实际范围是line-height（行高）控制。
为什么是间接控制？
答案：因为字体的不同也会对实际范围起到一定的影响！

2.block高度由内部文档流元素决定，可以设置height（但元素如果脱离文档流，父级容器就无法包裹）

3.inline-block跟block类似，可以设置height。

overflow溢出

• 当内容大于容器
  • 当内容的宽度或者高度大于容器是，会溢出
  • 可用overflow来设置是否显示滚动条
    • auto是灵活设置
    • scroll是永远显示
    • hidden是直接隐藏溢出部分
    • visible是直接显示溢出部分
    • overflow可以分为overflow-x和overflow-y

注释：如果有滚动条，内容只会在第一屏幕中显示，后面是留空的！

脱离文档流

那些元素可以脱离文档流

• float
• position：absolute/fixed

怎么让元素不脱离文档流

不要用上面 的元素～

注释：如果div中什么也没有，则div高度为"0"

如果span中什么也没有，则仍能显示高度（inline高度是由inline-height来决定的）

两种盒模型（标准模型与IE模型）

什么是盒模型：盒模型又称框模型（Box Model）,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：

由于IE盒模型的怪异模式，IE模型和标准模型的内容计算方式不同。

标准模型和IE模型的区别

IE模型

IE盒模型又称为border-box

IE模型和标准模型唯一的区别是内容计算方式的不同，如下图所示：

IE模型元素宽度width=content+padding，高度计算相同

标准模型

IE盒模型又称为content-box

标准模型元素宽度width=content，高度计算相同