频道栏目
首页 > 资讯 > HTML 5 > 正文

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

18-06-02        来源:[db:作者]  
收藏   我要投稿

先看看效果图片:

我们将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>

		margin: 10px 20px; //设置当前所在标签(自身)的上下间距以及左右间距

4.添加阴影部分:

给盒子添加阴影:

格式: box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影

(默认情况下为外阴影)

相关TAG标签
上一篇:判断URL中的中文参数是GB2312还是Utf-8编码
下一篇:图片以Base64编码方式,并以byte类型保存到数据库的方法
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站