盒模型

作者: loster | 来源:发表于2018-08-23 14:56 被阅读5次

    css布局中,最重要的是要理解盒模型。

    标准盒模型

    MDN盒模型

    content

    内容区,由宽高所覆盖以及内含子元素的区域

    padding

    内边距,在边框和内容之间的区域

    border

    边框,在padding之外的包裹内容

    margin

    外边距,与其他布局元素的间隔区域

    盒模型修改

    MDN盒模型修改

    使用box-sizing修改盒模型,将原本限定宽高的区域从content移到border外部。
    原始的width height所表示的区域是 content范围,
    使用 box-sizing:border-box修改之后,其content内容的宽高则为 height-border-padding,width-border-padding 所标识的区域,并且所有内容向内集中,外部宽高保持不变。
    两种方式都不包括margin所表示的范围。

    outline

    盒模型的轮廓线,除去margin的盒模型最大范围。outline本身是不占布局空间,因此不会影响布局。

    背景

    和box-sizing一样,背景也是有范围大小的,当给元素设定背景时,无论是图片,还是背景色,都会发现,背景范围超过内容区域。因此我们需要对背景做裁剪,使用 background-clip属性

    • 默认 border-box
      以元素的边框外沿作为背景覆盖的宽高,宽度为 width + padding+border,高度为height+padding+border
    • padding-box
      以内边框外沿作为背景覆盖宽高,宽度为 width + padding,高度为 height + padding
    • content-box
      以内容区域作为背景覆盖宽高 ,宽度为width 高度为height

    如果是行内元素,content的范围就是宽高的值。

    内容溢出

    当content内容超过限定的height,width时,会发生内容溢出,破坏需要的布局方式。在不修改宽高的情况下,解决办法

    overflow

    overflow属性标识该盒模型content的展示方式
    有三种 超出滚动 scroll,超出隐藏 hidden,还有默认。

    常规盒类型

    block

    默认情况下,水平方向块元素将会单独占行,段落前后有换行符。可以设置宽高可以修改content区域

    inline

    默认情况下,行内元素是无法设置宽高的,其content区域由内容撑起,当父级块元素内部无法放置行内元素时,会被折行,并且本身完整性将被折断。段落前后没有有换行符
    如果行内元素是文本,则设置margin、padding、border时,垂直方向上不占空间,水平方向会占据布局空间。

    inline-block

    默认情况下,行内块元素保留完整的margin、padding、border以及宽高设置,同时又和行内元素一样,水平方向和其余行内元素共享空间。

    可替换元素不可替换元素分类

    使用行内元素 img,input,textarea等时,发现其表现形式和行内块基本一致,这是因为,该元素本身并不是由标签决定的,而是将被浏览器替换为其他内容,因此,称为可替换元素。

    而其他直接表现为标签内容,称之为不可替换元素,例如span,a等等。

    相关文章

      网友评论

        本文标题:盒模型

        本文链接:https://www.haomeiwen.com/subject/ldgpiftx.html