CSS——布局与定位

布局与定位是CSS学习中最重要的一块，它将贯穿你的整个前端职业生涯，这篇文章就介绍DIV+CSS的几种布局与定位方法。

布局（脱离文档流）

1. 左右布局

• float+clearfix

<父元素 class="clearfix">

.clearfix::after{
content:'';
display:block;
clear:both;
}

子元素{
float:left(right);
}

首先让块级元素（列表元素）浮动起来，再在其父元素上加一给clearfix类，用于清除其父元素的浮动。
接着将列表元素的宽度设为50%，那么就会自然的产生一个左右布局的效果了。

• relative+absolate（绝对定位）
  为了制作更多复杂的布局，运用position属性是非常重要的。目前我们学了position=fixed;(相对窗口定位)和position=relative;
  position=absolate;(绝对定位-相对父元素定位)

父元素{
position=relative;
}

子元素{
position=absolate;
top: xxx px;
left: xxx px;
}

这会让子元素相对于父元素（上级第一个relative）的位置定位，接下来怎样布局都可以了。

2. 左右中布局
   左右中布局的主要方法也是利用浮动或者绝对定位，甚至两者结合，不过是看情况实用的，主要利用的属性就是margin，和绝对定位啦。

• float+margin float+margin.jpg
• float+absolute float+absolute.jpg

居中

1. 水平居中

• margin:0 auto;
  适用于块级元素，也就是display=block;

• text-align:center
  适用于内联元素，inline-block；，以及文字。使用方法是给该元素的父元素添加该样式（利用父元素包裹子元素）。

• 调整padding,margin(内边距和外边距)
  直接调整外边距和内边距以达到水平居中的效果，如果不方便，可使用包裹器包裹该元素，使用包裹器代为调整。

2. 垂直居中

• 调整行高，line-height= xxx px;
  大多数情况下都是管用的

• 调整padding,margin（内边距和外边距）
  直接调整外边距和内边距以达到水平居中的效果，如果不方便，可使用包裹器包裹该元素，使用包裹器代为调整。

其他

1. 如何让内联元素产生上下位移
   由于内联元素的性质，它的margin和padding左右有效，上下却是没效果的，这时给它加上"display=inline-block"就可以产生效果了。

2. 经常使用包裹器
   有些时候，一个div可以做到改内部样式，却做不到调整自身本身的位置。
   这时候就要在外面写个div，将其包裹起来，然后使用父元素的padding和margin来调整元素位置。

3. 对块级元素设置inline-block会发生什么？

• 块级元素宽度收缩
  块级元素不写宽度的情况下，默认宽100%（毕竟占据一行）。
  加入inline-block，宽度自动适合内容

• 块级元素下方会产生空隙
  解决方法是使用vertical-align:top;来解决这个空隙。

4. 状态机，js相关，暂时不描述

5. box-sizing:border-box盒模型
   在计算宽度的时候，加入这个可以将接下来加入的宽度算入整体宽度中（这样就不会影响父元素，破坏左右布局了）