页面元素定位和布局方法
块级元素和行内元素
A：块级元素
块级元素要独占一行，它后面的内容就会被挤到下一行，可以把块级元素理解成一个矩形容器，可以设置它的宽度和高度，以下是常用的块级元素：
<div> <p> <hi> <from> <ul> <li>
B：行内元素
与块级元素相反，在宽度允许的情况下，一行中可以容纳多个行内元素，它没有固定形状，不能设置宽度和高度，以下是常用的行内元素：
<span> <a> <input> <img> <strong> <em>
我们可以使用display:inline 将块级元素转换为行内元素
使用display:block 将行内元素转为块级元素，从而进行设置宽度和高度
流动布局
流动布局就是元素按正常的文档流从上往下的排列，所以元素按照先后顺序逐行往下排列，块级元素独占一行，行内元素在每行中从左至右排列。流动布局是网页默认的显示规则
浮动布局
浮动布局是利用CSS完成网页布局最重要的方式，使用极其灵活多变，在上面的流动布局我们了解到以div为首的块级元素会独占一行，在网页布局中，最常用的就是div，通常把div当做一个盒子，再来把一个个div盒子进行排列。但是div独占一行，我们想在一行并列放置两个、甚至三个div盒子怎么办呢？浮动就可以完成这个事情。看个例子：
<body>
<div class="box">
<div class="div1">div1,未设置浮动</div>
<div class="div2">div2，左浮动</div>
<div class="div3">div3，右浮动</div>
</div>
</body>
上面代码中，给div设置了宽和高，显示如下：
此时div为块级元素，所以他们独占一行，后面的div被挤到下一行，这样的效果不符合我们想要的，那么我们要使用浮动来调整div
<style>
.box{
width: 800px;
height: 600px;
border: 1px solid red;
}
.div1{
/* 不设置浮动 */
width: 700px;
height: 150px;
margin: 50px;
border: 1px solid red;
}
.div2{
/* 设置左浮动 */
float: left;
width: 300px;
height: 300px;
border: 1px solid red;
}
.div3{
/* 设置右浮动 */
float: right;
width: 300px;
height: 300px;
border: 1px solid red;
}
</style>
效果：
定位布局
浮动布局比较灵活，不易控制。定位布局相对而言较易使用，当然，在实际开发中，往往是两者配合使用，以满足布局的个性需求。定位布局主要是通过为 【position】 属性设置不同的值来完成布局的。该值主要有以下三种：
1.position:relative
生成的位置相对于自身定位的，需要注意的是使用position:relative的元素并没有脱离文档流，且原来的位置占用的空间依旧存在，只是位置发生了变化。一般使用relative来改变位置比较少，主要是用来设置子级的absolute定位的参考对象。
2.position:absolute
absolute定位是布局中最常用到的定位，其生成的位置是相对于带有position属性的父（父...)级来定位；如果父级都没有position属性，则相对于document来定位；使用absolute定位后，定位元素是脱离文档流的，这时候父级会检测不到定位元素的宽高。 inline元素使用absolute定位之后，可以对其设置宽高；元素是不可以同时使用绝对定位和浮动的。 对子级span标签absolute定位之后，可以设置宽高，且父级无法检测到子级宽高，所以无法有子级来撑开；
3.position:fixed
fixed定位是相对于浏览器窗口来定位的，所以也是脱离了文档流，与absolute一样，父级会检测不到定位元素的宽高。 inline元素使用absolute定位之后，可以对其设置宽高；元素是不可以同时使用fixed定位和浮动的。
