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

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

display

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

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

div布局结果
span布局结果

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

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

~