1、行内元素：
又叫内联元素；只能容纳文本或者其他内联元素，常见内联元素<span>、
<a>、<input type=””>
2、块元素：
h1>
3、块元素和行内元素的区别：
行内元素只占内容的宽度，而且他不会占据整行； 块元素不管内容多少都要占据整行，而且会换行显示 。
一些css属性对行内元素不生效，比如：margin,left,right,width,height. 建议尽可能使用块元素定位。（与浏览器类型版本有关）
4、块元素和行内元素相互转换：
Display:inline; 将块元素转化为行内元素
Display:block; 将行内元素转化为块元素
5、css文件的相互引用：
如果希望在a.css文件中使用到b.css c.css文件的选择器，可以通过@import指令来完成。 例：@import url(new.css);
如果希望在html或者PHP文件中引用某个xxx.css文件，也可以在<style>标签中通过@import指令来完成。例：
<style>@import url(第3讲.css); </style>
6、标准流和非标准流：
流：HTML元素在网页中显示的顺序。
标准流：在html文件中，写在前面的元素在前面显示，写在后面的html元素在后面显示。
非标准流:在html文件中，当某个元素脱离标准流（比如相对定位）,那么他就处于非标准流。
实例：
<!DOCTYPE html>
<!-- <!DOCTYPE> 声明是文档中的第一个成分，位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。此处为HTML 5 规范 -->
<html>
<head>
<title>第三讲代码：</title>
<style>@import url(第3讲.css); </style> <!-- 和下句意义相同，可替换下句 -->
<!-- <link rel="stylesheet" type="text/css" href="第3讲.css" > -->
</head>
<body>
<span>行内元素1</span>
<span>行内元素2</span>
<span>行内元素3</span>
<div class="s1">块元素1</div>
<div class="s1">块元素2</div>
<div class="s1">块元素3</div>
<div >块元素4</div>
<br>
<!-- div在布局中起到控制整个内容显示位置的作用，也就是用来定位的！
-->
<b>2、盒子模型的浮动</b><br>
<div class="s2">
<!--ul在布局中的作用是可以控制显示内容的多少-->
<ul class="s3">
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
</ul>
</div>
</body>
</html>
第3讲.css
@import url(new.css); /* 如果希望在a.css文件中使用到b.css c.css文件的选择器，可以通过@import指令来完成 */
.s3{
width:500px;
height:400px;
border:2px solid yellow;
list-style-type:none; /* 设置列表项所使用的预设标记，none表示无标记 */
/* padding-left:-500px; */
padding-left:2px;
margin-top:5px;
margin-left:5px;
}
new.css
span{
border:2px solid red;
display:block; /* 将行内元素转化为块元素 */
}
div{
border:2px solid green;
/* display:inline; */ /* 将块元素转化为行内元素 */
}
.s1{
border:2px solid green;
display:inline; /* 将块元素转化为行内元素 */
}
body{
border:3px solid yellow;
width:50%;
height:50%;
margin:0 auto; /* 第一个用于上下，第二个用于左右，auto表示自动居中。 水平居中 */
text-align:center; /* body中所有元素居中 */
}
.s2{
border:2px solid red;
}
img{
border:2px solid red;
}
li img{
width:50px;
height:50px;
padding:1px;
margin:2px;
}
li{
float:left; /* 左浮动 */
width:60px;
height:60px;
border:3px solid #600000;
padding:1px;
margin:2px;
margin-top:5px;
}
