1. 文字水平居中和盒子水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 300px;
height: 100px;
border: 1px solid pink;
text-align: center;/*文字水平居中*/
margin: 10px auto;/*盒子水平居中，左右margin設爲auto*/
}
</style>
</head>
<body>
<div>文字水平居中 和 盒子水平居中</div>
</body>
</html>
2. 插入圖片和背景圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
section {
width: 400px;
height: 400px;
border: 1px solid #000;
}
section img {
width: 200px;/*插入圖片更改大小 width 和 height*/
height: 210px;
margin-top: 30px;/*插入圖片更改位置 margin 或 padding*/
margin-left: 50px;
}
aside {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/img01.jpg) 0 0 no-repeat;/*背景圖片更改位置只能用background-position*/
background-size: 200px 210px;/*背景圖片更改大小隻能用bacground-size*/
}
/*背景圖片適合做一些小圖標使用，產品展示之類的適合用插入圖片*/
</style>
</head>
<body>
<section>
<img src="images/img01.jpg">
</section>
<aside></aside>
</body>
</html>
3. 元素的顯示與隱藏
（1）display設置或檢索對象是否及如何顯示，display：none隱藏對象，display：block除了轉換爲塊級元素外，還有顯示元素的意識，隱藏之後不再保留位置。（常用）
（2）visibility可見性，visible對象可視，hidden對象隱藏，隱藏之後繼續保留原有位置。