今天学习的内容是盒子模型和定位技术，盒子模型中使用padding设置内边距，border设置边框，margin设置外边距；同时也学习了绝对定位和相对定位知识
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.box{
width: 300px;
height: 200px;
background-color: #8be690;
/* padding-top: 150px; */ /*上内边距为150*/
/* padding-bottom: 150px; */ /*下内边距为150*/
/* padding-right: 100px; */ /*右内边距为150*/
/* padding-left: 100px; */ /*左内边距为150*/
padding: 150px 100px; /*简写上下左右内边距分别为150 150 100 100，默认是按照 上右下左顺序*/
}
body{
margin: 0 ;
}
</style>
</head>
<body>
<div class="box">
<img src="https://img.php.cn/upload/article/000/000/003/5b596217c2850304.jpg">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用4种元素对齐方案</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #b84430;
text-align: center;/*在上级定义子级的水平居中*/
}
.span1{
font-size: 18px;
font-family: 微软雅黑;
color: #fff;
font-weight: bold;
line-height: 200px;
}
.box2{
width: 200px;
height: 200px;
background-color: #44a42a;
text-align: center;/*水平居中*/
display: table-cell;/*将内联元素转换为表格单元格*/
vertical-align: middle;/*垂直居中*/
}
.span2{
font-family: 微软雅黑;
font-size: 18px;
color: #FFF;
font-weight: bold;
}
.box3{
width: 200px;
height: 200px;
background-color: red;
display: table-cell;/*将内联元素转换为表格单元格*/
vertical-align: middle;/*垂直居中*/
text-align: center;
}
.box4{
width: 50px;
height: 50px;
background-color: yellow;
margin: auto;
text-align: center;
vertical-align: center;
}
.span3{
font-family: 微软雅黑;
font-size: 18px;
color: yellow;
font-weight: bold;
}
.span4{
font-family: 微软雅黑;
font-size: 18px;
color: red;
font-weight: bold;
line-height: 50px;
}
.box5{
width: 200px;
height: 200px;
background-color: #e4e4e4;
text-align: center;
display: table-cell;
vertical-align: bottom;
}
ul{
margin: 0;/*设置外边框*/
padding-left: 0;/*设置左内边距*/
}
li{
display: inline;/*将块级元素转换为行内元素*/
}
a{
font-family: 微软雅黑;
font-size: 18px;
color: #ff9835;
text-decoration: none;/*取消下划线*/
line-height: 50px;
}
</style>
</head>
<body>
<h2>1、子元素是单行行内元素</h2>
<h4>a.子元素是单行行内元素span</h4>
<h4>b.垂直居中是在行内元素上设置与父元素div设置一样的高度：line-height:200px</h4>
<h4>c.水平居中是在父元素中应用,水平居中：text-align:center</h4>
<div class="box1"><span class="span1">子元素单行行内元素</span></div>
<hr>
<h2>2、子元素是多行的内联文本</h2>
<h4>a.在父级将内联元素转换为表格单元格:display:table-cell</h4>
<h4>b.在父级设置水平居中，text-align:center</h4>
<h4>c.在父级设置垂直居中，vertical-align:middle</h4>
<div class="box2">
<span class="span2">子元素多行内联文本</span><br>
<span class="span2">PHP中文网-PHP.CN</span>
</div>
<hr>
<h2>3、子元素是块元素</h2>
<h4>a.在父级设置将内联元素转换为表格单元格:display:table-cell</h4>
<h4>b.在父级设置垂直居中:vertical-align:middle</h4>
<h4>d.在子元素设置自适应水平居中：margin:auto</h4>
<div class="box3"><span class="span3"></span>
<div class="box4"><span class="span4">块级</span></div>
</div>
<hr>
<h2>4、子元素是不定宽的块级元素</h2>
<h4>a.水平居中，子元素转为行内元素，父级设置：text-align:center</h4>
<h4>b.垂直居中：在父元素设置转换为单元格：display:table-cell</h4>
<div class="box5">
<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>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用五个色块制作一个十字架-绝对定位</title>
</head>
<style>
.box{
width: 600px;
height: 600px;
/*background-color: #757d7c;*/
position: relative; /*定位父级必须设置定位属性*/
}
.box1{
width: 200px;
height: 200px;
background-color: #ff695d;
position: absolute;
top: 0px;
left: 200px;
}
.box2{
width: 200px;
height: 200px;
background-color: #34803e;
position: absolute;/*绝对定位元素会脱离文档流*/
top: 200px;
left: 0;
}
.box3{
width: 200px;
height: 200px;
background-color: #ffe450;
position: absolute;/*绝对定位元素会脱离文档流*/
top: 200px;
left: 200px;
}
.box4{
width: 200px;
height: 200px;
background-color: #468ecb;
position: absolute;/*绝对定位元素会脱离文档流*/
top: 200px;
left: 400px;
}
.box5{
width: 200px;
height: 200px;
background-color: #b95be2;
position: absolute;/*绝对定位元素会脱离文档流*/
top: 400px;
left: 200px;
}
div {
text-align: center; /*水平居中：在父元素应用*/
}
span{
font-family: 微软雅黑;
font-size: 18px;
color: #fff;
line-height: 200px;/*垂直居中：在行内元素上设置行高与父元素div元素等高*/
}
</style>
<body>
<div>
<div class="box">
<div class="box1"><span>box1</span></div>
<div class="box2"><span>box2</span></div>
<div class="box3"><span>box3</span></div>
<div class="box4"><span>box4</span></div>
<div class="box5"><span>box5</span></div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
页面上看到的所有元素，都是盒子
内容区content
边框 border
内边距padding
外边距margin
边框的两种写法一样:
border-top-width:5px;
border-top-style:solid;
border-top-color:red;
border-right:10px solid green;
文档流是元素的排列方式，总是水平排列
外边距在垂直方向上会发生塌陷，以大数值为准
多个盒子的外边距重叠是不合计的，以大的为准
