一、display
display 是 css 布局中很重要的一个属性，它定义了元素生成的显示框类型，常见的几个属性值有：block、inline、inline-block、inherit、none、flex。inherit 表示这个元素从父元素继承 display 属性值；none 表示这个元素不显示，也不占用空间位置；flex 是 flex 布局重要的属性设置，我们留到后面详细讲解，这边先介绍前面三个属性值。
每个元素都有默认的 display 属性，比如 div 标签的默认 display 属性是 block，我们通常称这类元素为块级元素；span 标签的默认 display 属性是 inline，我们通常称这类元素为行内元素，我们先通过下面的代码示例来看下两者的区别。
没有设置宽度时，它的宽度是其容器的 100%；
可以给块级元素设置宽高、内边距、外边距等盒模型属性；
块级元素可以包含块级元素和行内元素；
常见的块级元素：
<div>、
<h1> ~
<h6>、
<p>、
<ul>、
<ol>、
<dl>、
<table>、
<address>
<form> 等。
行内元素不会独占一行，只会占领自身宽高所需要的空间；
给行内元素设置宽高不会起作用，margin 值只对左右起作用，padding 值也只对左右起作用；
行内元素一般不可以包含块级元素，只能包含行内元素和文本；
常见的行内元素
<a>、
<b>、
<label>、
<span>、
<img>、
<em>、
<strong>、
<i>、
<input> 等。
内联块级元素：
宽度由内容撑开，只占据自己的位置，可以设置自己的宽度（两个人的孩子？）,display：inline-block
二、position
在布局中很重要的因素就是定位，position 属性就是用来定义元素的定位机制。position 的常用属性值有：
relative：相对定位，相对于元素的正常位置进行定位；
absolute：绝对定位，相对于除 static 定位以外的元素进行定位；
fixed：固定定位，相对于浏览器窗口进行定位，网站中的固定 header 和 footer 就是用固定定位来实现的；
static：默认值，没有定位属性，元素正常出现在文档流中；
inherit：继承父元素的 position 属性值。
上文出现了文档流（normal flow）的概念，按理来说应该翻译成普通流，文档流是大多数人的叫法。“流”可以想象成流动的水，当我们打开屏幕，浏览网页，滚动鼠标，网页的内容就像是水流一样滑过。文档流便是指从上到下，从左往右的文档布局。当我们给元素的 positon 属性设置 absolute、fixed 时便会脱离文档流，不再遵循从上到下，从左到右的规律了。