想要清晰的明白(一): CSS视觉格式化模型|盒模型|定位方案|BFC

视觉格式化模型

页面(文档树)可以想象成是由一个个的Box组合而成的,而视觉格式化模型(Visual formatting model)是一套规则,将这些框布局成访问者看到的样子。

哪些因素控制了这些布局

    1. 盒的尺寸和类型
    2. 定位体系 Positioning Scheme (常规流,浮动和绝对定位)
    3. 文档树中元素之间的关系
    4. 外部信息(如:视口大小,图片的固有尺寸等)

下文讲针对性的解释这些影响布局的因素,先来解释些概念~

元素框

css假设每个元素都会生成一个或者多个Box,称为元素框,元素框中心有内容区,内容区外周围包括了padding,border,margin,盒模型就是用来处理这些内容的一个模型

包含块

每个元素都是相对于包含块摆放,包含块就是一个元素的“布局上下文”,


    

p的包含块是div

//div的包含块是body

替换/非替换元素

替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。
通过 CSS content 属性来插入的对象 被称作 匿名可替换元素
如果元素的内容包含在文档之中,则为非替换元素
非替换元素的所有规则同样适用于替换元素,只有一个例外,width如果是auto,元素的高宽就是内容的固有高宽,比如img就是图片的原始大

例如浏览器会根据标签的src属性的值来读取图片信息并显示出来,查看HTML代码,则看不到图片的实际内容;标签的type属性来决定是显示输入框,还是单选按钮等。HTML中的