一.补充知识：

一个元素引入多张背景图
- background:url(./images/mo-bg.png) , url(./images/bg.png) ;
- 先引入的背景图最靠前
- CSS3 新增的背景相关属性

清除所有元素默认样式

/*替代掉通配符选择器,毕竟不是所有元素都有内外边距*/
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,input {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
img {
vertical-align: middle;
}
a {
text-decoration: none;
color: #000;
}
/*设置元素左浮动*/
.fl {
float: left;
}
/*设置元素右浮动*/
.fr {
float: right;
}
.clear-fix:after {
content:"";
display: block;
clear: both;
}

二.元素类型转换

display：

block 转成块级元素
inline 转成行内元素
inline-block 转成行内块元素（像img一样，既可以设置宽高，同时逐行排列）

none 元素消失，空间也不再占据

三.行内块的应用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
   .pages {
       /*去掉行内元素或者行内块标签回车后显示的空格*/
       font-size: 0;
   }
   .pages a {
       display: inline-block;
       width: 60px;
       height: 60px;
       text-decoration: none;
       text-align: center;
       line-height: 60px;
       border: 1px solid blue;
       border-radius: 5px;
       font-size: 16px;
       margin-left: 10px;
       margin-right: 10px;
   }
</style>
</head>
<body>
<div class="pages">
   <a href="#">1</a>
   <a href="#">2</a>
   <a href="#">3</a>
   <a href="#">4</a>
   <a href="#">5</a>
   <a href="#">6</a>
   <a href="#">下一页</a>
</div>
</body>
</html>

注意：行内块元素之间的回车会被解析成一个空格
- 解决办法1：父容器设置font-size: 0;
- 解决办法2：行内块元素之间的回车删除

四.置换元素的概念 - 面试

“置换元素”又叫做“替换元素”，它们所具有的特征为：在不使用css修饰时，元素的标签和属性也会影响元素的显示。且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。
- 比如 <img> 标签，浏览器会根据 src 属性读取图片并显示，且图片大小会影响<img>标签大小。
- 再比如 <input> 标签的 type 属性会影响 input 的显示。
常见的置换元素
- img input textarea select object iframe canvas
  
  五.元素隐藏办法（面试题）
- diaplay:none; 元素消失，位置也消失不见
- opacity:0; 透明度变为0
- visibility:hidden; 元素隐藏，位置还在
  六.作业
作业1-10写在一个html文件里
每写完一个作业，控制台检查子元素高度有没有冲出父容器
一个容器能不能被子元素撑高，取决于子元素有没有浮动
img一般都会被固定一个尺寸

i 老师-HTML与CSS知识文档

09 - 元素显示类型

一.补充知识：

二.元素类型转换

三.行内块的应用

四.置换元素的概念 - 面试

五.元素隐藏办法（面试题）

六.作业