HTML5 设置div标签以及其内容均为居中显示以及添加阴影

最新推荐文章于 2024-08-19 10:00:49 发布

wotu__

最新推荐文章于 2024-08-19 10:00:49 发布

阅读量5.1k

点赞数

分类专栏： HTML5 文章标签： HTML5 标签内外边框

本文链接：https://blog.csdn.net/hudajy/article/details/80517457

版权

HTML5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

先看看效果图片:

我们将div这一块设置为水平方向居中显示，以及调整其与上边框的距离。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>阴影内容相关</title>
		<style>
			*{
				margin: 0;
				padding: 0;//
			}
			.div{
				width: 300px;
				height: 300px;
				background-color: red;
				margin: 0 auto;
				/*设置div为水平居中显示*/
				text-align: center;
				/*设置div里面的内容为居中显示*/
				line-height: 200px;
				/*设置div里面的内容向下200px*/
				margin-top:100px ;
				/*设置div离顶部距离为100px*/
				box-shadow: 10px 5px 6px 5px black;
			}
		</style>
	</head>
	<body>
		<div class="div">
			我是div里面的内容
		</div>
	</body>
</html>

补充的知识点:

1.外边距:标签与标签之间的距离就是外边距

格式;
margin-top: ;
margin-right: ;
margin-left: ;
margin-bottom: ;

连写格式: margin: 上右下左;

margin属性本质上用于控制兄的关系之间的间隙 padding 一般用于控制父子关系(嵌套模型)
margin: 0 auto; //设置里面的盒子本身为水平居中显示 :注：此方法对垂直方向无效;
//设置为水平和垂直均为居中显示: margin: 150px auto; （150px举例)

margin: 0 auto; //设置盒子本身为水平居中;

2.内边距: 边框和内容之间的距离即为内边距
格式:
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
连写格式: padding: 上右下左;
省略时的规律:
上右下 -> 左边的取值和右边的一样
上右 -> 左边的取值与右边的一样下边的取值与上边一样
上 -> 其他三边取值与上边一样

给标签设置完内边距之后，标签占有的宽度以及高度会发生变化

3.部分div相关内容 :

<div>标签内设置字体、行高、间距等
div 简写形式
div.box$*5 即出现5个名称分别为box1 box2 ....的div tab键
<div>
height: 100px;
background-color: skyblue;
margin-top: 100px;//设置此板块里面内容距离上边界的距离
text-align: center;//设置div里面的内容为居中显示
line-height:100px;//设置div里面的内容距离div上边界的距离

display:inline block; //行内块元素
</div>