CSS 盒子模型（Box Model）

盒模型由content（内容区域），padding（内边距），border（边框），margin（外边距）组成。
有两种标准，一种是标准盒子模型（W3C盒子模型），另一种是IE盒子模型（怪异盒子模型）。
当对一个文档进行布局的时候，浏览器的渲染引擎会根据这两个标准的其中一个将所有元素表示为一个个矩形的盒子。
这两种标准对 height 和 width 的计算方式不同，标准盒子模型只包括 content，IE盒子模型为 content + padding + border 。
可以通过CSS属性 box-sizing 来对这两种标准进行切换，当值为 content-box 时为标准盒子模型，值为 border-box 时为IE盒子模型。

CSS 盒子模型（Box Model）相关推荐

教你吃透CSS的盒子模型(Box Model)
目录 CSS 盒子模型(Box Model) 元素的宽度和高度浏览器的兼容性问题 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model&q ...
CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式...
CSS 框模型概述术语翻译 element : 元素. padding : 内边距,也有资料将其翻译为填充. border : 边框. margin : 外边距,也有资料将其翻译为空白或空白边. 在 ...
详细认识一下CSS盒子模型
定义 CSS把每个元素看成是一个个单独的框,这里就叫它"元素框"吧.而CSS 盒子模型 (Box Model) 可以理解成一种规范,它规定了元素框处理其"最里边的内容区域 ...
初识HTML（五）进阶：CSS盒子模型、页面布局
目录 CSS 盒子模型(Box Model) 页面布局浮动流制作导航栏如何页面布局定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...
CSS盒子模型和水平、竖直方向的布局
一.块元素.行内元素和行内块元素行内元素特征: (1)设置宽高无效 (2)对margin仅设置左右方向有效,上下无效:padding设置上下左右都有效,即会撑大空间 (3)不会自动进行换行块状元素 ...
php盒子模型,CSS 盒子模型
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个 ...
CSS 盒子模型、边框
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...
CSS 盒子模型（Box model）中的 padding 与 margin
编辑自 http://www.x6x8.com/IT/199.HTML 本文将讲述 HTML 和 CSS 的关键-盒子模型 (Box model) .理解 Box model 的关键便是 margin ...
css中盒子模型图片,CSS 盒子模型
盒子模型(Box Model) 一般的标签都是盒子,但是除了极个别的标签(例如:img.input标签)不是盒子盒子模型的属性 width 盒子内容的宽度 height 盒子内容的高度 margin ...

CSS 盒子模型（Box Model）

CSS 盒子模型（Box Model）相关推荐

最新文章

热门文章