盒子模型相关属性值
简述盒子模型的概念(一)
简述盒子模型的概念(一)盒子模型的概念简述什么是盒子模型•盒子模型是CSS中用于描述和布局元素的一种模型。
•它将每个元素视为一个矩形盒子，由内容区域、内边距、边框和外边距组成。
盒子模型的组成部分•内容区域（Content Box）：盒子中用于存放实际内容的区域，包括文本、图片等。
•内边距（Padding）：内容区域与边框之间的空白区域，用于增加元素内部的空间。
•边框（Border）：包围内容区域和内边距的线条，用于界定元素的边界。
•外边距（Margin）：边框与相邻元素之间的空白区域，用于控制元素之间的间距。
盒子模型的特性和作用•宽度和高度：元素的宽度和高度由内容区域、内边距和边框共同决定。
•盒子模型的作用是定义元素的布局和尺寸，使得页面排版更为灵活。
盒子模型的相关属性•width：设置元素的宽度，包括内容区域、内边距和边框。
•height：设置元素的高度，包括内容区域、内边距和边框。
•padding：设置元素的内边距，可分别指定上、右、下、左四个方向的内边距。
•border：设置元素的边框，包括边框的宽度、样式和颜色。
•margin：设置元素的外边距，可分别指定上、右、下、左四个方向的外边距。
盒子模型的盒子类型•标准盒子模型（Content Box）：元素的宽度和高度仅包括内容区域。
•IE盒子模型（Border Box）：元素的宽度和高度包括内容区域、内边距和边框。
盒子模型的调整方式•box-sizing属性：用于调整盒子模型的表现方式，可取值为content-box（标准盒子模型）和border-box（IE盒子模型）。
•盒子模型的默认值：不同浏览器对盒子模型的默认值可能存在差异，因此需要在需要时进行调整。
以上是盒子模型的基本信息和相关概念的简述。
了解盒子模型对于掌握CSS布局和元素排版非常重要，它是构建网页布局的基础。
什么叫盒子模型？有几种模式？
什么叫盒⼦模型？有⼏种模式？什么是盒⼦模型？把所有的⽹页元素都看成⼀个盒⼦，它具有： content，padding，border，margin 四个属性，这就是盒⼦模型。
盒⼦模型有⼏种模式？1、W3C标准盒⼦模型2、IE盒⼦模型W3C标准盒⼦模型标准模式下，⼀个块的宽度 = width+padding(内边距)+border(边框)+margin(外边距)；W3C模型中： CSS中的宽（width）=内容（content）的宽 CSS中的⾼（height）=内容（content）的⾼IE盒⼦模型怪异模式下，⼀个块的宽度 = width+margin(外边距) （即怪异模式下，width包含了border以及padding）。
IE模型中： CSS中的宽（width）=内容（content）的宽+（border+padding）*2 CSS中的⾼（height）=内容（content）的⾼+（border+padding）*2CSS3 box-sizingbox-sizing:content-box||border-box||inheritbox-sizing:content-box; 将采⽤标准模式的盒⼦模型标准box-sizing:border-box; 将采⽤怪异模式的盒⼦模型标准box-sizing:inherit; 规定应从⽗元素继承 box-sizing 属性的值。
总结IE5.5及更早的版本使⽤的是IE盒模型。
IE6及其以上的版本在标准兼容模式下使⽤的是W3C的盒模型标准。
我们说这是⼀个好消息因为这意味着此盒模型问题只会出现在IE5.5及其更早的版本中。
只要为⽂档设置⼀个DOCTYPE，就会使得IE遵循标准兼容模式的⽅式⼯作。
什么是盒模型？
什么是盒模型？
什么是盒⼦模型？
⼤家好，今天我来给⼤家分享⼀下关于盒模型的知识。
盒⼦模型由通俗的来说就是：
宽=左右外间距+左右边框+左右内间距
⾼=上下外间距+上下边框+上下内间距
盒⼦模型有哪些属性？
margin外边距，可以是正值也可以是负值。
margin-top上外边距
margin-bottom下外边距
margin-left左外边距
margin-right右外边距
padding内边距，只可以是正值，不能有负值。
padding-top上内边距
padding-bottom下内边距
padding-left左内边距
padding-right右内边距
border边框，
border标签的写法：border：1px（边框尺⼨）dashed（虚线，solid实线）#ffffff（颜⾊值）
上⾯三部分的内容加上内容区就⼀起构成了我们所说css中的盒⼦模型。
实例
width和height就是我给这个盒⼦设置的宽和⾼。
padding：30px 30px；第⼀个30px指的是将这个盒⼦的上下内边距为50个像素⼤⼩
第⼆个30px指的是将这个盒⼦的左右内边距为30个像素的⼤⼩，因为padding会将整个盒⼦的⼤⼩拉⼤，所以要想盒⼦为原来的100*100⼤⼩就要将宽度减去padding的值。
border：3px solid #FF0000；指的是给盒⼦添加⼀个3尺⼨粗细，颜⾊为#FF0000的实线，solid换为dashed实线就会变成虚线效果margin：50px auto指的是将盒⼦的外边距设置为上下距离⽗元素50px，左右为居中状态。
这就是⼀个简单的盒⼦模型了。
background-origin属性
background-origin属性
在解释backgorund-origin属性之前，我们先来了解⼀下盒⼦模型。
下边的盒⼦模型包含边框，内边距和内容三部分。
⿊⾊代表边框区域，我们称之为边框盒⼦border-box
蓝⾊区域代表padding补⽩区域，我们称之为padding补⽩盒⼦padding-box
黄⾊区域代表内容区域，我们称之为内容盒⼦content-box
border-box区域的⼤⼩由border属性决定，就是边框的宽度。
padding-box区域的⼤⼩由盒⼦的padding属性决定。
content-box区域的⼤⼩由其中内容的多少决定。
就好⽐快递，⽐如你快递了⼀个电视。
整个快递就是⼀个盒⼦模型，外边的纸壳箱⼦就是border-box，它的宽度由纸壳箱⼦的厚度来决定。
中间的塑料泡沫就是padding-box区域。
⾥边的电视就是content-box内容区域。
回到background-origin这个属性上来，它的三个值就好理解了。
默认情况下，在没有对背景图⽚使⽤background-position定位的时候，坐标原点都是在左上⾓。
那么
border-box就是把背景图⽚的坐标原点设置在盒模型border-box区域的左上⾓
padding-box就是把背景图⽚的坐标原点设置在盒模型padding-box区域的左上⾓
content-box就是把背景图⽚的坐标原点设置在盒模型content-box区域的左上⾓。
盒模型宽高计算方式
盒模型宽高计算方式
盒模型是CSS中一个很重要的概念，它用来描述网页中的元素是如何计算宽度和高度的。
盒模型由四个部分组成：内容框（content box）、内边距（padding）、边框（border）和外边距（margin）。
1. 内容框（content box）：内容框是元素实际显示内容的部分，它的宽度和高度由元素的width和height属性决定。
2. 内边距（padding）：内边距是内容框与边框之间的空间，它的宽度和高度由元素的padding属性决定。
3. 边框（border）：边框是内容框和外边距之间的一条线，它的宽度和高度由元素的border属性决定。
4. 外边距（margin）：外边距是元素与其他元素之间的空间，它的宽度和高度由元素的margin属性决定。
盒模型的宽度和高度的计算方式可以通过下面的公式来表示：
总宽度=左边距+左内边距+左边框+内容框+右边框+右内边距+右边距总高度=上边距+上内边距+上边框+内容框+下边框+下内边距+下边距在实际应用中，我们一般会使用Box-sizing属性来控制元素的盒模型类型，它有两个值可选：
1. Content-box：表示使用标准盒模型，元素的宽度和高度只包括内容框，不包括内边距、边框和外边距。
2. Border-box：表示使用IE盒模型，元素的宽度和高度包括内容框、内边距和边框，但不包括外边距。
总结一下，盒模型的宽度和高度计算方式可以根据元素的不同属性来
决定，使用CSS的盒模型可以更准确地确定元素的尺寸和布局，从而更好
地实现网页设计效果。
CSS盒模型讲解
五、边界（margin）
1. 边界
margin 区域在边框之内。
margin 区域不应用背景。
margin-top
margin-right
margin-left
margin-bottom
2. 设置边界的大小
可以单独设置上、右、下、左边界的大小。
margin-top: 2px; margin-right: 4px; margin-bottom: 6px; margin-left: 8px;
4. 父子垂直边界重叠
父子元素的垂直边界相遇时，子元素的边界将重叠在父元素的 边界上。
#son { margin-top: 30px; }
content
4. 父子垂直边界重叠
父子元素的垂直边界相遇时，子元素的边界将重叠在父元素的 边界上。
#son { margin-top: 30px; }
5. 几种溢出方式的比较
overflow: visible;
overflow: auto;
CSS 盒模型
盒模型概述
盒的尺寸
主 要 内 容
边框（border）
填充（padding）
边界（margin）
盒的高度与文本溢出
盒模型概述
1. 盒模型的概念
CSS 将所有的网页元素都看做是一个矩形框，这个框由元
素的内容、填充（padding）、边框（border）和边界 （margin）组成。
属性介绍
内容(content)就是盒子里装的东西.
填充(padding)就是怕盒子里装的东西（贵重的）损坏而添加 的泡沫或者其它抗震的辅料. 边界(margin)则说明盒子摆放的时候的不能全部堆在一起， 要留一定空隙保持通风，同时也为了方便取出.
CSS盒子模型总结
CSS盒⼦模型总结在使⽤CSS进⾏⽹页布局时，我们⼀定离不开的⼀个东西————盒⼦模型。
盒⼦模型，顾名思义，盒⼦就是⽤来装东西的，它装的东西就是HTML元素的内容。
或者说，每⼀个可见的 HTML 元素都是⼀个盒⼦，下⾯所说的盒⼦都等同于 HTML 元素。
盒⼦的组成盒⼦的组成盒⼦的组成盒⼦的组成⼀个盒⼦由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。
会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒⼦的这三个部分。
⽽content则是HTML元素的内容。
盒⼦的⼤⼩盒⼦的⼤⼩指的是盒⼦的宽度和⾼度。
⼤多数初学者容易将宽度和⾼度误解为width和height属性，然⽽默认情况下width和height属性只是设置content（内容）部分的宽和⾼。
盒⼦真正的宽和⾼按下⾯公式计算：盒⼦的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距盒⼦的⾼度 = 内容⾼度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距上⾯说到的是 默认 情况下的计算⽅法，另外⼀种情况下，width和height属性设置的就是盒⼦的宽度和⾼度。
盒⼦的宽度和⾼度的计算⽅式由box-sizing属性控制。
box-sizing属性值content-box：默认值，width和height属性分别应⽤到元素的内容框。
在宽度和⾼度之外绘制元素的内边距、边框、外边距。
border-box：为元素设定的width和height属性决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和⾼度内进⾏绘制。
通过从已设定的宽度和⾼度分别减去 边框 和 内边距 才能得到内容的宽度和⾼度。
inherit：规定应从⽗元素继承box-sizing属性的值。
当box-sizing：content-box时，这种盒⼦模型成为标准盒⼦模型，当box-sizing: border-box时，这种盒⼦模型称为IE盒⼦模型。
盒子模型详解
盒⼦模型详解盒⼦模型盒⼦模型，英⽂即box model。
⽆论是div、span、还是a都是盒⼦。
但是，图⽚、表单元素⼀律看作是⽂本，它们并不是盒⼦。
这个很好理解，⽐如说，⼀张图⽚⾥并不能放东西，它⾃⼰就是⾃⼰的内容。
⼀个盒⼦中主要的属性就5个：width、height、padding、border、margin。
如下：width和height：内容的宽度、⾼度（不是盒⼦的宽度、⾼度）。
padding：内边距。
border：边框。
margin：外边距。
盒⼦模型的⽰意图：代码演⽰：上⾯这个盒⼦，width:200px; height:200px; 但是真实占有的宽⾼是302*302。
这是因为还要加上padding、border。
注意：宽度和真实占有宽度，不是⼀个概念！来看下⾯这例⼦。
我们⽬前所学习的知识中，以标准盒⼦模型为准。
标准盒⼦模型：IE盒⼦模型：上图显⽰：在 CSS 盒⼦模型 (Box Model) 规定了元素处理元素的⼏种⽅式：width和height：内容的宽度、⾼度（不是盒⼦的宽度、⾼度）。
padding：内边距。
border：边框。
margin：外边距。
CSS盒模型和IE盒模型的区别：在标准盒⼦模型中，width 和 height 指的是内容区域的宽度和⾼度。
增加内边距、边框和外边距不会影响内容区域的尺⼨，但是会增加元素框的总尺⼨。
IE盒⼦模型中，width 和 height 指的是内容区域+border+padding的宽度和⾼度。
注：Android中也有margin和padding的概念，意思是差不多的，如果你会⼀点Android，应该⽐较好理解吧。
区别在于，Android中没有border这个东西，⽽且在Android中，margin并不是控件的⼀部分，我觉得这样做更合理⼀些，呵呵。
<body>标签有必要强调⼀下。
很多⼈以为<body>标签占据的是整个页⾯的全部区域，其实是错误的，正确的理解是这样的：整个⽹页最⼤的盒⼦是<document>，即浏览器。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
续六
盒子模型
Why is this box?
盒模型是CSS的基石头；
padding:设置元素内容与边框的距离。
（包含）
margin:设置盒子（元素）与盒子（元素）的距离。
内边距表达方式:
1、padding四个值时，代表上右下左；如果有四个值是一样的时候，简写成padding:10px；
2、三个值的时候：padding：10px 10px 10px ；代表上左右下
3、两个值的padding：10px 10px；代表上下左右；
4、一个值的时候padding：10px；代表上下左右；
5、padding 是不可以设置负值。
规定了网页元素的如何显式已有元素的相互关系，css定义的所有元素都可以拥有像盒子一样的外形和空间。
即边框、内边距、外边距和内容区。
6、有关盒子的属性（边框、 margin、padding ）。
附加：CS3
content-box:w3c标准盒模型；elenment空间高度=内容高度+内距+边框+外距（外盒的尺寸计算）
border-box:IE8以下的盒模型；element空间高度=内容高度+外距（height/width包含了元素内容宽度、边框、内距-外盒尺寸）
填充，
padding在设定页面中一个元素的内容到元素边缘（边框）间的距离，称为内边距。
用法：
1、用来调整内容在容器中的位置关系。
2、用来调整子元素在父元素中的位置关系。
此时padding需要加在父元素上。
3、padding值是额外加在原有元素大小之上的，想保证元素大小不变，需要从元素的宽高上减掉后添加的padding值。
Margin不影响盒子的宽高。
当两个垂直边距相遇时，它们将形成一个边距。
合并后的外边距的高度=两个发生合并的外边距的高度中的较大者。
设置：margin-top/bottom；给父元素设置边框或是设置overflow：hidden；
当父元素包含子元素时margin-top传递到父级。
（内边距替代外边距）。