CSS定位机制（布局模型）：
（1）文档流：默认方式，从左到右，从上到下
（2）浮动定位：脱离文档流，浮动起来但不层叠
（3）层定位：相互层叠
如图：
文档流定位
概念：元素的位置“可层叠”。也称为“层布局模型”
本质：相对于谁定位，且先浮动起来，再定位
分类：
（1）块级元素：block
（2）内联元素：inline。行内元素
（3）内联块状元素：inline-block。同时具备内联元素、块状元素的特点
属性：display
一、块级元素
例如：<div> 、<p>、<h1>、<ul>、 <ol>、 <li>、 <table>、<form>等
特点：
1.每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行,即使设置宽度不够也还是独占一行）
2.元素的高度、宽度、行高以及顶和底边距都可设置。
3.元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
二、内联元素
例如：<span>、<a>、<label>、 <strong>和<em>等。
特点：
1.和其他元素都在一行上；
2.height（高度）、width（宽度）及margin-top和margin-bottom不可设置，margin-left、margin-right和padding不受影响
3.width（宽度）取决于它包含的文字或图片的宽度，不可改变。
4.同行元素之间存在间隙问题：
思路：由于inline元素不能设置margin-left和margin-right，所以即使设置这两个属性为0px也不能去掉间隙（其实就是能设置，也去不了，如：inline-block元素也存在此问题，它可以设置margin-left和margin-right都为0，但无济于事，毕竟这是一种浏览器默认的“通病”）
解决：将需要在同一行显示inline元素全部放在一个块级标签中
（1）如果是图片，则直接对此块级标签设置font-size: 0;
<style type="text/css">
div {
font-size: 0; /* 取消其里面的“行内元素”之间默认的间隙 */
}
</style>
<body>
<div>
<img src="images/kenny_feng.jpg">
<img src="images/kenny_feng.jpg">
</div>
</body>效果：
（2）如果是文字，则还要设置文字的font-size大小：
<style type="text/css">
div {
font-size: 0;
}
a {
font-size: 15px; /* 缺少则默认使用父标签的font-size */
padding: 10px; /* inline元素可以设置padding属性 */
background-color: pink;
}
</style>
<body>
<div>
<a href="https://blog.csdn.net/fenganhai">链接1</a>
<a href="https://blog.csdn.net/fenganhai">链接2</a>
</div>
</body>效果：
如果不设置a标签的font-size，则会将父元素中的font-size:0;作为子元素的字体大小，即该文字会消失：
三、内联块状元素
例如：<img>、<input>标签就是这种内联块状标签。
特点：
1.和其他元素都在一行上；
2.height（高度）、width（宽度）、margin-top、margin-bottom、margin-left、margin-right和padding均可设置
3.同行元素之间存在间隙问题
相互转化
实战：设置导航栏的超链接
一、超链接分行显示
思路：由于a标签是inline标签，所以要将每个a标签都要放在块级标签中，可让每个a标签处于不同行（也可以避免同在一行带来的间隙问题）：
<!-- 第一种方法 -->
<ul>
<li><a>链接1</a></li>
<li><a>链接2</a></li>
</ul>
<!-- 第二种方法 -->
<p><a>链接1</a></p>
<p><a>链接2</a></p>二、超链接同行显示（请自行完成）
效果：
微信搜索：静夜一思
891
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
