盒⼦模型概述
1.认识盒⼦模型
ingan 所谓盒⼦模型就是把HTML页⾯中的元素看作是⼀个矩形的盒⼦，也就是⼀个盛装内容的容器。每个矩形都由元素的内容、内边距、边框和外边距组成。 具体可以把盒⼦模型⽐作为⼀个⼿机盒⼦模型：
⼀个完整的⼿机盒⼦通常包含⼿机、填充泡沫和盛装⼿机的纸盒。如果把⼿机盒⼦想象成HTML元素，那么⼿机盒⼦就是⼀个CSS盒⼦模型，其中的⼿机为CSS盒⼦模型的内容，填充泡沫的厚度为CSS盒⼦模型的内边距，纸盒的厚度为CSS盒⼦模型的外边距，当多个⼿机盒⼦放在⼀起时，它们之间的距离就是CSS盒⼦模型的外边距。
⽹页中的所有元素和对象都由上图所⽰的基本结构组成，并呈现出矩形的盒⼦效果。在浏览器看来，⽹页就是多个盒⼦嵌套排列的结果。其中，内边距出现在内容区域的周围，当给元素添加背景⾊或是背景图像时，该元素的背景⾊或背景图像也将出现在内边距中，外边距是该元素与相邻元素之间的距离，如果给元素定义边框属性，边框将出现在内边距和外边距之间。 野营房
需要注意的是，虽然盒⼦模型拥有内边距、边框、外边框、宽和⾼这些基本属性，但是并不要求每个元素都必须定义这些属性。
2.<div> 标记
div是英⽂division的缩写，意味“分割、区域”。<div>标记简单⽽⾔就是⼀个区块容器标记，可以将⽹页分割为独⽴的、不同的部分，以实现⽹页的规划和布局。<div>与</div>之间相当于⼀个“盒⼦”，可以设置外边距、宽和⾼，同时内部可以容纳段落、标题、表格、图像等各种⽹页元素，也就是⼤多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>。
在上⾯的图⽚中，定义了两对<div>，其中⼀对<div>中嵌套段落标记<p>。对两对<div>分别添加class属性，然后通过CSS控制其宽、⾼、背景颜⾊和⽂字样式等。多媒体控制器
注意：（1）：<div>标记最⼤的意义在于和浮动属性float配合，实现⽹页的布局，这就是常说的DIV+CSS⽹络布局。
（2）：<div>可以代替块级元素如<h>、<p>等，但是它们在语义上有⼀定的区别。
3.盒⼦的宽与⾼
⽹页是由多个盒⼦排列⽽成的，每个盒⼦都有固定的⼤⼩，在CSS中使⽤宽度属性width和⾼度属性height可以对盒⼦的⼤⼩进⾏控制。width和height的属性值可以为不同的单位的数值或相对于⽗元素的百分⽐，实际⼯作中最常⽤的是像素值。
delta并联机器人上图中，通过width和heigth属性分别控制段落的宽度和⾼度，同时对段落应⽤了盒⼦模型的其他相关属性，如边框、内边距、外边距等。符合CSS规范的盒⼦模型的总宽度和总⾼度的计算原则是：
茂发跳跳糖
1.盒⼦的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和
2.盒⼦的总⾼度=height+上下内边距之和+上下边框⾼度之和+上下外边距之和
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议