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

程序员文章站 2022-05-27 17:14:28

先看看效果图片: 我们将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: 水平偏移垂直偏移模糊度阴影扩展阴影颜色内外阴影

(默认情况下为外阴影)

上一篇：怎么识别恋爱中男人的套路和真心？

下一篇：哪位唐代公主曾经欲政变并毒杀皇帝