收藏
批改状态：合格
老师批语：
这一课学习了盒子模型的基本要素，元素的常用对齐方式，绝对定位和相对定位，知道了怎么运用常用的对齐方式和绝对定位相对定位
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:lightgreen;
padding:10px 20px 30px 40px;/*内边距：上右下左*/
border-top:2px solid black;/*边框：宽，线型，颜色*/
border-right:5px solid blue;
border-bottom:10px solid yellow;
border-left:15px solid red;
margin:40px 30px 20px 10px;
}
</style>
</head>
<body>
<div class="box">基本要素</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
预览图：
![527PK))55F6`Q3URD8[]NCB.png](https://img.php.cn//upload/image/827/995/144/1534471895877029.png "1534471895877029.png")
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对齐方式</title>
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:lightblue;
text-align:center;
}
.box a{
line-height:200px;
}
.box1{
width:200px;
height:200px;
background-color:lightblue;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.box2{
width:200px;
height:200px;
background-color:lightblue;
display:table-cell;
vertical-align:middle;
}
.box2c{
width:100px;
height:100px;
background-color:lightgreen;
margin:0 auto;
}
.box3{
width:200px;
height:200px;
background-color:lightblue;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.box3 li{
display:inline;
}
.box3 ul{
padding:0;
margin:0;
}
</style>
</head>
<body>
<!--子元素是单行行内元素，水平居中: 在父元素应用: text-align: center，垂直居中: 在行内子元素上设置行高与父元素等高: line-height-->
<div class="box">
<a href="">php中文网</a>
</div>
<hr>
<!--子元素是多行的内联文本，水平居中: 在父元素应用: text-align: center，垂直居中: 在父元素: display:table-cell-->
<div class="box1">
<a href="">php中文网</a><br>
<a href="">百度</a>
</div>
<hr>
<!--子元素是块元素，水平居中: 子元素设置左右外边距自动适应容器，垂直居中: 在父元素: display:table-cell-->
<div class="box2">
<div class="box2c"></div>
</div>
<hr>
<!--子元素是不定宽元素，水平居中: 子元素转为行内元素，父级加: text-align:center，垂直居中: 在父元素: display:table-cell-->
<div class="box3">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
预览图：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位实例</title>
<style type="text/css">
.box1{
width:200px;
height:200px;
background-color:black;
position:relative;
top:0;
left:200px;
}
.box2{
width:200px;
height:200px;
background-color:red;
}
.box3{
width:200px;
height:200px;
background-color:green;
position:relative;
top:-200px;
left:200px;
}
.box4{
width:200px;
height:200px;
background-color:blue;
position:relative;
top:-400px;
left:400px;
}
.box5{
width:200px;
height:200px;
background-color:brown;
position:relative;
top:-400px;
left:200px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
预览图：
总结：
1、盒子模型的基本要素有内容、 内边距、边框、外边距
2、外边距在垂直方向上会发生塌陷，以数值大的为准
3、padding和margin的规则都是上右下左
4、position：absolute绝对定位是相对于父级元素改变位置
5、position：relative相对定位是相对于自身改变位置
6、知道如何运用元素的对齐方式
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
