整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
个网页前端是由HTML DOM与嵌套组合形成视图结加上 CSS 样式的修饰形成视图，由JavaScript 接受用户的交互请求，以事件机制来响应用户交互操作而形成的。CSS是前台页面形式最重要的部分，它负责控制DOM元素的页面布局和颜色、大小的属性。
在CSS中有一著名的盒子模型理论，可以用它来控制DOM的位置。基于div+css技术的“盒子模型”的出现大大代替了传统的table表格嵌套。
虽然其十分好用，但是对于很多新手来说，却很难搞清楚它几个属性和内容之间的联系个区别。
所有页面的元素都可以看做一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往会比单纯的内容要大。因此，可以通过盒子的边框和距离等参数来控制内容的位置。
Div+CSS 盒子模型
说明：
1、Margin：中文叫外边距，主要作用是控制边框外（Border以外）的区域，外边距是透明的。
2、Border：中文叫边框，是围绕在内边距（Padding）和内容外的边框。注意，它不是透明的。
3、Padding：中文叫内边距，控制内容周围的区域，内边距是透明的。
4、Content：内容，盒子的内容，显示文本和图像。
5、在Css文件中设置的Div的Css.width和Css. height就是内容的宽和高。
6、盒子实际尺寸有可能大于内容尺寸：
盒子模型的总宽度等于content（宽）+padding（左右）+border（左右）+margin（左右）;
盒子模型的总高度等于content（高）+padding（上下）+border（上下）+margin（上下）;
接下来通过实例演示的方式来一一讲解Margin、Border、Padding的作用和区别。
页面如图所示：
原始样式
代码：
HTML:
<body>
<div class="TsetUpper"></div>
<div class="TsetMiddle"></div>
<div class="TsetDown"></div>
</body>
CSS:
.TsetUpper{
width: 400px;
height: 200px;
background-color: black;
position: relative;
margin: auto;
text-align: center;
}
.TsetMiddle{
width: 600px;
height: 200px;
background-color: red;
position: relative;
margin: auto;
}
.TsetDown{
width: 400px;
height: 200px;
background-color: black;
position: relative;
margin: auto;
text-align: center;
}元素边框：我们可以在CSS边框属性中设置元素边框的样式和颜色。
按如下代码设置Div(TsetMiddle)的Border（边框）：
border-style:solid;
border-width: 10px;
border-color: aqua;刷新页面如下图：此时TsetMiddle这个盒子的总宽度已经变成200+30+30了，而且可以设置其底色和线条样式。
Border
margin 控制周围的元素区域。margin 没有背景颜色，是完全透明的。通过margin可以控制元素与四周元素的空隙距离；
按如下代码设置Div(TsetMiddle)的margin（外边距）：
margin: 30px auto;刷新页面如下图：此时TsetMiddle这个盒子的总宽度已经变成200+30（Border）+30（Margin）+30（Border）+30（Margin）了。
Margin
Padding：当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
按如下代码设置Div(TsetMiddle)的margin（外边距）：
padding: 30px;刷新页面如下图：此时TsetMiddle这个盒子的总宽度已经变成200+30（Padding）+30（Border）+30（Margin）+30（Padding）+30（Border）+30（Margin）了。
Padding
1、各属性的值可以用px为单位，也可以用em，百分比等。
2、可以利用盒子的各种属性，调整其内容在父容器中的位置。
order 盒子边框
复合属性。设置对象边框的特性。
盒子边框三要素：
① 边框粗细
② 边框样式
③ 边框颜色
语法：border: border-width | border-style | border-color ;
边框四边的粗细、样式、颜色，以及上下左右每个位置的样式属性都是可以单独调整的。
边框的颜色不是必要的，如果不指定颜色，默认颜色为黑色，但必须为盒子指定宽高。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>使用 border-style 可为盒子边框设置样式，以下示例为实线
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid;
}效果：
示例 CSS 代码
如果需要设置不同方向的样式属性，可以写在一句 CSS 代码里，比如说下面这段代码，上下实线，左右虚线。
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid dashed;
}效果：
属性值解释none无轮廓。 border-color将被忽略，border-width计算值为0，除非边框轮廓为图像，即border-image。hidden隐藏边框。IE7及以下尚不支持dotted点状轮廓。IE6下显示为dashed效果dashed虚线轮廓solid实线轮廓double双线轮廓。两条单线与其间隔的和等于指定的border-width值groove3D凹槽轮廓ridge3D凸槽轮廓inset3D凹边轮廓outset3D凸边轮廓
使用 border-width 可为盒子边框设置粗细，以下示例边框为 5px 粗细
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width: 5px;
}效果
示例 CSS 代码
如果需要设置不同方向的边框粗细，可以写在一句 CSS 代码里。
比如说下面这段代码，上下2px，右2px，左5px。
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width:2px 2px 2px 5px;
}效果：
可直接输入
颜色的英文名称
rgb值
十六进制
使用 border-color 可为盒子边框设置颜色，以下示例边框颜色为红色。
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width:2px 2px 2px 5px;
border-color: red;
}效果：
示例 CSS 代码
上面有两个示例讲述如何设置不同方向的属性，border-color 也是相同使用方法，此处就不做示例了。
如果你需要同时设置盒子的粗细、样式、颜色，那么你可以将他们的样式表写在同一行代码里。
例如：
/* CSS代码 */
div{
border-top: 5px solid red;
}这段代码指定了上边框的三个属性：粗细、样式、颜色
border-top 包含了：
其他同理
先来看一个示例
/* CSS代码 */
div{
width: 100px;
height: 100px;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid green;
border-left: 50px solid pink;
}效果：
细心的你，一定发现了 border 的边框四条边交接处是斜角。
此刻我们把盒子的宽高设置为 0
/* CSS代码 */
div{
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid green;
border-left: 50px solid pink;
}效果：
是不是完完全全像四个三角形一样。
我们只需要把上边和左右两边的三角形隐藏起来，它不就是一个三角形了。
为 border-color 指定 transparent 值，使盒子边框颜色变透明
/* CSS代码 */
div{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid green;
border-left: 50px solid transparent;
}效果：
把另外三条边透明之后，就只剩一个三角形了。
完
部分资料引用自：
SS盒子模型
提到盒子大家应该可以想到很多生活中的例子，例如纸盒、收纳盒、垃圾桶等等立体的盒子。这些盒子和CSS中的盒子有很多的相似点，都有高度宽度都可以装东西。那么我们来一起探究一下什么是盒子模型？
概念：使用盒子模型来盛放网页中的各种元素，在网页设计中，内容指文字、图片等元素，也可以是盒子之间的嵌套。填充只有宽度高度属性，可以理解为填充物（padding），而盒子的材料厚度就是边框（大小、线性、颜色），盒子与盒子之间的距离（margin）就是间距。
Box Model CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型的组成由width、height、border、padding、margin来描述。
margin是什么？
例如生活中的箱子，两个箱子并排放在一起，他们两个之间的间距（margin）被称为外边距。分为上右下左四个方向。
padding是什么？
当我们往盒子里边放了一些贵重的物品时（小心易碎！），需要在物品和盒子之间放置一些填充物，这些填充物（padding）被称为内边距。同样内边距分为上右下左四个方向。
在盒子模型中，width,height指的是内容区域的的尺寸。增加内外边距不会影响内容区域的尺寸，但是会影响元素的总尺寸。 所以当我们去计算一个元素应该在页面呈现多大我们需要去合理的设置相关的属性达到我们需要的效果。
探究一下padding与margin不同的值所体现的效果。
example
*请认真填写需求信息，我们会在24小时内与您取得联系。
