收藏
批改状态：合格
老师批语：缺少手写代码！
1.盒子模型：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型呀</title>
<style>
.div1{
width:300px;
height:300px;
background-color:lightgreen;
}
.div2{
width: 300px;
height: 300px;
background-color:lightpink;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
预览图：
2.元素对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素对齐呀</title>
</head>
<body>
<h3>元素对齐方式一</h3>
<!--1.子元素是单行行内元素：如：a,span -->
<!--a.水平居中：在父元素应用：text-align:center;-->
<!--b.垂直居中：在行内子元素上设置行高与父元素等高：line-light:200px;-->
<style>
.box1{
width: 200px;
height: 200px;
background-color:#FFE80E;
text-align:center;
}
.box1 a{
line-height:200px;
/*去下划线*/
text-decoration:none;
}
</style>
<div class="box1"><a href="">方式一呀！</a></div> <hr>
<h3>元素对齐方式二</h3>
<!--2.子元素是多行的内联文本-->
<!--a.水平居中：在父元素应用：text-align:center;-->
<!--b.垂直居中：在父元素：display:table-cell; vertical-align:middle -->
<style>
.box2{
width: 200px;
height: 200px;
background-color:#593bfc;
/*水平居中*/
text-align:center;
/*此元素会作为一个表格单元格显示（类似 <td> 和 <th>）*/
display:table-cell;
/*垂直居中*/
vertical-align:middle;
}
</style>
<div class="box2">
<span>对齐方式二呀！</span><br>
<span>是呀！对齐方式二呀！</span>
</div>
<hr>
<h3>元素对齐方式三</h3>
<!--3.子元素是块元素-->
<!--a.水平居中：子元素设置左右外自动适应容器margin：auto;-->
<!--b.垂直居中：在父元素：display:table-cell; vertical-align:middle; -->
<style>
.box3{
width: 200px;
height: 200px;
background-color:#ffff0a;
display:table-cell;
vertical-align:middle;
}
.box3 .child{
width: 100px;
height: 100px;
background-color:#39FF1B;
/*水平居中*/
margin:auto;
/*水平居中*/
text-align:center;
}
</style>
<div class="box3">
<div class="child">方式三呀！</div>
</div>
<hr>
<h3>元素对齐方式四</h3>
<!--4.子元素是不定宽的块元素-->
<!--a:水平居中：子元素转为行内元素，父级加：text-align:center;-->
<!--b.垂直居中：在父元素：display:table-cell; -->
<style>
.box4{
width: 200px;
height: 200px;
background-color:#ef27d8;
text-align:center;/*水平居中*/
display:table-cell;
vertical-align: middle;
/*位于底部*/
/*vertical-align:bottom;*/
}
ul{
margin:0;
/*padding:0;*/
padding-left:0;
}
.box4 ul li{
/*将块元素转行内元素*/
display:inline;
}
.box4 ul li a{
text-decoration:none;
}
</style>
<div class="box4">
<ul>
<li><a href="">方</a></li>
<li><a href="">式</a></li>
<li><a href="">四</a></li>
<li><a href="">呀</a></li>
<li><a href="">！</a></li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
预览图：
3.定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
body{
margin: 0;
}
.box{
width: 600px;
height: 600px;
/*background-color:grey;*/
/*定义父级必须设置地位属性：属性为相对定位position:relative*/
position:relative;
}
.div1{
width: 200px;
height: 200px;
background-color:#ef27d8;
position:absolute;
left: 200px;
}
.div2{
width: 200px;
height: 200px;
background-color:#39FF1B;
position:absolute;
top: 200px;
}
.div3{
width: 200px;
height: 200px;
background-color:#ffff0a;
position:absolute;
left: 400px;
top: 200px;
}
.div4{
width: 200px;
height: 200px;
background-color:#0388f1;
position:absolute;
left: 200px;
top: 400px;
}
.div5{
width: 200px;
height: 200px;
background-color:pink;
position:absolute;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
预览图：
总结：
元素对齐方式：
子元素是单行行内元素: 如a, span <br>
a:水平居中: 在父元素应用: text-align: center;
b:垂直居中: 在行内子元素上设置行高与父元素等高: line-height:200px;
子元素是多行的内联文本
a.水平居中：在父元素应用：text-align:center;
b.垂直居中：在父元素：display:table-cell; vertical-align:middle
子元素是块元素
a.水平居中：子元素设置左右外自动适应容器margin：auto;
b.垂直居中：在父元素：display:table-cell; vertical-align:middle;
子元素是不定宽的块元素
a:水平居中：子元素转为行内元素，父级加：text-align:center;
b.垂直居中：在父元素：display:table-cell;
位置定位：
绝对定位：position:absolute;
相对定位：position:relative;
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
