学习笔记-盒子模型应用1

最新推荐文章于 2021-11-05 17:00:20 发布

yin_991

最新推荐文章于 2021-11-05 17:00:20 发布

阅读量450

点赞数

文章标签： html css div布局盒子模型

本文链接：https://blog.csdn.net/yin_991/article/details/78745795

版权

很多时候在网站上可以看到页面布局中有许多类似小卡片似的小布局。

打开谷歌浏览器，按下F12键，随便点击一个小卡片，在右下方的盒子模型那里便可查看盒子的外边距margin、内边距padding、边框border、内容宽度、高度等信息，同时相应的源代码也在中间窗口显示了。这里可知用了div布局，最右方有css样式。

为了做成以下效果，首先写了HTML的结构代码，分析这个案例可知，外层用一个大的div，里面有4个div，分别上下排列。上面一个样式，下面三个同样。

		<body>	<div class="list">	<div class="list1">
			<p>css课程安排</p>
		</div>
		<div class="list2">
			<p>HTNL&CSS基础课程</p>
			45605人在学
		</div>
		<div class="list2">
			<p>HTNL&CSS基础课程</p>
			45605人在学
		</div>
		<div class="list2">
			<p>HTNL&CSS基础课程</p>
			45605人在学
		</div>
	</div>
</body>

以上代码得到下面这样的结构：

接下来就是给html结构加上css样式了，分析可以得知，先是外层div居中对齐，有一个背景颜色，有一个宽度。块级元素居中对齐的方式可以是设置属性width和margin，margin有两个值，最后一个一定是auto才能得到居中效果。得到初步样式：

<style>
		.list{
			background-color: #f2f4f6;
			width: 300px;
			margin: 0px auto;
		}
	</style>

但是这样最上方的效果并没有完全占据顶层，所以要考虑块级元素的内边距和外边距的设置，所以如果要在左边和上边不留空隙，最好是一开始就在样式里设置body、p、div这些块级元素的margin、padding属性值为0或0px，

body,p,div{
			margin: 0;
			padding: 0;
		}

效果如下：

然后是里面上方的div设置，有深的背景色，文字水平和垂直方向都居中，水平居中另一个方法是设置text-align属性（块级元素专用），而且有一个高度值150px。

.list1{
			height: 150px;
			background-color: #000;
			color: #fff;
			
			text-align: center;
		}

明显这里垂直方向没有居中，所以要设置一个上内边距值60px，但是设置了这个内边距后，根据盒子模型原理，整个div的高度也就变大了，所以文字也不能垂直居中。

.list1{
			height: 150px;
			background-color: #000;
			color: #fff;
			padding-top: 60px;
			text-align: center;
		}

实际上高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距，既然增加了上内边距60px，那就要在内容高度上减少60px,也就是height变成了90px。

.list1{
			height: 90px;
			background-color: #000;
			color: #fff;
			padding-top: 60px;
			text-align: center;
		}

再然后就是下面三个同样的div的设置了，首先还要加上分割线，但是最后一个就不要了。而且左右也有一个外边距的设置，文字有一个行高，小文字也有颜色和大小的设置。所以这里设的标签、属性有hr、margin、line-height、color、font-size。因为要给小文字加样式，所以给它加了一个span标签。最后是文字字体的设置 font-family: '微软雅黑';和里层上方的div里面文字的加粗效果font-weight: bold;。

.list2{
			line-height: 1.5em;
			margin: 10px 20px 10px 20px;
		}
		span{
			color: #008080;
			font-size: 14px;
		}

最终效果：

所有代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子模型</title>
	<style>
		.list{
			background-color: #f2f4f6;
			width: 300px;
			margin: 0px auto;


		}
		body,p,div{
			margin: 0;
			padding: 0;
			font-family: '微软雅黑';
		}
		.list1{
			height: 90px;
			background-color: #000;
			color: #fff;
			padding-top: 60px;
			text-align: center;
			font-weight: bold;
			font-size: 1.5em;
		}
		.list2{
			line-height: 1.5em;
			margin: 10px 20px 10px 20px;
		}
		span{
			color: #008080;
			font-size: 14px;
		}
	</style>
</head>
<body>
	<div class="list">
		<div class="list1">
			<p>css课程安排</p>
		</div>
		<div class="list2">
			<p>HTNL&CSS基础课程</p>
			<span>45605人在学</span><hr>
		</div>
		<div class="list2">
			<p>HTNL&CSS基础课程</p>
			<span>45605人在学</span><hr>
		</div>
		<div class="list2">
			<p>HTNL&CSS基础课程</p>
			<span>45605人在学</span>
		</div>
	</div>
</body>
</html>

end.