在web页面设计中。都是一个大盒子中套着无数个小盒子，因此学好盒子的模型设计。元素的对其方式，和相对定位的使用。在日后的布局中是相当有用的。
以下是我的代码
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子、对齐方式、相对定位</title>
<style>
body{
margin: 0;
padding: 0;
}
h1,h3{
text-align: center;
}
.box1{
width: 300px;
height: 300px;
background:blue;
color: #efefef;
}
.box2{
width: 300px;
height: 300px;
background:green;
color: #efefef;
margin-top: 20px;
}
.box3{
width: 300px;
height: 300px;
background: peru;
color: #efefef;
text-align: center;
}
.box3 span{
line-height: 300px;
}
.box4 {
width: 300px;
height: 300px;
background: pink;
color: #efefef;
text-align: center;
/*display: table-cell;将这个盒子转换为一个单元格显示*/
display: table-cell;
/*vertical-align: middle; 垂直居中*/
vertical-align: middle;
}
.box5{
width: 300px;
height: 300px;
background: peru;
display: table-cell;
vertical-align: middle;
}
.box5 p{
width: 200px;
height: 200px;
background: blueviolet;
margin: 0 auto;
text-align: center;
line-height: 200px;
}
.box6{
width: 300px;
height: 300px;
text-align: center;
display: table-cell;
/*vertical-align: bottom;位于底部*/
vertical-align: bottom;
background: #0388f1;
}
ul{
margin: 0;
padding: 0;
}
.box6 ul li{
display: inline;
}
#box10{
width: 900px;
height: 900px;
/*position: relative;把父级用来相对定位*/
position: relative;
}
.a1{
width: 300px;
height: 300px;
background: #0388f1;
/*position: absolute;绝对定位*/
position: absolute;
top: 0;
left: 300px;
}
.a2{
width: 300px;
height: 300px;
background: #efefef;
/*position: absolute;绝对定位*/
position: absolute;
top: 300px;
left:0;
}
.a3{
width: 300px;
height: 300px;
background:indianred;
/*position: absolute;绝对定位*/
position: absolute;
top: 300px;
left: 300px;
}
.a4{
width: 300px;
height: 300px;
background: hotpink;
/*position: absolute;绝对定位*/
position: absolute;
top: 300px;
left: 600px;
}
.a5{
width: 300px;
height: 300px;
background: powderblue;
/*position: absolute;绝对定位*/
position: absolute;
top: 600px;
left: 300px;
}
</style>
</head>
<body>
<h1>盒子模型</h1>
<div class="box1">我是盒子1</div>
<div class="box2">我是盒子2</div>
<hr>
<h1>元素对齐的四种方式</h1>
<h3>第一种</h3>
<div class="box3"><span>子元素是单行的行内元素</span></div>
<h3>第二种</h3>
<div class="box4">
<span>子元素是多行的行内元素</span><br>
<span>子元素是多行的行内元素</span>
</div>
<h3>第三种</h3>
<div class="box5">
<p>子元素是块元素</p>
</div>
<h3>第四种</h3>
<div class="box6">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>子元素是不定宽的块元素</li>
</ul>
</div>
<hr>
<h3>绝对定位</h3>
<div id="box10">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
<div class="a5"></div>
</div>
<hr>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结，
昨晚的学习。没有像前晚的样式选择器的那么难啃。干货不是很多。总体来说还是收获挺多的。知道了元素的对齐方式，、
相对定位的使用。盒子模型的使用。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
