Html中div学习使用过程中踩过的坑

2022-12-15 122

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： <div></div>标签是Html5中运用到的最重要的一个标签之一，本文是我对在div学习使用过程中踩过的坑进行的一个小总结系列

一.div横向排布

(一).float:left

在标签的使用中，通常默认是竖直排列如下图所示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
           .wyz{
                border: 2px solid #a1a1a1;
                padding: 10px 50px;
                background: #dddddd;
                width: 300px;
                border-radius: 25px;
            }
        </style>
    </head>
    <body>
        <div class="wyz">div1</div>
        <div class="wyz">div2</div>
    </body>
</html>

那么如果想要让多个div横向排布的话就需要用到float:left,如下图所示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
           .wyz{
                border: 2px solid #a1a1a1;
                padding: 10px 50px;
                background: #dddddd;
                width: 300px;
                border-radius: 25px;
                float:left
            }
        </style>
    </head>
    <body>
        <div class="wyz">div1</div>
        <div class="wyz">div2</div>
    </body>
</html>

(二).display: inline-block

但是第一种方法在div嵌套中可能会出现子div跳出父div的情况，如下图是我在更新个人博客过程中遇到的这种问题

那么应该如何解决这种问题呢？这就要用到另外的一个属性叫做：display: inline-block，将其添加到对应div的class中即可解决了问题(如下图所示)并且通过这种方法还可以使用margin-right或者margin-left属性来调整横向排布的两个div之间的距离(这两个属性这里不细讲了)

二.div阴影圆角版式化

(一).div圆角版式化

div的圆角版式化主要用到了一个属性叫做：border-radius,为其输入相应的参数值(如15px)则对应div四个边框角分别形成15°弧度

(二).div阴影版式化

div的阴影版式化主要用到了一个属性叫做：box-shadow，它的语法为：box-shadow: h-shadow v-shadow blur spread color inset;

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

最后这里提供一段上面图片的样式代码，有需要的可以复制下来自己改改使用（个人觉得我这个名片div做的还行⌇●﹏●⌇）

.div{
      display: inline-block;
      background: #86c7ff; 
      text-align:center;
      letter-spacing:2px;
      vertical-align: text-top;
      width:337px;
      height:185px; 
      color: #5f84a8; 
      border: 1px #d7edff solid; 
      border-radius: 5px; 
      margin-right:10px;
      margin-bottom:18px;
      box-shadow:5px 5px 10px gray;
      background-color: #A9C9FF;
      background-image: linear-gradient(180deg, #A9C9FF 0%, #e1ffbb 100%);
}