整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
个网页前端是由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、可以利用盒子的各种属性，调整其内容在父容器中的位置。
例
给div元素添加圆角的边框：
div
{
border:2px solid;
border-radius:25px;
}
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| border-image | 4.0 -webkit- | 9.0 | 4.0 -moz- | 5.0 -webkit- | 10.5 -o- |
属性定义及使用说明
border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性
提示： 这个属性允许你为元素添加圆角边框！
| 默认值: | 0 |
|---|---|
| 继承: | no |
| 版本: | CSS3 |
| JavaScript 语法: | object object.style.borderRadius="5px" |
语法
border-radius: 1-4 length|% / 1-4 length|%;
注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
| 值 | 描述 |
|---|---|
| length | 定义弯道的形状。 |
| % | 使用%定义角落的形状。 |
例子 1
border-radius:2em;
is equivalent to:
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
例子 2
border-radius: 2em 1em 4em / 0.5em 3em;
is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
边框可以是图片img，也可以是div元素，也可以是table，也可以是span
一、边框样式的三要素：
1、边框的宽度 border-width
2、边框的外观 border-style
3、边框的颜色 border-color
二、边框属性
语法：
border-width：像素值；
border-style: 属性值；none 无样式、dashed虚线、solid实线
border-color:关键字或者RGB值。举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12CSS</title>
<style type="text/css">
div
{
width=100px;
height=50px;
}
#div1
{
border-width: 2;
border-style: solid;
border-color:red;
}
</style>
</head>
<body>
<div id=div1>你好，嘻嘻</div>
<div>你好，嘻嘻</div>
</body>
</html>
边框三个属性简写
语法：
border:1px solid red;
等价于
border-width:1px;
border-style: solid;
border-color:red;举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12CSS</title>
<style type="text/css">
div
{
border: 1px solid red;
}
</style>
</head>
<body>
<div>你好，嘻嘻</div>
</body>
</html>
三、局部样式
一个框有四个边，如果想单独设置一个边就需要单独设定
1、上边框border-top
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
简写为：
border-top: 1px solid red;2、下边框border-bottom
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;
简写为：
border-bottom: 1px solid red;
3、左边框border-left
border-left-width: 1px;
border-left-style: solid;
border-left-color: red;
简写为：
border-left: 1px solid red;4、右边框border-right
border-right-width: 1px;
border-right-style: solid;
border-right-color: red;
简写为
border-right: 1px solid red;整体举例
*请认真填写需求信息，我们会在24小时内与您取得联系。
