position，float，display布局方式规整

前端攻城狮在拿到设计图，最开始做的事情是什么？布局？yup

定位：position

1. position值

• static：默认方式，作为文档流的一部分，有行内元素（不会换行）和块级元素（独占一行）
• relative：相对位置，想对于此元素应该在的位置进行偏移，并且原来的位置也会被占据。发生偏移时，可能会覆盖其他元素（这个特性让我想起了z-index），当有元素需要在后来的元素之上时，position:relative就很管用了
• absolute：绝对位置，脱离文档流，在文档流之上，元素不再占有文档流位置，想对于最近的position不为static的元素进行偏移（从此元素向上级找到的第一个position不为static的元素）
• fixed：固定位置，想对于视图区域进行固定
• sticky：css3新属性，这个属性，个人认为是relative属性相似（因为对此位置值不太，本人也很少使用...）

2. 讲到了position属性就必定会想到偏移量属性

• left
• right
• top
• bottom
  （注：这四个属性在position:static时，这四个属性不起作用。偏移量使用px的话，不同的web端会有兼容性问题，所有推荐使用rem或者百分比（百分比基准是父级的宽度））

浮动 float

1. float就是脱离文档流的一种布局方式，但是它占文档位置。一般会使用在图片上，让文字围绕此图片。浮动元素会生成一个块级框，而不论它本身是何种元素（使用float时，最好定义此元素的宽度和高度）。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
2. 敲黑板，画重点：float：left|right与position:absolute区别
   float：left|right属性与position:absolute属性都具有包裹性，两者都会使元素脱离文档流，但是，与absolute不同的是：float 的元素还会在文档流上占据一个位置。position:absolute的元素是根据最近的非static的父元素定位，如果没有，则根据最初的包含块定义（一般是body），关于float，也会脱离文档流，会被放置在其容器的左边或右边。
3. 讲到元素浮动，就必须牵扯到清除浮动

• 当元素height:auto时，且容器内容中有浮动，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢到容器外部而影响整体布局；

// html代码
<div class="wrap">
  <div class="content">我是浮动元素</div>
</div>
// css代码
.wrap {
  font-size: 12px;
  border: 1px solid gray;
  color: #fff;
}
.content {
  float: left;
  padding: 15px;
  background: blue;
}

float布局

• 清除浮动
  （1）使用带clear属性的空元素：在浮动元素后使用一个空元素如<div class="clear"></div>，并且.clear{clear:both;}属性即可清理浮动

// html
<div class="wrap">
  <div class="content">我是浮动元素</div>
  <div class="clear"></div>
</div>
// css
.clear {
  clear: both;
}

clear:both清除浮动

（2）使用CSS的overflow属性：给浮动元素的容器添加 overflow:hidden或overflow:auto可以清除浮动，

.wrap {
  font-size: 12px;
  border: 1px solid gray;
  color: #fff;
  overflow: hidden;  // 添加
}

（3）使用CSS的:after伪元素

.wrap:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
}

（4）为容器设置高度height

布局display

1. block：块级元素，占领一整行，可以设置width、height、margin、padding
2. inline：行内元素，不占领一行，不可以设置width、height、只能设置左右的margin和padding，上下的margin和padding是不可以设置的
3. inline-block：像inline一样放置(比如和它相邻的元素处在同一行)，像block一样表现，可以设置width和height；设置inline-block之后，会有空白，这个时候是因为空白符才显示的间隙，这个时候设置font-size:0就可以完美解决啦
4. none：不显示
5. inherit：继承，从父元素继承布局
6. flex：flex布局，敲黑板，画重点。你们认真看看 阮一峰老师的flex布局
7. table: 表格布局，类似于<table>，表格前后有换行
8. inline-table：表格布局，类似于<table>，表格前后没有换行
9. list-item：列表元素，类似于<li>

经常见到的几种布局

1. 元素水平居中

• 行内元素水平居中：text-align:center
• 块级元素水平居中：margin: 0 auto

2. 元素垂直居中

• 单行文本垂直居中：line-height
• 文字和图片在一行中垂直居中：平时遇到文字和图片卸载一行，图片和文字不对齐，什么鬼，用这个属性就可以解决了vertical-align:middle
• 使用flex布局实现垂直居中

3. 水平垂直居中

• 利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto

// html
<div class="wrap">
    <div class="inner"></div>
</div>
// css
.wrap {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
}
.inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: auto;
}

absolute+margin

• flex实现元素的水平垂直居中
  设置容器属性justify-content:center;align-items:center
• table-cell实现元素水平垂直居中

.wrap {
  display: table-cell; /*此元素会作为一个表格单元格显示*/
  vertical-align: middle;  // 垂直居中
  text-align: center; // 水平居中
  background-color: red;
  width: 200px;
  height: 200px;
  border: 1px solid yellow;
}
.inner {
  display: inline-block; /*为了防止块级元素的宽度默认等于其父元素*/
  background-color: blue;
  color: #fff;
}

4. 两栏布局

• float + margin

// html
<div class="left">固定宽度</div>
<div class="right">自适应</div>
// css
.left{
  width: 200px;
  height: 200px;
  background: red;
  float: left;
}
.right{
  margin-left: 210px;
  height: 200px;
  background: yellow;
}

5. 三栏布局

• float + margin

// html
<div class="wrap">
      <div class="float-left"></div>
      <div class="float-right"></div>
      <div class="center"></div>
</div>
// css
.float-left {
    width: 200px;
    float: left;
    background-color: yellow;
    height: 300px;
  }
  .float-right {
    width: 200px;
    float: right;
    background-color: red;
    height: 300px;
  }
  .center {
    margin: 0 200px;
    background-color: blue;
    height: 300px;
  }

• flex布局

感谢您的view，留个赞再走呗

• 感谢浏览姑娘的文章，来自一个写前端的姑娘！

有错误讲解的地方，欢迎指正也！