CSS布局（绝对定位／相对定位／浮动／显示与隐藏／居中）（好）

绝对定位

• 绝对定位 position:absolute，通过left／top等绝对定位一个元素。
• 绝对定位很固执，确定下父元素就定下住哪儿了，不管那个地方有木有人。别的元素也不甘示弱，不管absolute的元素，直接忽略它，进行自己的定位，重了就重了。

<style>p.abs{  position: absolute;  left: 10px;  top: 10px;}</style><p >正常文字1</p><p >正常文字2</p><p class="abs" >绝对定位的文字3</p><p >正常文字4</p><p >正常文字5</p>

• 绝对定位基于它的最近的一个定位了的父亲元素。所设置的位置安排都是相对于此父元素而言的。

<style>p.abs{  position: absolute;  left: 0px;  top: 0px;}.absdiv{  position: absolute;  left: 150px;  top: 50px;   width:215px;  border: 1px solid blue;}</style><div><p >正常文字a</p><p >正常文字b</p><p >正常文字c</p><p >正常文字d</p><p >正常文字e</p><p >正常文字f</p><p >正常文字g</p></div><div class="absdiv">这是一个定位了的div<p class="abs" >绝对定位的文字</p></div>

• 若是没有定位了的父元素，即老爹没有房子，那就找body上帝。
• z-index确定谁当主角，谁当配角。配角会被主角遮挡住。

---

相对定位

• 相对定位position:relative。
• 在相对定位中会尊重相对定位元素的地位，在原文档的位置的基础上，移动给定的距离。

<style>p.r{  position: relative;  left: 30px;  top: 0px;}</style><p >正常文字1</p><p >正常文字2</p><p class="r" >相对定位的文字3</p><p >正常文字4</p><p >正常文字5</p>

---

浮动

• float:left、float:right。浮动的元素可以向左或向右移动，直到它的边缘碰到包含框或者另一个浮动框的边框为止。形象点说，就是一只螃蟹在一个水缸中可以向左向右走，若碰到其他螃蟹或者碰到水缸壁就停止。
• 文字向右浮动：浮动后，便让出了原来的坑，并且是在原来高度的基础上向右浮动。

<style>.f{  float:right;}</style><div >正常文字1</div><div >正常文字2</div><div class="f">浮动的文字</div><div >正常文字4</div><div >正常文字5</div>

• 文字向左浮动：文字1要向左浮动了，就是说上完厕所冲了水，但是没出坑，后面的文字2听到水声凑了上来，谁知人家没出坑，于是文字2只能在坑外排队了。

<style>.f{  float:left;}</style><div >正常文字1</div><div >正常文字2</div><div class="f">浮动的文字</div><div >正常文字4</div><div >正常文字5</div>

• 文字围绕图片：当图片不浮动时，图片在厕所，文字们在餐厅。当图片浮动时，图片冲了水，文字们闻声而来到了厕所。谁知图片没出坑，于是文字们依次在厕所里排起了队。这时就会出现文字围绕图片摆放的排列方式。

<style>.f{  float:left;}div{  width:220px;}</style><div > <img src="#"/><p>  当图片不浮动时，文字就会换行出现在下面  当图片不浮动时，文字就会换行出现在下面  当图片不浮动时，文字就会换行出现在下面</p></div><div > <img  class="f" src="#"/><p>  当图片浮动时，文字围绕着图片 当图片浮动时，文字围绕着图片 当图片浮动时，文字围绕着图片</p></div>

• 清除浮动：clear:left; clear:right; clear:both;
• 图片与文字清除浮动的故事：当图片浮动时，想让文字不为之所动，就用clear吧，喝了这杯忘情水，图片就算冲了水除了坑文字也仍旧不进厕所。

<style>.f{  float:left;}div{  width:320px;}.clearp{  clear:left;}</style><div > <img  class="f" src="#"/><p>  当图片浮动时，文字围绕着图片 当图片浮动时，文字围绕着图片 当图片浮动时，文字围绕着图片 当图片浮动时，文字围绕着图片 当图片浮动时，文字围绕着图片</p></div><div > <img  class="f" src="#"/><p class="clearp">  当图片浮动时，文字却不想围绕图片当图片浮动时，文字却不想围绕图片当图片浮动时，文字却不想围绕图片当图片浮动时，文字却不想围绕图片</p></div>

• 水平排列div：默认div会自动换行，想要div达到水平排列的效果，如在菜单栏、导航栏等，可以使用浮动float。当然，当div中的内容超出了父元素的框框也会自动换行。

<style>div#floatingDiv{  width:200px;}div#floatingDiv div{   float:right;}</style>默认的div排列是会换行的 <div>       菜单1 </div> <div>       菜单2 </div>  <div>       菜单3 </div>如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方如果超出了父容器，还会有自动换行的效果<div id="floatingDiv">  <div>       菜单1 </div> <div>       菜单2 </div>  <div>       菜单3 </div> <div>       菜单4 </div> <div>       菜单5 </div> <div>       菜单6 </div>   <div>       菜单7 </div> <div>       菜单8 </div> <div>       菜单9 </div></div>

---

显示方式

• display:none;隐藏元素。被选择的元素被隐藏，并且不占用原来的位置。（就当我不存在奥～）

<style>div.d{  display:none;}</style><div>可见的div1</div><div class="d">隐藏的div2,使用display:none隐藏</div><div>可见的div3</div>

• display:block;块级元素。表现为块级元素，前面与后面自动加上换行，并且width和height生效。（自视清高，可设宽高）
• 注意啦～div默认为块级元素，span默认为内联元素。

<style>div,span{   border: 1px solid lightgray;   margin:10px;   width:100px;   height:100px;}.d{  display:block;}</style><div>普通div块</div><span>普通span</span> <span>普通span</span> <span>普通span</span><span class="d">改造成了块级元素的span</span>

• display:inline;内联元素。内联元素前后没有换行，对其指定的width和height也不起作用。其大小由其中所包含的内容多少来决定。

<style>div,span{   border: 1px solid lightgray;   margin:10px;   width:200px;   height:100px;}.s{  display:inline;}</style><span>普通span</span> <span>普通span</span> <span>普通span</span><div class="s">被改造成了内联元素的div</div>

• display:inline-block;内联-块级元素。内联元素不换行，但是不能指定大小；块级元素可以指定大小，但是会自动换行。有时需要元素们在同一行，还能指定width和height，这就需要用到内联-块级inline-block。

<style>span{   display:inline-block;   border: 1px solid lightgray;   margin:20px;   width:100px;}</style>元素处于同一行，同时还能指定大小<br><span>酥大小</span> <span>小小酥</span> <span>小大酥</span> <span>大小酥</span> 

---

隐藏

• 实现隐藏的两种方式：
• display:none;隐藏一个元素，让出坑来，这个元素不再占有原空间。
• visibility:hidden;隐藏一个元素，只是不可见而已，不让坑，仍占据原空间。

<style>div.d{  display:none;}div.v{  visibility:hidden;}</style><div>可见的div1</div><div class="d">隐藏的div2,使用display:none隐藏</div><div>可见的div3</div><div class="v">隐藏的div4,使用visibility:hidden隐藏</div><div>可见的div5</div>

---

水平居中

（内容居中、元素居中）

• 内容水平居中align="center"、style="text-align:center"两种方式。

<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>

• 元素水平居中margin:0 auto

<style>  div{     border: solid 1px lightgray;     margin: 10px;  }  span{     border: solid 1px lightcoral;  }</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>

---

垂直居中

（line-height方式、内边距方式、table方式）

• line-height方式：适合单独一行垂直居中。

<style>#d {line-height: 100px;} div{  border:solid 1px lightgray;}</style><div>这是第一行</div><div id="d">line-height 适合单独一行垂直居中</div><div>这是最后一行</div>

<style>#d {line-height: 100px;} div{  border:solid 1px lightgray;}</style><div>这是第一行</div><div id="d">line-height 适合单独一行垂直居中，对于多行文本会出问题！line-height 适合单独一行垂直居中，对于多行文本会出问题！line-height 适合单独一行垂直居中，对于多行文本会出问题！line-height 适合单独一行垂直居中，对于多行文本会出问题！line-height 适合单独一行垂直居中，对于多行文本会出问题！line-height 适合单独一行垂直居中，对于多行文本会出问题！line-height 适合单独一行垂直居中，对于多行文本会出问题！line-height 适合单独一行垂直居中，对于多行文本会出问题！line-height 适合单独一行垂直居中，对于多行文本会出问题！</div><div>这是最后一行</div>

• 内边距方式：通过设置相同的上下内边距，可以实现垂直居中的效果，可以用于多行文本。

<style>#d {    padding: 40 0;}div{    border:solid 1px lightskyblue;}</style><div id="d">通过设置相同的上下内边距，实现垂直居中的效果，可以用于多行文本。多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容  </div>

• table方式：先通过display:tabel-cell把div用单元格的形式显示，然后用单元格的垂直居中vertical-align:middle;。table方式可以对图片居中，而line-height不能对图片居中。

<style>#d {display: table-cell;vertical-align: middle;height:200px;}  img{    width: 100px;    height:100px;  }div{  border:solid 1px lightskyblue;}</style><div id="d"><img src="http://images.shobserver.com/news/690_390/2017/2/4/fe75ed58-7b7f-4af2-82dd-0e5682c031a9.jpg"></div>

---