HTML5 绝对定位的问题

Question

HTML5 绝对定位的问题

发布于
2019-11-28

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<title>HTML5 布局之路 - 表单实例</title>
<link rel="stylesheet" href="../css/reset.css" />
<style>
    .wrap {
        width:300px;
        height:100px;
        padding:12px;
        border:1px solid #933;
    }
    .user, .pass {
        position:relative;
        height:46px;
        padding-left:48px;
        border:1px solid #d9d9d9;
        border-radius:3px;
    }
    .user {
        margin-bottom:8px;
        background:url('../images/user.png') 0 0 no-repeat;
    }
    .pass {
        background:url('../images/pass.png') 0 0 no-repeat;
    }
    .wrap label, .wrap input {
        position:absolute;
        top:0;
        left:48px;
    }
    .wrap label {
        z-index:1;
        width:250px;
        height:100%;
        line-height:46px;
        color:#666;
        cursor:text; /*文字光标*/
    }
    .wrap input {
        width:250px;
        height:100%;
        border:none;
        background:transparent;
        line-height:46px;
        outline:none;   /*去掉高亮部分*/
    }
</style>

</head>
<body>

<form class="wrap" action="">
    <div class="user">
        <label id="userLabel" for="username">请输入用户名</label>
        <input type="text" name="username" id="username"/>
    </div>
    <div class="pass">
        <label id="passLabel" for="password">请输入密码</label>
        <input type="password" name="password" id="password" />
    </div>
</form>

</body>
</html>

$IS~]O_{{(9M_95L~@ZD{6RP.png$
背景图片大小为48*48

三个问题。

form宽度设置为300px 子级div默认沾满form的宽度，且有1px的边框宽度但是这里子级div宽度是跟form持平为300px而不是302px，为什么没有溢出？
绝对定位的问题，这里子级div有48px的左内边距，说明div的内容区域并没有300px，为什么绝对定位会从最左边的边框处开始定位，而不是从内容区域开始定位？
background:url('../images/pass.png') 0 0 no-repeat;这里的图片定位水平0 垂直0要如何看，麻烦讲解下？

html5 html

阅读 2.3k

1 个回答

得票最新

hfhan

29k72241

发布于
2019-11-29

✓ 已被采纳

1、想要子级div宽度为302，则需要设置子级div宽度100%或300px，同时box-sizing不为border-box

因为div的这个默认沾满是指边框+内外边距+内容区域，而不单单指内容区域

如果div设置了宽度，同时box-sizing设置为content-box(默认，ie怪异盒模型)，那么这个宽度就只是内容区域，如果box-sizing设置为border-box，那么这个宽度就只是边框+内边距+内容区域

2、脱离文档流的元素不收内边距的影响，因为不是同一层了，你可以理解为定位是以边框为边界