前端开发就像盖房子,如果说 HTML 是构成房子的砖瓦, CSS 则是决定这些砖瓦的位置和对它们进行装饰。在实际开发中,前端工程师在拿到设计稿后,都会先梳理页面的大致结构,构思完页面的布局后,再进行 coding。大多数网站都有着相似的布局,掌握这些“套路”便可以快速高效的完成开发工作。
相关属性
我们首先来了解布局相关的 CSS 属性。
display
display 是 CSS 布局中很重要的一个属性,它定义了元素生成的显示框类型,常见的几个属性值有:block、
inline、inline-block、inherit、none、flex。inherit 表示这个元素从父元素继承 display 属性值;none 表示这个元素不显示,也不占用空间位置;flex 是 flex 布局重要的属性设置,我们留到后面详细讲解,这边先介绍前面三个属性值。
每个元素都有默认的 display 属性,比如 div 标签的默认 display 属性是 block,我们通常称这类元素为块级元素;span 标签的默认 display 属性是 inline,我们通常称这类元素为行内元素,我们先通过下面的代码示例来看下两者的区别。
两者的运行效果如下:
(块级元素)
(行内元素)
我们可以看到块级元素总是独占一行,从上到下显示,行内元素则是从左到右显示。这是因为块级元素前后有换行符,而行内元素前后没有换行符。除此之外,块级元素和行内元素还有其他的区别和特性。
块级元素:
没有设置宽度时,它的宽度是其容器的 100%;
可以给块级元素设置宽高、内边距、外边距等盒模型属性;
块级元素可以包含块级元素和行内元素;
常见的块级元素有:
~
、
、
- 、
- 、
-
、、
- 、
<form> 等。
行内元素:
行内元素不会独占一行,只会占领自身宽高所需要的空间;
给行内元素设置宽高不会起作用,margin 值只对左右起作用,padding 值也只对左右起作用;
行内元素一般不可以包含块级元素,只能包含行内元素和文本;
常见的行内元素有 、、
细心的你可能会发现,给 img 标签设置宽高是可以影响图片大小的,这是因为 img 是可替代元素,可替代元素具有内在的尺寸,所以宽高可以设定。HTML 中的 input、button、textarea、select 都是可替代元素,这些元素即使是空的,浏览器也会根据其标签和属性来决定显示的内容。
给行内元素设置宽高不起作用,我们通过上面的代码已经感受到了,那为什么设置 margin、padding 只有左右起作用呢?我们来看下面的列子。
运行效果如下:
(在 span 标签前后添加 div 标签在浏览器中的运行结果)
在上图中可以明显看到 span 1 只添加了 margin-left 和 margin-right,但 margin-top、margin-bottom 均不起作用。虽然上下的 padding 看上去都起作用了,但是通过添加 div 标签,我们可以看到有重合的部分,所以 padding-top、padding-bottom 的设置从显示效果上是增加的,但对周围元素不会产生影响。
那 inline-block 又是什么呢?看命名方式,也能猜出大半,没错,设置为 inline-block 的元素,既具有块级元素可以设置宽高的特性,又具有行内元素不换行的特性。我们给 div 标签设置 inline-block 属性看下效果。