目录
一.绝对定位：
1.属性：position,值：absolute，可以通过left，top绝对定义一个元素。
<style type="text/css">
.abc{
position: absolute;
left: 150px;
top: 100px;
}
</style>
<p>正常文字1</p>
<p>正常文字2</p>
<p class="abc">绝对定位的文字3</p>
<p>正常文字4</p>
<p>正常文字5</p>2.绝对定位是基于最近的一个定位了的父容器
对于 "绝对定位的文字3" 这个p，其定位了的父容器即 class="abcdiv" 的div，所以 "绝对定位的文字" 这个p 出现的位置是以这个div 为基础的。
<style type="text/css">
.abc{
position: absolute;
left: 150px;
top: 100px;
}
.abcdiv{
position: absolute;
left: 150px;
top: 100px;
width: 215px;
}
</style>
<div class="abcdiv">
这是一个绝对定位的div
<p class="abc">绝对定位的文字3</p>
</div>
<div >
<p>正常文字1</p>
<p>正常文字2</p>
<p>正常文字4</p>
<p>正常文字5</p>
</div> 但是如果没有定位了的父容器，那么系统默认的已经定位了的父容器是body。
<style type="text/css">
.abc{
position: absolute;
left: 150px;
top: 100px;
}
</style>
<div >
这是没有绝对定位的div
<p class="abc">绝对定位的文字3</p>
</div>
<div >
<p>正常文字1</p>
<p>正常文字2</p>
<p>正常文字4</p>
<p>正常文字5</p>
</div> 3.z-index（元素的堆叠顺序），通过绝对定位可以把一个元素放在另一个元素上，这样位置就重复了。重复了，就存在一个谁掩盖谁的问题。 这个时候就可以使用，z-index属性， 当z-index的值越大，就表示放上面，z-index:越小就表示放下面。
<style>
img#i1{
position: absolute;
left: 60px;
top: 20px;
z-index:1;
}
img#i2{
position: absolute;
left: 60px;
top: 120px;
z-index:-1;
}
</style>
<div>
<p >正常文字a</p>
<p >正常文字b</p>
<p >正常文字c</p>
<p >正常文字d</p>
<p >正常文字e</p>
<p >正常文字f</p>
<p >正常文字g</p>
</div>
<img id="i1" src="example.gif" />
<img id="i2" src="example.gif" />二.相对定位：
1.属性：position，值： relative，与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离。
<style type="text/css">
.abc{
position: relative;
left: 150px;
top: 100px;
}
</style>
<div >
<p>正常文字1</p>
<p>正常文字2</p>
<p class="abc">相对定位文字3</p>
<p>正常文字4</p>
<p>正常文字5</p>
</div> 三.浮动：
1.属性：float，值： left,right，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
<style type="text/css">
.left{
float: left;
}
.right{
float: right;
}
</style>
<div >
<p>正常文字1</p>
<p>正常文字2</p>
<p class="left">左浮动的文字</p>
<p class="right">右浮动的文字</p>
<p>正常文字3</p>
<p>正常文字4</p>
</div> 2.文字环绕图片（很实用）：当图片不浮动时，文字就会换行出现在下面，当图片浮动时，文字围绕着图片，当文字不想围绕浮动图片时，属性:clear，值: left right both none，如果p左边出现了浮动的元素，如此例，则设置clear:left 即达到不允许浮动元素出现在左边的效果。
<style>
.f{
float:left;
}
div{
width:320px;
}
.clearp{
clear:left;
}
.g{
float:left;
}
</style>
<div >
<img class="f" src="img/example.gif"/>
<p> 当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
</p>
</div>
<div >
<img class="f" src="img/example.gif"/>
<p class="clearp"> 当图片浮动时，文字却不想围绕图片
当图片浮动时，文字却不想围绕图片
当图片浮动时，文字却不想围绕图片
当图片浮动时，文字却不想围绕图片
</p>
</div>
<div >
<img src="img/example.gif"/>
<p> 当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
</p>
</div>
<div >
<img class="g" src="img/example.gif"/>
<p> 当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
</p>
</div>
</body>3.水平排列div:默认的div排列是会换行的,如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方,如果超出了父容器，还会有自动换行的效果。
<style>
div#floatingDiv{
width:200px;
}
div#floatingDiv div{
float:left;
}
</style>
<div>菜单1</div><div>菜单2 </div> <div>菜单3</div>
<div id="floatingDiv">
<div> 菜单1</div><div>菜单2</div> <div>菜单3</div><div>菜单4</div><div>菜单5</div><div>菜单6</div>
</div>四.显示方式：
元素的display显示方式有多种，隐藏、块级、内联、内联-块级。
1.隐藏：display:none; 使得被选择的元素隐藏，并且不占用原来的位置。
<style type="text/css">
.d2{
display: none;
}
</style>
<p> 以下展示隐藏 none</p>
<div class="d1">可见的div1</div>
<div class="d2">不可见的div2</div>
<div class="d3">可见的div3</div>2.块级元素：display:block; 表示块级元素，块级元素会自动在前面和后面加上换行，并且在其上的width和height也能够生效，div默认是块级元素，span默认是内联元素(不会有换行,width和height也不会生效)。
<style type="text/css">
div,span{
border: 1px solid lightblue;
margin: 10px;
width: 200px;
height: 100px;
}
#d{
display: block;
}
</style>
<p> 以下展示块级元素 block</p>
<div >普通的div块</div>
<span >这是普通的span</span>
<span >这是普通的span</span>
<span >这是普通的span</span>
<span id="d">
这是span，被改造成块级元素。
</span>3.内联元素：display:inline; 表示内联元素，内联元素前后没有换行，并且在其上的width和height也无效。 其大小由其中的内容决定，div默认是块级元素，span默认是内联元素。
、
<style type="text/css">
div,span{
border: 1px solid lightblue;
margin: 10px;
width: 200px;
height: 100px;
}
#d{
display: inline;
}
</style>
<p> 以下展示内联元素 block</p>
<span >这是普通的span</span>
<span >这是普通的span</span>
<span >这是普通的span</span>
<div id="d">被改造成内联元素的div块</div>4.内联-块级：内联是不换行，但是不能指定大小，块级时能指定大小，但是会换行，有时候，需要元素处于同一行，同时还能指定大小，这个时候，就需要用到内联-块级 inline-block。
<style>
span{
display:inline-block;
border: 1px solid lightgray;
margin:10px;
width:100px;
}
</style>
像这样 ，每个都能设置宽度 ，同时还能在同一行。
<br>
<span>盖伦</span>
<span>蒙多医生</span>
<span>奈德丽</span>
<span>蒸汽机器人</span> 5.其他：其他的显示方式像，list-item 显示为列表，table 显示为表格，inline-table 显示为前后无换行的表格，table-cell 显示为单元格，这些就不太常见了我们就不再继续探讨了。
五.水平居中：
分为内容居中和元素居中。
1.内容居中：
<style>
div{
border:1px solid lightgray;
margin:10px;
}
</style>
<div align="center">
通过设置属性align="center" 居中的内容
</div>
<div style="text-align:center">
通过样式style="text-align:center" 居中的内容
</div>2.元素居中：
<style>
div{
border: solid 1px lightgray;
margin: 10px;
}
span{
border: solid 1px lightskyblue;
}
</style>
<div> 默认情况下div会占用100%的宽度,所以无法观察元素是否居中</div>
<div style="width:300px;margin:0 auto">
设置本div的宽度，然后再使用样式 margin: 0 auto来使得元素居中</div>
<span style="width:300px;margin:0 auto">
span 是内联元素，无法设置宽度，所以不能通过margin:0 auto居中</span>
<div style="text-align:center">
<span>span的居中可以通过放置在div中，然后让div text-align实现居中</span>
</div>六.左侧固定：
<style>
.left{
width:200px;
float:left;
background-color:pink
}
.right{
overflow:hidden;
background-color:lightskyblue;
}
div{
height: 50px;
}
</style>
<div class="left">左边固定宽度</div>
<div class="right">右边自动填满</div>七.垂直居中：
1.line-height:
<style>
#d {
line-height: 100px;
}
div{
border:solid 1px lightskyblue;
}
</style>
<div id="d">line-height 适合单独一行垂直居中</div>2.内边距方式：借助设置相同的上下内边距，实现垂直居中效果，可以用在多行文本上。
<style>
#d {
padding: 30 0;
}
div{
border:solid 1px lightskyblue;
}
</style>
<div id="d">多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 </div>3.table方式：首先通过display: table-cell;把div用单元格的形式显示，然后借用单元格的垂直居中vertical-align: middle; 来达到效果。这样对图片也可以居中，上一步 line-height就不能对图片居中。
<style>
#d {
display: table-cell;
vertical-align: middle;
height:200px;
}
div{
border:solid 1px lightskyblue;
}
</style>
<div id="d">
<img src="img/example.gif">
</div>
八.左右固定：
<style>
.left{
width:200px;
float:left;
background-color:pink
}
.right{
width:200px;
float:right;
background-color:pink
}
.center {margin:0 200px; background-color:lightblue}
</style>
<div class="left">左边固定宽度</div>
<div class="right">左边固定宽度</div>
<div class="center">中间自适应</div>九.一个div始终贴在下方：
<style>
#div1
{
position: relative;
height: 300px;
width: 90%;
background-color: skyblue;
}
#div2
{
position: absolute;
bottom: 0;
height: 30px;
width: 100%;
background-color: lightgreen;
}
</style>
<div id="div1">
<div id="div2"> 无论蓝色div高度如何变化，绿色div都会贴在下面
</div>
</div>十.块之间的空格解决方案：
使用float来解决。
float使用完毕之后，记得在下面加上 <div style="clear:both"></div> 用于使得后续的元素，不会和这些span重复在一起。
<style>
div.nocontinue span{
border-bottom:2px solid lightgray;
float:left;
}
</style>
<div class="nocontinue">
<span>有换行的span</span>
<span>有换行的span</span>
<span>有换行的span</span>
</div>
<div style="clear:both"></div>
<div>后续的内容</div>百闻不如一见，百见不如一练，兄弟们快去试试吧。
3959
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
