反手一个function
反手一个function

通俗易懂的CSS布局display、position、float详解

前端开发就像盖房子，如果说 html 是构成房子的砖瓦， css 则是决定这些砖瓦的位置和对它们进行装饰。在实际开发中，前端在拿到设计稿后，都会先梳理页面的大致结构，构思完页面的布局后，再进行 coding。大多数网站都有着相似的布局，掌握这些“套路”便可以快速高效的完成开发工作。

display

display 是 css 布局中很重要的一个属性，它定义了元素生成的显示框类型，常见的几个属性值有：block、inline、inline-block、inherit、none、flex。inherit 表示这个元素从父元素继承 display 属性值；none 表示这个元素不显示，也不占用空间位置；flex 是 flex 布局重要的属性设置，我们留到后面详细讲解，这边先介绍前面三个属性值。

每个元素都有默认的 display 属性，比如 div 标签的默认 display 属性是 block，我们通常称这类元素为块级元素；span 标签的默认 display 属性是 inline，我们通常称这类元素为行内元素，我们先通过下面的代码示例来看下两者的区别。

div布局结果
span布局结果

我们可以看到块级元素总是独占一行，从上到下显示，行内元素则是从左到右显示。这是因为块级元素前后有换行符，而行内元素前后没有换行符。除此之外，块级元素和行内元素还有其他的区别和特性。

块级元素：
没有设置宽度时，它的宽度是其容器的 100%；
可以给块级元素设置宽高、内边距、外边距等盒模型属性；
块级元素可以包含块级元素和行内元素；
常见的块级元素：

、

~
、

、