欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-30 10:59:34
先看看效果图片: 我们将p这一块设置为水平方向居中显示,以及调整其与上边框的距离。

先看看效果图片:

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

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

(默认情况下为外阴影)