初识css之盒子模型-CSDN博客

本文链接：https://blog.csdn.net/logical_thinking/article/details/126184669

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、pandas是什么？
二、使用步骤
、
总结

前言

今天，我们来学习盒子模型，我们在浏览器中所看到的所有内容都是放在一个个盒子之内的

提示：以下是本篇文章正文内容

一、超链接的伪类选择器

在我们浏览网页的过程中会发现，我们的鼠标放在一些文字的上面的时候字体的颜色会发生变化，鼠标点击时未松开时也有变化，点击之后也变化。

下面就让我们看看是如何操作的。

上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a{
				text-decoration: none;
				color: black;
			}
			/* 链接访问前的默认样式 不可逆的 */
			a:link{
				color: aqua;
			}
			/* 访问后的样式 */
			a:visited{
				color: brown;
			}
			/* 鼠标悬浮时的样式 */
			a:hover{
				color: red;
				text-decoration: underline;
			}
			/* 鼠标单击未释放（鼠标激活时的样式） */
			a:active{
				color: cornsilk;
			}
			/* 写的顺序时 link-visited-hover-active */
		</style>
	</head>
	<body>
		<a href="">点击进入</a>
	</body>
</html>

二、边框

无论是什么都有其框，在浏览器中我们看到的一些线条有的便是边框，各个页面中我们都可以看到

这是怎么做的呢让我们来看代码；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.first,.second,.third{
				width: 300px;
				height: 300px;
				background-color: aqua;
				
			}
			.first{
				/* 水平居中 */
				text-align: center;
				/* 行高于高度一致令文本垂直居中 */
				line-height: 300px;
				/* 边框宽度 */
				border-width: 10px 20px 30px 40px ;
				border-color: red blue green tan; 
				border-style: dashed solid dotted solid;
				/* 
					边框的类型
				 none：默认无边框
				 dotted：定义一个点线边框
				 dashed：定义一个虚线边框
				 solid：定义实线边框
				 double：定义两个边框 两个边框的宽度和border-width的值相同
				 groove：定义3D沟槽边框  效果取决于边框颜色值
				 ridge：定义3D脊边框  效果取决于边框的颜色值
				 inset：定义一个3D嵌入边框  效果取决于边框的颜色值
				 outset：定义一个3D突出边框 效果取决于边框的颜色值
				 */
/* 				border-style: solid;
				/* 边框颜色默认与字体颜色一致也可以自定义设置 */
				/*border-color: aqua; */
				color: red;
				/* 
					边框综合设置
				 */
				/* border: 10px solid black; */
			}
			.second{
				/*top(上) right（右）bottom（下）left（左）  */
				border-right-width: 10px;
				border-bottom-style: solid;
				border-bottom-color: black;
				border-top-style: dashed;
				border-top-width: 10px;
				border-top-color: darkorchid;
				/* 单边综合设置 */
				border-bottom: 10px solid black;
			}
			.third{
				/*顺时针 ：top(上) right（右）bottom（下）left（左）  */
				border-width: 5px 10px 8px 6px;
				 border-style: solid dashed dotted solid;
				 border-color: red cadetblue firebrick salmon;
			}
		</style>
	</head>
	<body>
		<div class="first">123</div>
		<div class="second">321</div>
		<div class="third">132</div>
	</body>
</html>

三、边距

边距，顾名思义便是到盒子的边的距离

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.inner,
			.outter {
				width: 300px;
				height: 300px;
				background-color: red;

			}

			/* 盒子模型 margin+border+padding+content（内容区）
				拯救布局：margin+content（内容区 :border）
				box-sizing:border-box;
			 */
			.inner {
				background-color: lightblue;
				/* 顺序：top right bottom left */
				/* margin-bottom: 20px; */
				margin: 0 auto;
				/* padding：内边距，内容距离 父级标签 四周的边距 */
				padding: 50px;
				border: 10px solid;
				line-height: 300px;
			}

			
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="inner">456</div>
			<div class="outter">welcome</div>
		</div>
	</body>
</html>

四、自带样式的标签

在我们写代码时就能发现有的标签是有自己的样式的例如<h1></h1>

他有自己的字体大小、粗细

下面让我们看看那些标签自带样式；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 300px;
				height: 300px;
				margin: 0 auto;
				background-color: burlywood;
			}

			p,
			h1 {
				color: red;
				background-color: violet;
			}
			span{
				color: aqua;
				background-color: saddlebrown;
			}
		</style>
	</head>
	<body>
		<div>
			<h1>呦吼</h1>
			<p>你好</p>
			<span>呦呦哟</span>
		</div>

		<div>
			<h1>上下margin 21.44</h1>
			<h2>上下margin 19.92</h2>
			<h1>body 上下左右margin 8</h1>
			<p>段落 上下margin16</p>
			<ul>
				<li>上下margin16 左padding40</li>
			</ul>
		</div>
	</body>
</html>