CSS 布局属性大全：display，position 和 float

div {   display: block; }

1.2. inline
inline 元素不会独占一行，仅占据它需要的空间。例如， 元素就是一个典型的 inline 元素。

立即学习“前端免费学习笔记（深入）”；

span {   display: inline; }

1.3. inline-block
inline-block 元素不会独占一行，但是可以设置宽度和高度。例如， 元素就是一个典型的 inline-block 元素。

img {   display: inline-block; }

1.4. none
none 元素不会显示，会从文档流中移除。例如，可以通过设置 display: none 来隐藏一个元素。

.hidden {   display: none; }

2. position 属性
   position 属性用于指定元素的定位方式。常见的 position 属性值有以下几种：

2.1. static
static 是默认的定位方式，元素按照文档流的顺序进行布局。

div {   position: static; }

2.2. relative
relative 相对于自身的初始位置进行定位。可以通过使用 top、bottom、left 和 right 属性来调整元素的位置。

div {   position: relative;   top: 10px;   left: 20px; }

2.3. absolute
absolute 相对于父元素进行定位，或者相对于最近的具有定位属性（position 不是 static）的祖先元素进行定位。

div {   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%); }

2.4. fixed
fixed 相对于浏览器窗口进行定位，不会随滚动条的滚动而改变位置。

div {   position: fixed;   top: 0;   right: 0; }

3. float 属性
   float 属性用于指定元素的浮动方式。当一个元素被设置为 float，它将从正常的文档流中脱离，并尽可能地向左或向右浮动。其他元素会围绕浮动元素进行布局。

img {   float: left; }