一个网页前端是由HTML DOM与嵌套组合形成视图结加上 CSS 样式的修饰形成视图,由JavaScript 接受用户的交互请求,以事件机制来响应用户交互操作而形成的。CSS是前台页面形式最重要的部分,它负责控制DOM元素的页面布局和颜色、大小的属性。

在CSS中有一著名的盒子模型理论,可以用它来控制DOM的位置。基于Div css技术的“盒子模型”的出现大大代替了传统的table表格嵌套。

虽然其十分好用,但是对于很多新手来说,却很难搞清楚它几个属性和内容之间的联系个区别。

盒子模型概念

所有页面的元素都可以看做一个盒子,占据着一定的页面空间。一般来说这些被占据的空间往往会比单纯的内容要大。因此,可以通过盒子的边框和距离等参数来控制内容的位置。

css中margin与padding的区别(一文带你掌握CSS基础)(1)

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的作用和区别。

页面如图所示:


css中margin与padding的区别(一文带你掌握CSS基础)(2)

原始样式

代码:

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; }

Border

元素边框:我们可以在CSS边框属性中设置元素边框的样式和颜色。

按如下代码设置Div(TsetMiddle)的Border(边框):

border-style:solid; border-width: 10px; border-color: aqua;

刷新页面如下图:此时TsetMiddle这个盒子的总宽度已经变成200 30 30了,而且可以设置其底色和线条样式。

css中margin与padding的区别(一文带你掌握CSS基础)(3)

Border

Margin

margin 控制周围的元素区域。margin 没有背景颜色,是完全透明的。通过margin可以控制元素与四周元素的空隙距离;

按如下代码设置Div(TsetMiddle)的margin(外边距):

margin: 30px auto;

刷新页面如下图:此时TsetMiddle这个盒子的总宽度已经变成200 30(Border) 30(Margin) 30(Border) 30(Margin)了。

css中margin与padding的区别(一文带你掌握CSS基础)(4)

Margin

Padding

Padding:当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充。

按如下代码设置Div(TsetMiddle)的margin(外边距):

padding: 30px;

刷新页面如下图:此时TsetMiddle这个盒子的总宽度已经变成200 30(Padding) 30(Border) 30(Margin) 30(Padding) 30(Border) 30(Margin)了。

css中margin与padding的区别(一文带你掌握CSS基础)(5)

Padding

总结

1、各属性的值可以用px为单位,也可以用em,百分比等。

2、可以利用盒子的各种属性,调整其内容在父容器中的位置。

,