zoukankan      html  css  js  c++  java
  • CSS 盒状模型简介

    框的构成以及相关 CSS 特性( property )

    结构

    为了给文档树中的各个元素排版定位(布局),浏览器会根据渲染模型1为每个元素生成四个嵌套的矩形框, 分别称作 content box、padding box、border box 和 margin box,它们是不可分割的,并可能会重合, 这就是 CSS 规范中描述的“框模型”(box model)。它是以 CSS 的角度去看一个元素被渲染后的抽象形态。 是一个元素自身的构成部分,不同于布局:多个元素在页面上的定位。

     
    注:padding、border 和 margin 区域都包括 top、right、bottom、left 四部分。如图所示("LM" 代表 left margin,"RP" 代表 right padding,"TB" 代表 top border……)。

    上面的大框,代表一个元素生成的矩形区域( box ),每一个 box 都包括一个 content 区域(元素的内容,如文本,图形等)以及环绕其四周的 padding (元素的内边距,填充部分)、border (元素的边框) 和 margin (元素的外边距) 区域。

    注:

    1. 元素在页面上定位及布局的规则,包括 'position' 和 'float' 等等,详见: W3C CSS2.1 -- 9 Visual formatting model
    边界

    上述四个区域(content、 padding、border 和 margin)分别有他们自己的边界,细化来说,每个区域都有 top、right、bottom、left 四个边界。

      • Content 边界/内边界:Content 边界环绕在由该元素的宽和高决定的一个矩形上,这个尺寸通常由该元素渲染后的内容决定。 这四个 content 边界组成的矩形框就是该元素的 content box。
      • Padding 边界:Padding 边界环绕在该元素的 padding 区域的四周,顾名思义,填充背景色,在此范围内有效。如果 padding 的宽度为0, 则 padding 边界与 content 边界重合。这四个 padding 边界组成的矩形框就是该元素的 Padding box。
      • Border 边界:Border 边界环绕在该元素的 border 区域的四周,如果 border 的宽度为0,则 border 边界与 padding 边界重合。 这四个 border 边界组成的矩形框就是该元素的 border box。
      • Margin 边界/外边界:Margin 边界环绕在该元素的 margin 区域的四周,如果 margin 的宽度为0,则 margin 边界与 border 边界重合。 这四个 margin 边界组成的矩形框就是该元素的 margin box。
  • 相关阅读:
    水平垂直居中的四种方法
    对js数组方法的部分了解以及面试内容
    第三阶段——jS——webApi编程——BOM
    对于VUE中slot的理解与学习
    第三阶段——jS——webApi编程——DOM
    初学node,关于使用req.body,打印的值为空解决方法
    第三阶段:javaScript 网页编程基本内容
    第三阶段——jS——webApi编程——移动端事件+JQuery+js面向对象
    2005129考勤登记
    200525考勤登记
  • 原文地址:https://www.cnblogs.com/hushaojun/p/6050207.html
Copyright © 2011-2022 走看看