css局部概念的理解：

2023-08-17 23:08:40

1、DIV-Padding理解：
一直以来对div中的padding属性，一直不理解，使用最多的也就是margin，padding是div的内空间的相对距离，margin是div的外部相对位置，如果用一个箱子来标识div,那么padding就是从箱子的边缘到箱子内部需要隔离的距离，而margin这是箱子的边缘到箱子的外部所需要间隔的距离；

2、图片的相对位置，比如原理图片中嵌入一个新的图片，如要实现下图所示效果：

在普通图片上面，再叠加一个图片（预订），那么这个就需要页面图片的叠加，html5代码如下：

<div class="divlogpage">

            <img height="130" width="100%"  src="data:image/loginback.png"/>

            <div class="divlogpageinfo">

                <p>

                    <label for="username">账号：</label>

                    <input type="text" id="username" name="username" value="" placeholder="用户名" required/>

                </p>

                <hr/>

                <p>

                    <label for="passwd">密码：</label>

                    <input type="password" id="passwd" name="passwd" value="" placeholder="密码"  required/>

                </p>

            </div>

        </div>

css代码如下：

.divlogpage{position:relative; margin:10px;height:150px;}

.divlogpage img{ position:absolute; z-index:-1;}

.divlogpageinfo {position:absolute; z-index:; margin:10px; width:92%; font-size:18px; font-weight:bold;}

主要还是通过z-index和路径的相对和绝对处理的；

码农公寓

相关文章