一个网页前端的样式和颜色的作用和区别和说明

一个网页的前端是通过结合HTML DOM和嵌套形成一个视图结合CSS样式装饰形成一个视图。它是通过接受用户交互请求并以事件机制响应用户交互操作而形成的。CSS 是前端页面表单中最重要的部分，它负责控制页面布局以及 DOM 元素的颜色和大小属性。

CSS中有一个众所周知的盒子模型理论，可以用来控制DOM的位置。基于div+css技术的“盒子模型”的出现，大大取代了传统的表格嵌套。

虽然非常好用，但是对于很多新手来说，很难弄清楚它的几个属性和内容之间的联系和区别。

盒子模型概念

所有的页面元素都可以看成一个盒子，占据一定的页面空间。通常，这些占用的空间往往比单纯的内容更大。因此，可以通过框的边框和距离等参数来控制内容的位置。

div+CSS 盒子模型

操作说明：

1、：中文叫，主要作用是控制外（外）的区域，是透明的。

2、：中文称为边框，就是内边距()和内容的边框。请注意，它不是透明的。

3、：中文叫，控制内容周围的区域，是透明的。

4、：内容，框的内容，显示文字和图片。

5、Css.width 和 Css。Css文件中设置的Div是内容的宽度和高度。

6、框的实际大小可能大于内容大小：

盒子模型的总宽度等于（宽度）+（左右）+（左右）+（左右）；

盒子模型的总高度等于（高度）+（上下）+（上下）+（上下）；

示例演示–原创风格

下面以实例演示的方式html 文本框透明，对 、 、 、 的作用和区别进行一一说明。

页面如图所示：

原创风格

代码：

HTML:

    

    

    


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() 的（边框）如下：

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

刷新页面如下图： 此时框的总宽度变成了200+30+30html 文本框透明，可以设置它的背景色和线条样式。

控制周围的元素区域。它没有背景颜色，完全透明。通过控制元素与周围元素的间隙距离；

设置 Div() 的（边距）如下：

margin: 30px auto;

刷新页面如下图： 此时框的总宽度变成了200+30()+30()+30()+30()。

：当元素的（填充）填充被清除时，释放的区域将被元素的背景色填充。

设置 Div() 的（边距）如下：

padding: 30px;

刷新页面如下图： 此时框的总宽度变成了200+30()+30()+30()+30()+30()+30()。

总结

1、每个属性的值可以是px、em、百分比等。

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

文章来源:http://www.toutiao.com/a6775007124863844867/

感谢您的来访，获取更多精彩文章请收藏本站。