CSS的盒子模型
0 121

每个可视的HTML元素在页面上都会被渲染成一个矩形区域,通常被称为盒子模型。

 区域组成

盒子模型主要定义四个区域:

  • 内容(content)、
  • 内边距(padding)、
  • 边框(border)
  • 外边距(margin)。

容器元素的客户区域包含内边距(padding)和内容(content),但不包含边框(border)。因此在position=absolute的情况下,left和top属性指定的是子元素的外边距(margin)的左上角相对于父元素的内边距(padding)左上角的位置。

类型

盒子模型有两种类型:传统的content-box和CSS3之后才导入的border-box,由box-sizing属性定义。虽然border-box更位直观,但因为兼容的原因,缺省值仍然是传统的content-box。

  • content-box 
    width和height定义的是内容(Content)部分的宽度和高度而不是整个盒子的高度,内边距(padding)、边框(border)和外边距(margin)依次加在外面。背景会填充padding和content部分。

  • border-box 
    width和height定义包含边框(border),内边距(padding)和内容(content),但不包含外边距(margin) 

0 121
() 全部评论
所有回复 (0)

最新

  • 插件下载 129 0 1 发布

    使用方法:打开3dmax软件,把砖墙插件拖拽到 视图中。

    3dmax砖墙插件下载地址|点这里

  • 插件下载 179 0 1 发布

    适用版本:  3ds max 2016 - 2022

    使用方法:在3dmax桌面快捷图标,点击鼠标右键打开文件所在位置,找到scripts文件夹下的strapup文件夹,把开孔脚本拖拽到strapup文件夹内。

    3dmax开孔神器下载地址|点这里