前端布局对前端开发而言是必不可少的环节之一。我所理解的前端布局可以分成两个大类,第一类是元素层面的布局,就是像absolute布局、flex布局等等,都是描述元素在页面上以何种形式呈现,即局部的布局;第二类是网页层面的布局,像静态布局、响应式布局等,都是描述同一个网页在不同的设备上的呈现形式,即整体的布局。接下来就详细整理一下这两大类布局。
首先是第一类,总体上可以大致分为文档布局、浮动布局、定位布局三种,他们注重的是如何实现某些元素在页面上的呈现形式。
一、文档布局:首先我们要知道,默认的网页形式是文档流的形式,一个网页就像是一条条从左流向右的河流。在文档中有两种元素,内联元素(display:inline)和块级元素(display:block)。内联元素默认从左到右流,遇到阻碍或者宽度不够自动换行,继续按照从左到右的方式布局。而块级元素则会独占一行,按照从上往下的方式布局。内联元素的宽度和高度默认都被内容撑开。
二、浮动布局:浮动布局是我们最常用的布局,其表现形式为float:left;。其特点是,浮动元素会脱离文档流。我们可以很清晰地看到,通过float的方式,使元素脱离了文档流,变为行内块元素(display:inline-block),这个元素对于文档流的子元素而言就像内联元素一样,会占用自己大小的空间,而对于容器元素而言又像是不存在一样,会悬浮在文档流的上方。
这种方式虽然能够较好地实现我们想要的一些效果,但是很容易引起一个问题,那就是父类高度塌陷。在文档流中,父类的高度是会被子类撑开的,而用浮动布局后,如果浮动元素的高度大于子元素的高度,则父元素不会被浮动元素撑开,浮动元素则会继续覆盖在下一个元素上。我们可以通过下面的例子来理解。
<style>
.container{
width: 200px;
background-color:red;
}
.left{
background-color: yellow;
float: left;
height: 50px;
width:50px;
}
.right{
background-color: yellow;
float: right;
height: 50px;
width:50px;
}
</style>
<body>
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="container" style="height: 200px;background: blue">
</div>
</body>