流、元素与基本尺寸

**

块盒

**
HTML 常见的标签有

、

、

  • 和以及、第三章 - 图1、 和等。虽然标签种类繁多，但通常我们就把它们分为两类:

    块级元素(block-level element)
    内联元素(inline element)

    为什么 list-item 元素会出现项目符号

    之所以 list-item 元素会出现项目符号是因为生成 了一个附加的盒子，学名“标记盒子”(marker box)，专门用来放圆点、数字这些项目符号。IE浏览器下伪元素不支持 list-item 或许就是无法创建这个“标记盒子”导致的。

    解决 display:inline-block 的问题
    每个元素有两个盒子，外在盒子与内在盒子（容器盒子）

    于是，按照 display 的属性值不同，值为 block 的元素的盒子实际由外在的“块级盒子” 和内在的“块级容器盒子”组成，值为 inline-block 的元素则由外在的“内联盒子”和内 在的“块级容器盒子”组成，值为 inline 的元素则内外均是“内联盒子”。

    width/height 作用在哪个容器盒子上。

    流体布局下面，宽度分离原则。 

    1. .father {
    2.     width: 180px;
    3. }
    4. .son {
    5.   margin: 0 20px;
    6.   padding: 20px;
    7.   border: 1px solid;
    8. }

    height:auto

    普通文档流中的元素，百分比高度值要想起作用， 其父级必须有一个可以生效的高度值!

    规范中指出，如果包含块的高度没有显式指定(即高度由内容决定)，并且该元素不是绝对定位，则计算值为 auto。
    但是，此时，auto 与 百分比计算，是计算不了的。
    'auto' * 100/100 = NaN
    但是，宽度的解释却是:如果包含块的宽度取决于该元素的宽度，那么产生的布局在 CSS 2.1 中是未定义的。

    如何让元素支持 height:100%效果
    1、显式设定高度值
    2、使用绝对定位

    幽灵空白节点

    注意，这里有一个前提，文档声明必须是 HTML5 文档声明(HTML 代码如下)，如果还是 很多年前的老声明，则不存在“幽灵空白节点”。

    1.   <!doctype html>
    2.     <html>

    规范中实际上对这个“幽灵空白节点”是有提及的，“幽灵空白节点” 实际上也是一个盒子，不过是个假想盒，名叫“strut”，中文直译为“支柱”，是一个存在于每个“行 框盒子”前面，同时具有该元素的字体和行高属性的 0 宽度的内联盒。规范中的原文如下:

    Each line box starts with a zero-width inline box with the element’s font and line height properties. We call that imaginary box a “strut”.