本节课主要学习了盒模型,定位。
1、编程实现盒模型的基本要素: 内容，内外边距与边框，并背诵padding与margin的简写规则；
（1）padding用于容器和内容之间，margin用于容器和容器之间
（2）简写规则
四个属性值的时候依次定义的是上-右-下-左
两个属性值的时候定义的是上下-左右
3个属性值的时候上-左右-下三部分
收藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
/*外边距比较大的覆盖到外边距较小的,外边距在垂直方向的塌陷*/
.box1{
width:100px;
height: 100px;
background-color: lightblue;
margin: 20px 30px 40px 50px;
padding: 20px 30px 40px 50px;
}
.box2{
width:100px;
height: 100px;
background-color: lightcoral;
margin: 20px 30px 40px;
padding: 20px 30px 40px;
}
.box3{
width:100px;
height: 100px;
background-color: lightcoral;
margin: 20px 20px;
padding: 20px 20px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2、编程实现最常用的四种元素对齐方案；
（1）子元素是单行内元素：如a，span
a:水平居中，在父元素应用：text-align:center
b:垂直居中，在行内子元素上设置行高与父元素等高：line-height；
（2）子元素是多行行内文本
a:水平居中，在父元素应用：text-align:center
b:垂直居中，在父元素上：display：table-cell
（3）子元素是块元素
a、水平居中：子元素设置左右外边距自动适应
b、垂直居中，在父元素上：display：table-cell
（4）子元素是不定宽的块元素
如li
a、水平居中：将子元素转为行内元素，父级元素：text-align
b、垂直居中，在父元素上：display：table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素对齐方式</title>
</head>
<body>
<h3>元素对齐方式</h3>
1、子元素是单行内元素：如a，span <br>
a:水平居中，在父元素应用：text-align:center;<br>
b:垂直居中，在行内子元素上设置行高与父元素等高：line-height；
<style>
.box1{
width: 200px;
height: 200px;
background-color: coral;
text-align: center;
}
.box1 a{
line-height: 200px;
}
</style>
<div class="box1">
<a href="">php中文网</a>
</div>
<hr>
2、子元素是多行行内文本
a:水平居中，在父元素应用：text-align:center;<br>
b:垂直居中，在父元素上：display：table-cell
<style>
.box2{
width: 200px;
height: 200px;
background-color: skyblue;
text-align: center;
display: table-cell;
vertical-align: middle;/*垂直居中*/
}
</style>
<div class=box2>
<span>php中文网</span><br>
<span>php.cn</span>
</div>
<hr>
3、子元素是块元素<br>
a、水平居中：子元素设置左右外边距自动适应<br>
b、垂直居中，在父元素上：display：table-cell
<style>
.box3{
width: 200px;
height: 200px;
background-color: skyblue;
display: table-cell;
vertical-align: middle;/*垂直居中*/
}
.box3 .child{
width: 100px;
height: 100px;
background-color: lightcoral;
/* margin-left: auto;*/
margin: auto;/*水平居中*/
}
</style>
<div class="box3">
<div class="child"></div>
</div>
4、子元素是不定宽的块元素
<br>
a、水平居中：将子元素转为行内元素，父级元素：text-align
b、垂直居中，在父元素上：display：table-cell
<style>
.box4{
width: 200px;
height: 200px;
background-color: lightcoral;
text-align: center;
display: table-cell;
vertical-align: middle;/*垂直居中*/
}
ul{
margin: 0;
padding-left: 0;
}
.box4 li{
display: inline;
}
</style>
<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>点击 "运行实例" 按钮查看在线实例
3、编程实现用五个色块制作一个十字架(相对定位和绝对定位任选一种实现即可)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
.box{
width: 600px;
height: 600px;
/*background-color: wheat;*/
/*绝对定位元素会脱离文档流，上右下左*/
position: relative;
}
.box1{
width: 200px;
height: 200px;
background-color: skyblue;
/*绝对定位元素会脱离文档流，上右下左*/
position: absolute;
left:200px;
}
.box2{
width: 200px;
height: 200px;
background-color: lightgreen;
position: absolute;
top:200px;
}
.box3{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top:200px;
left:200px;
}
.box4{
width: 200px;
height: 200px;
background-color: grey;
position: absolute;
top:200px;
left:400px;
}
.box5{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top:400px;
left:200px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4、学习总结
本节课重点对盒子模型、定位进行了学习
（1）盒子模型特点：
四方形，上下左右四条边框，商品与外包装间填充物，多个盒子间应有间隙 外边距
对应于盒子模型即以下四个部分：
内容content，内边距padding，边框border，外边距margin
（2）页面上看到的所有元素都是盒子
块级盒子，行内盒子/内联盒子
块级盒子可以当容器用，套盒子
盒子排列方式叫文档流
（3）元素的排列方式，先水平在竖直排列
外边距比较大的覆盖到外边距较小的， 外边距在垂直方向的塌陷
（4）绝对定位元素会脱离文档流。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
