CSS 框模型(Box Model)

CSS 框模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了框模型(Box Model)：

不同部分的说明：

  • Margin - 清除边框区域。Margin没有背景颜色，它是完全透明
  • Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
  • Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响
  • Content - 盒子的内容，显示文本和图像

摘自：W3CSCHOOL

http://www.w3cschool.cc/css/css-boxmodel.html

-------------------------------------------------------------------------------------------------------------------------------

BoxModule就像一个快递包裹：

Margin：快递塑料包装

Border：快递纸盒

Padding：纸盒里紧贴内壁的一层泡沫板

Content：你的东西

时间： 2024-12-20 01:10:24

CSS 框模型(Box Model)的相关文章

CSS 框模型( Box module )

框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的调度.人物之间的关系.人物和景物的关系等的安排.大同小异,CSS 的布局也是一样. CSS 的布局,包含两个大部分: 元素:元素及其组成,类似电影布局中人物的高矮胖瘦.衣着配饰等,以及场景中的桌椅板凳,物品等等. 定位:元素的位置, 类似电影场景的中对环境的设置,人物作为元素,他们之间的关系会影响其

css盒模型 Box Model

属性:内容(content).内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型. 盒子的分类:不同的元素产生的盒子类型可能不同, 一个元素,产生什么样的盒子,取决于它CSS的display属性 display:none:不生成盒子 display:inline:行盒 display:block:块盒 盒子组成: Margin(外边距) - 清除边框外的区域,外边距是透明

CSS 框模型

1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.外边距和边框的方式. 如左下图表示元素内容.内边距.外边距和边框四者关系 2.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 在 CSS 中,width 和 height 指的是内容区域的宽度和高度.增加内边距.边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸. 假设框的每个边上有 10 个

CSS框模型（框模型概述、内边距、边框、外边距、外边距合并）

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 内边距.边框和外边距都是可选的,默认值是零.但是,许多元素将由用户代理样式表设置外边距和内边距.可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式.这可以分别进行,也可以使用通用选择

CSS 框模型概述

CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. CSS 框模型概述 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 提示:背景应用于由内容和内边距.边框组成的区域. 内边距.边框和外边距都是可选的,默认值是零.但是,许多元素将由用户代理样式表设置外边距和内边距.可以通过将元素的 margin 和 padding 设置为零来覆盖

CSS框模型，浮动，定位以及其他属性

1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式 element : 元素. padding : 内边距,也有资料将其翻译为填充. border : 边框. margin : 外边距,也有资料将其翻译为空白或空白边. 围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”.设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. * { margin: 0; padding: 0;}

css框模型、定位、浮动

一.CSS 框模型概述 1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框.外边框的方式. 2.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 提示:背景应用于由内容和内边距.边框组成的区域. 二.css内边框 1.元素的内边距在边框和内容区之间.控制该区域最简单的属性是 padding 属性. 2.CSS padding 属性定义元素边框与元素内

盒子模型(Box Model)

盒子模型(Box Model) ■ 盒子模型--概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属性. 细节说明: ?html 元素都可以看成一个盒子 ?盒子模型的参照物不一样,则使用的 css 属性不一样.比如:从 div1 的角度看,是 margin-right,从 div2 看,则是 margin-left. ?如果你不希望破坏外观,则尽量使用 margin 布局,因为 padding 可

关于CSS框模型及定位的概念

一.CSS框模型(box model)包含了边框(boder).外边距(margin).内边距(padding).宽(width).高(height).元素(element).背景应用于由内容.边框.内边距组成的区域.单边内边距的属性有四个,分别设有上.右.下.左内边距:padding —top   padding—right  padding—bottom  padding—left. 内边距数值可以是阿拉伯数字(单位厘米),也可以是百分比数值.边框的样式在boder—style中设置,可以定