CSS:盒子模型(box-model)_使用盒子模型技术制作网页-优快云博客

本文链接：https://blog.youkuaiyun.com/wzc3180043380/article/details/143362578

CSS处理网页时，它认为每个标签都包含在一个不可见的盒子里。

如果把所有的标签都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。

我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

盒子模型在网页中的直观表现:

(打开方式在上一章节中有详细说明)

1.内容区(content)

标签中放置内容的区域,文本,子标签等都是放在内容区中,可以通过width和height属性设置内容区的大小(需要注意的是,width,height设置的不是标签整体的大小) ,如果没有为标签设置内边区和边框大小,内容区大小可看作标签大小.

用公式表示

标签大小=内容区+内边区+边框

2.内边距(padding)

内容区与边框之间的空间 ,同时内边距的大小会影响到整个标签的大小,我们可以使用padding属性来设置内边距的大小,如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			a{
				padding-left: 像素数;/* 设置左方内边距大小 */
				padding-top:像素数 ;/* 设置上方内边距大小 */
				padding-right: 像素数;/* 设置右方内边距的大小 */
				padding-bottom: 像素数;/* 设置底部内边距大小 */
			}
		</style>
		
	</head>
	<body>
		<a></a>
		
	</body>
</html>

当然正式运用中除非我们特别的需要,否则是不需要每设置一个方向就写一条代码的,正常情况下,我们有两种简写语法

第一种,只适合上下,左右分别相同的情况

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			a{
				padding:上下像素数  左右像素数 ;
			}
		</style>
		
	</head>
	<body>
		<a></a>
		
	</body>
</html>

相比于第一种以及传统写法,第二种语法就要更加简单和灵活了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			a{
				padding:上像素数  右像素数  下像素数 左像素数;/* 总体来说按照顺时针顺序进行设置 */
			}
		</style>
		
	</head>
	<body>
		<a></a>
		
	</body>
</html>

3.边框(border)

可在标签周围创建边框,同时边框也是标签可见框的最外部

我们可以使用border属性设置边框的颜色,宽度,风格(注意:在设置时需要将这三条属性值同时设置,否则边框将无法显示)

颜色和像素大家必定很熟悉了,那我们就简单说明一下风格:

dotted （点线）

dashed （虚线）

solid （实线）

double （双线）

groove （槽线）

现在给大家举个例子,同时说明设置边框的基本语法:

border:像素数颜色风格;

(三个属性值的位置可以互换)

以下是举例,为了让大家看得清楚点我将字体设大了点,应该不影响理解:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			a{
				font-size: 100px;
			border: 2px bisque solid;	
			}
		</style>
		
	</head>
	<body>
		<a>人无完人</a>
		
	</body>
</html>

同时我们也可以为边框设置其他样式,比如圆角边框

使用属性border-radius即可以设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			a{
				font-size: 100px;
			    border: 2px bisque solid;
				border-radius: 10px;/* 将边框的四个角全部设置为圆角边框 */
			}
		</style>
		
	</head>
	<body>
		<a>人无完人</a>
		
	</body>
</html>

或者我们可以单独设置某个方向的角变为圆角边框

我们以左上为圆角边框为例,相信一个例子过后,你就明白其他方向的属性该怎么设置了.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			a{
				font-size: 100px;
			    border: 2px bisque solid;
				border-top-left-radius: 10px;/* 将左上角设置为圆角边框 */
			}
		</style>
		
	</head>
	<body>
		<a>人无完人</a>
		
	</body>
</html>

4.外边距(margin)

外边距是标签边框与周围标签相距的空间,使用margin属性设置大小,用法上与padding相似,

直接给margin属性添加像素数即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			a{
				margin: 像素数;/* 为所有方向设置外边距 */
				margin-left:像素数;/* 为左方设置外边距 */
				margin-right:像素数;/* 为右方设置外边距 */
				margin-bottom:像素数;/* 为底部设置外边距 */
				margin-top:像素数;/* 为上方设置外边距 */
				margin-left: auto;/* 将左右外边距设置为auto时,左右外边距将达到最大 */
				margin-right:auto;
				/* 上下外边距不能设置为auto,必须给具体的值 */
			}
		</style>
		
	</head>
	<body>
		<a>人无完人</a>
		
	</body>
</html>

最后,我们在布局中难免会受到系统默认布局的影响,所以我们可以首先清除系统默认样式

*{
				margin: 0px;
				padding: 0px;
			}

哈哈哈,熟悉的朋友就会知道这是借助了通用选择器的帮助,借助选择器的优先级不同,重新设置了默认样式

以上就是本章的全部内容啦,希望可以帮到大家!!!