盒子
目录
文章目录
  1. 基本框
  2. 包含块
  3. 常见的术语
    1. 正常流
  4. 非替换元素
  5. 替换元素
  6. 块级元素
  7. 行内元素
  8. 根元素
  • 块级元素
    1. 负外边距
  • 替换元素
  • auto 高度
  • 基本视觉格式化

    基本框

    在CSS中每个元素都被认为可生成一个或多个矩形框,这成为元素框。各元素框中心有一个内容区域(content area),内容区周围有可选的内边距(padding)、外边距(margin)、和边框(border),这里可选的是指可设置为0即从元素框内去除了这些为0的项,例如说行内元素没有 margin,没有 padding。外边距通常是透明的,可以看到父元素的背景。内边距不能是负值。边框 若未设置颜色,则取元素内容的前景色。亦即边框和内容以内边距有相同的背景色。边框的宽度不可以为负。

    包含块

    每个元素都相对于其包含块摆放,亦即包含块就是一个元素的“布局上下文”。而行内元素的摆放方式并不直接依赖于包含块。

    常见的术语

    • 正常流

      这是指西方语言文本从左向右、从上向下显示,即传统的HTML 文档的文本布局。若想要让某元素脱离正常的文档流,让其浮动或改变其定位方式(float:left,float:right,position:fixed,position:absolute)。

    • 非替换元素

      若元素的内容包含在文档中,则称之为非替换元素。如某段落的文本内容在该元素本身之内,这个段落就是非替换元素。

    • 替换元素

      指用作为其他内容占位符的一个元素。如img 元素,input元素等<input type="radio">

    • 块级元素

      指段落、标题或div之类的元素。这些元素在正常的文档流中,会在其框之前和之后形成换行,故处于正常文档流中的块级元素会垂直摆放。通过声明display:block可使元素变身块级框。

    • 行内元素

      strongspan之类的元素。这些元素不会在之前或之后生成“行分隔符”。

    • 根元素

      位于文档树顶端的元素,在HTML文档中,即为html

    块级元素

    一般地,一个元素的width 被定义为从左内边界到右内边界的距离,height 则是从上内边界到下内边界的距离。

    正常流中的块级元素框的水平部分综合就等于父元素的width。

    margin-left,border-left,padding-left,width,padding-right,border-right,margin-right 这些属性与块级框的水平布局有关,这7个值加起来必须是元素包含块的宽度。这往往是块级框的width 值。这7个属性中,只有width,margin-left,margin-right 可设置为auto,其余都必须设置为特定的值或者默认为0。

    ###使用 auto

    • 如果在margin-left、margin-right、width中设置某一个为auto,另外两个设置为特定的元素,则设置为auto 的属性会确定所需要的长度,从而使元素框的宽度等于父元素的width。

      如果三个属性都设定特定的值,无法撑满父元素的width,则根据从左向右的文档流会自动将margin-right 设置为auto,来填补所有的距离。

    • 如果只设置了margin-left:autowidth:automargin-right:autowidth:auto 则设置为auto 的外边距变为0。
    • 如果只设置margin-left:automargin-right:auto,width 为一确定值,则元素在其父元素中居中,比较常用,另text-align:center 只应用于块级元素的内联内容。
    • 如果三个属性都设置为auto,则两个外边距都设置为0,而width会尽可能宽。与默认情况相同,即没有设置margin,width 没有显式设置,则外边距默认为0,width 为auto。

    负外边距

    要记住7个水平方向的属性的和一定等于父容器的width。

    替换元素

    如果width 为auto 则元素的宽度则是内容的固有宽度。

    ##垂直格式化
    如果正常流中一个块元素的margin-top 或margin-bottom 设置为auto,它会自动计算为0。

    如果没有显示声明包含块的height,百分数高度会重置为auto。

    auto 高度

    如果块级正常流元素设置为height:auto,显示时其高度将恰好足以包含其内联内容(包含文本)的行盒。

    如果块级正常硫元素的高度设置为auto,而且只有块级子元素,其默认高度将是从最高块级元素的外边框边界到最低块级子元素外边框边界之间的距离。故子元素的外边距会超出包含这些子元素的元素。

    若块级元素有上内边距或下内边距,或者有上边框或者下边框,其高度则是从其最高子元素的上外边距边界到其最低子元素的下外边距边界之间的距离。