收藏
批改状态：合格
老师批语：
定位布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}/*块元素自动居中*/
.main{width: 800px;margin: 0 auto}
.box1{width: 50px;height: 20px;margin: 20px 30px;padding: 20px;background: red}/*外边距：上下20px 左右30px 内填充上下左右各20px*/
.box2{text-align: center;}/*行内元素居中 多为文本等*/
.box3{text-align: center;}/*不定宽块元素转行内元素再居中*/
p{display: inline;}
.a{width: 100px;height: 100px;background: green;}
.box4{position: relative;width: 800px;height: 300px;}
.a1{position:absolute;top: 0;left: 100px;}/*相对于父元素定位*/
.a2{position:absolute;top: 100px;left: 0px;}
.a3{position:absolute;top: 100px;left: 200px;}
.a4{position:absolute;top: 200px;left: 100px;}
</style>
</head>
<body>
<div class="main">
<div class="box1"></div>
<div class="box2">
<span>1111</span>
<a href="javascript:;">2222</a>
</div>
<div class="box3">
<p>2222</p>
</div>
<div class="box4">
<div class="a a1"></div>
<div class="a a2"></div>
<div class="a a3"></div>
<div class="a a4"></div>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
绝对定位中需要注意相对于谁定位，需要在父元素中加相对定位，否则是相对于整个文档定位
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
