收藏
批改状态：未批改
老师批语：
这节课主要学习了盒子模型，元素的对齐方式，定位
绝对定位案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box {
width: 600px;
heigth: 600px;
position: relative;
}
.box1 {
width: 200px;
height: 200px;
background-color: deeppink;
position: absolute;
left: 200px;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 200px;
}
.box3 {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 200px;
left: 400px;
}
.box4 {
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
left: 200px;
top: 400px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
盒子模型案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: green;
text-align: center;
margin: 0 0 30px 0;
line-height: 200px;
}
.box2 {
width: 200px;
height: 200px;
background-color: deeppink;
margin: 50px 0 0 0;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="box1">我是一个盒子一</div>
<div class="box2">我是一个盒子二</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
元素对齐方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素对齐方式</title>
</head>
<body>
<h3>元素对齐方式</h3>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #ffff0a;
text-align: center;
}
.box1 a {
line-height: 200px;
}
.box2 {
width: 200px;
height: 200px;
background-color: lightgreen;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.box3 {
width: 200px;
height: 200px;
background-color: lightgreen;
display: table-cell;
vertical-align: middle; /*垂直居中*/
}
.box3 .child {
width: 100px;
height: 100px;
background-color: lightcoral;
/*margin-left: auto;*/
/*margin-right: auto;*/
margin: auto; /*水平居中*/
}
.box4 {
width: 200px;
height: 200px;
background-color: lightblue;
text-align: center; /*水平居中*/
display: table-cell;
vertical-align: bottom; /*位于底部*/
}
ul {
margin: 0;
padding-left: 0;
}
.box4 li {
display: inline; /*将块元素转为行内元素*/
}
</style>
<div class="box1"><a href="">你好啊</a></div>
<div class="box2">
<span>php中文网</span> <br>
<span>www.php.cn</span>
</div><hr>
<div class="box3">
<div class="child"></div>
</div>
<hr>
<div class="box4">
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
课后小结：
盒子模型：一个元素是由 外边距magin ,内边距padding, 边框border,内容content组成的
内外边距的简写：都是上 右 下 左 顺时针 如：padding: 20px 30px 40px 50px 上右下左内边距分别是
20 30 40 50 。
当左右相等的时候可以简写成：magin:20px 30px 就是上下20 左右30； magin；30px 40px 50px
是上30 左右40 下50 只记住一点 左右排在第二的位置
元素对齐方式；
1子元素是行元素 a.水平对齐 text-algin b.垂直对齐 line-height:父元素的高
2.子元素是多行内联文本
a.水平对齐 text-algin b.垂直居中 将父元素的显示方式设置为单元格 display；table-cell vertical-algin:middle:
3.子元素是块元素 a.水平对齐 margin:auto b.垂直居中 display；table-cell vertical-algin:middle:
4.子元素是不定宽的块级元素
a.水平对齐 将子元素变成行元素 display:line text-algin
b.b.垂直居中 display；table-cell vertical-algin:middle:
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
