HTML5设置div标签以及其内容均为居中显示以及添加阴影实例讲解
程序员文章站
2024-01-30 10:59:34
先看看效果图片:
我们将p这一块设置为水平方向居中显示，以及调整其与上边框的距离。
先看看效果图片:
我们将p这一块设置为水平方向居中显示，以及调整其与上边框的距离。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>阴影内容相关</title>
<style>
*{
margin: 0;
padding: 0;//
}
.p{
width: 300px;
height: 300px;
background-color: red;
margin: 0 auto;
/*设置p为水平居中显示*/
text-align: center;
/*设置p里面的内容为居中显示*/
line-height: 200px;
/*设置p里面的内容向下200px*/
margin-top:100px ;
/*设置p离顶部距离为100px*/
box-shadow: 10px 5px 6px 5px black;
}
</style>
</head>
<body>
<p class="p">
我是p里面的内容
</p>
</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.部分p相关内容 :
<p>标签内设置字体、行高、间距等
p 简写形式
p.box$*5 即出现5个名称分别为box1 box2 ....的p tab键
<p>
height: 100px;
background-color: skyblue;
margin-top: 100px;//设置此板块里面内容距离上边界的距离
text-align: center;//设置p里面的内容为居中显示
line-height:100px;//设置p里面的内容距离p上边界的距离
display:inline block; //行内块元素
</p>
margin: 10px 20px; //设置当前所在标签(自身)的上下间距以及左右间距
4.添加阴影部分:
给盒子添加阴影:
格式: box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影
(默认情况下为外阴影)