Collection
Collection
box模型：编程实现盒模型的基本要素: 内容，内外边距与边框
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
div {
padding: 0;
margin: 0;
}
/*box1和box2初始大小相同，box1包含box2；box1因为设置了padding的缘故，width的实际大小要加上左右padding值，height实际大小同理。所以box1和box2不会完全重合*/
div.box1 {
border: 1px dashed red;
width: 160px;
height:160px;
background: royalblue;
padding: 20px;
}
div.box2 {
width: 160px;
height: 160px;
background: #000;
}
</style>
</head>
<body>
<!--编程实现盒模型的基本要素: 内容，内外边距与边框-->
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
编程实现最常用的四种元素对齐方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素对齐</title>
<style>
/*1、子元素是单行行内元素时*/
div.box1 {
width: 12rem;
height:4rem;
background: #dbb004;
text-align: center;
}
/*要实现水平居中，需把子元素行高设置为与父元素高度相同*/
div.box1 a {
line-height:4rem;
text-decoration: none;
}
/*2、子元素是多个行内元素*/
div.box2 {
width: 200px;
height: 100px;
background: lightblue;
text-align: center;
display: table-cell;
vertical-align: middle;
}
div.box2 a {
color: white;
text-decoration: none;
}
div.box3 {
width: 200px;
height: 100px;
background: lightcyan;
display: table-cell;
vertical-align:middle;
}
div.box3 .small {
width: 160px;
height: 60px;
background: lightcoral;
margin: auto; /*设外边距挤到中间*/
text-align: center;
}
div.box3 .small a {
line-height: 60px;
text-decoration: none;
text-shadow: 1px 1px 1px white;
}
/*4、子元素是不定宽的块元素时*/
div.box4 {
width: 300px;
height: 100px;
background: lightskyblue;
display: table-cell;
vertical-align:bottom;
}
div.box4 ul li {
width:20px;
height: 20px;
line-height: 20px;
border: 1px solid green;
border-radius: 50%;
list-style:none;
margin-left: 5px;
text-align: center;
float: left;
}
</style>
</head>
<body>
<h3>编程实现最常用的四种元素对齐方案</h3>
<h4>1、子元素是单行行内元素时，如<span><a></h4>
<div class="box1">
<a href="http://www.php.cn">PHP中文网</a>
</div>
<h4>2、子元素是多个行内元素时</h4>
<div class="box2">
<span>PHP中文网地址</span><br>
<a href="http://www.php.cn">点我摸我</a>
</div>
<h4>3、子元素是块元素时</h4>
<div class="box3">
<div class="small">
<a href="http://www.php.cn">PHP中文网</a>
</div>
</div>
<h4>4、子元素是不定宽的块元素时</h4>
<div class="box4">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例