CSS(display, float, position)深入理解

一、display属性

display 属性用于控制 HTML 元素的显示方式。它有以下常用的取值：

block ：元素以块级格式显示，元素宽度默认为整个父元素宽度，在不设置 width 的情况下，元素会自动把剩余的空间填满；
inline ：元素以行内格式显示，元素宽度默认为包含的内容宽度，不能设置高度，margin-top 和 margin-bottom 会被忽略；
inline-block ：元素以行内块格式显示，元素宽度默认为包含的内容宽度，能设置高度和 margin；
none ：元素不显示，元素占据的空间也消失。

示例：

<!-- block元素 -->
<div style="display: block;width: 100%;height: 100px;background-color: red"></div>

<!-- inline元素 -->
<p style="display: inline;">这是inline元素</p>

<!-- inline-block元素 -->
<div style="display: inline-block;width: 100px;height: 100px;background-color: green;margin-right: 10px;"></div>
<div style="display: inline-block;width: 100px;height: 100px;background-color: blue;"></div>

二、float属性

float 属性用于指定 HTML 元素在页面中的浮动方式，它有以下常用的取值：

left ：元素向左浮动；
right ：元素向右浮动；
none ：元素不浮动。

浮动元素会试图贴着上一个浮动元素对齐，如果不能就另起一行，而且浮动元素占据的空间不占据父元素的空间，所以它会影响父元素的高度。

示例：

<!-- float元素 -->
<div style="float: left;width: 100px;height: 100px;background-color: purple;"></div>
<div style="float: right;width: 100px;height: 100px;background-color: yellow;"></div>

三、position属性

position 属性用于控制 HTML 元素的定位方式，它有以下常用的取值：

static ：元素的位置由文档流决定，不能通过 top、left、bottom、right 属性设置位置；
relative ：元素的位置相对于它原来的位置设定，通过 top、left、bottom、right 属性设置位置；
absolute ：元素的位置相对于离它最近的被定位过的祖先元素的的左上角，如果祖先元素都没有被定位，则相对于文档的左上角，通过 top、left、bottom、right 属性设置位置；
fixed ：元素相对于浏览器窗口定位，通过 top、left、bottom、right 属性设置位置。

绝对定位的元素完全脱离了文档流，不占据页面空间，而且它们会覆盖其他元素，所以要注意它们是如何影响页面布局的。

示例：

<!-- static元素 -->
<div style="position: static;width: 100px;height: 100px;background-color: pink;"></div>

<!-- relative元素 -->
<div style="position: relative;width: 100px;height: 100px;background-color: gray;top: 20px;left: 20px;"></div>

<!-- absolute元素 -->
<div style="position: absolute;width: 100px;height: 100px;background-color: black;top: 20px;left: 20px;"></div>

<!-- fixed元素 -->
<div style="position: fixed;width: 100px;height: 100px;background-color: brown;top: 20px;right: 20px;"></div>