前言

作为一名前端开发者，每天都在和浏览器打交道，而浏览器中展示的网页需要做的很美观，并且可以吸引住用户浏览网页，提升用户体验是很重要的，所以不可避免的就要用到各种各样的布局。今天就来列举一下各种常用布局以及实现方法。在列举之前需要和大家聊一下文档的盒模型。文档盒模型分为两种：标准盒模型、怪异盒模型。他们俩有什么区别呢？
标准盒模型的宽度(width) = 左右margin + 左右border + 左右padding + content内容区。
怪异盒模型的宽度(width) = 左右margin + content内容区
在标准盒模型中使用padding会把宽度撑大，而怪异盒模型不会，只会缩小内容区，如果想将一个标准盒模型变成怪异盒模型可以使用box-sizing: border-box;。

.left {width: 300px;padding: 30px;float: left;background-color: red;
}
.right {padding: 30px;box-sizing: border-box;width: 300px;float: right;background-color: yellow;
}

上图中我给left盒right都设置了padding为30px，但是right设置了box-sizing属性，可以很明显的看出这两者之间的区别。

文档流布局

这个很简单，就是按照文档原本的渲染方式一条一条的展示出来，元素分为行元素、块元素，行元素可以并列展示，块元素独占一行，这个想必大家都很清楚了。

<body><h1>行元素</h1><p>111233</p><span>文本</span><button>按钮</button>
</body>

使用这种默认的布局方式肯定不能满足前端开发者日常的需求，因为实在是太丑了，虽然可以通过display属性来改变元素的属性，变成行级块元素或者行元素变块元素、块元素变行元素，但是依然达不到想要的效果，所以需要进行美化。

浮动布局

浮动布局主要是利用float属性来实现，可以给元素设置float属性让元素脱离文档流，然后设置left和right来边改元素在文档上的展示位置以此形成我们想要的布局方式，下面用浮动布局完成一个左右宽度固定中间自适应的三栏布局。

<style>* {margin: 0;padding: 0;}div {height: 500px;}.left {width: 300px;float: left;background-color: red;}.right {width: 300px;float: right;background-color: yellow;}.middle {background-color: blue;margin: 0 300px;}</style>
</head>
<body><div class="left"></div><div class="right"></div><div class="middle"></div>
</body>

如果想利用浮动布局实现上中下三栏布局，别忘记清楚浮动即可，否则会出现元素遮挡。注意：使用float浮动布局middle中间的元素在html中要放在最后，否则黄色区域会换行，因为div是块级元素使用margin后右边区域也是属于它的。

定位布局

定位布局是利用position来实现，可以使用absolute绝对定位移动元素的位置，使用绝对定位也会使元素脱离文档流，下面使用绝对定位实现一个三栏布局。

    <style>* {margin: 0;padding: 0;}div {height: 500px;}.left {position: absolute;width: 300px;left: 0;top: 0;background-color: red;}.right {position: absolute;width: 300px;right: 0;top: 0;background-color: yellow;}.middle {background-color: blue;margin: 0 300px;}</style>
</head>
<body><div class="left"></div><div class="middle"></div><div class="right"></div>
</body>

定位布局和浮动布局差不多，需要注意的是这里中间元素不需要放在最后，按照正常顺序即可。

表格布局

表格是很严格的一行就是一行，一列就是一列，并且他们的位置不会发生变化，所以我们可以利用表格布局来实现我们想要的布局，在以前还没有出现这些浮动、定位属性的时候表格用的是最多的布局方式。通过给父元素设置display: table;，给子元素设置display: table-cell;即可实现三栏布局，使用表格布局还是比较方便的，几乎不需要写什么样式就可以实现。

    <style>* {margin: 0;padding: 0;}div {height: 500px;}.parent {display: table;width: 100%;}.parent > div {display: table-cell;}.left {width: 300px;background-color: red;}.right {width: 300px;background-color: yellow;}.middle {background-color: blue;}</style>
</head>
<body><div class="parent"><div class="left"></div><div class="middle"></div><div class="right"></div></div>
</body>

flex布局

flex布局也叫弹性布局，是利用css3新出的属性display: flex实现的，这种布局方式很方便，也不会对文档的结构改变，是当下最热门的一种布局方式，建议每个前端开发者都要掌握。
什么是弹性布局？
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。目前主流的浏览器都已经支持了这种布局方式。使用这种布局的方式很简单，只需要给父级设置display: flex即可。
在 flex 中，最核心的概念就是容器和轴，所有的属性都是围绕容器和轴设置的。其中，容器分为父容器和子容器。轴分为主轴和交叉轴（主轴默认为水平方向，方向向右，交叉轴为主轴顺时针旋转 90°）。外层包裹子元素的父级被称为容器，内部的子元素被称为项目。父容器上有六大属性：

flex-direction：主轴的方向。
flex-wrap：超出父容器子容器的排列样式。
flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式。
justify-content：子容器在主轴的排列方向。
align-items：子容器在交叉轴的排列方向。
align-content：多根轴线的对齐方式。

这些属性详细的用法在这就不做介绍了，这不是本文的重点，感兴趣的可以点击这个链接了解MDN，下面使用flex写一个三栏布局，看看到底有多简单。

    <style>* {margin: 0;padding: 0;}div {height: 500px;}.parent {display: table;width: 100%;}.parent > div {display: table-cell;}.left {width: 300px;background-color: red;}.right {width: 300px;background-color: yellow;}.middle {/* 占满剩余空间 */flex: 1;background-color: blue;}</style>
</head>
<body><div class="parent"><div class="left"></div><div class="middle"></div><div class="right"></div></div>
</body>

以上就是几种常用的布局方式了，希望对大家会有所帮助，也欢迎大家做新的补充。

前端常用布局大全——细致讲解相关推荐

web前端常用网址大全
免费接口API http://zhouxunwang.cn/ es6书籍 https://es6.ruanyifeng.com/ js菜鸟教程 https://www.runoob.com/js/js ...
前端： 42 种前端常用布局方案，值得收藏！
对 CSS 布局掌握程度决定你在Web开发中的开发页面速度.随着Web技术的不断革新,实现各种布局的方式已经多得数不胜数了. 本篇文章总结了四十二种CSS的常见布局,这四十二种布局可以细分为如下几类: ...
建议收藏！总结了 42 种前端常用布局方案
对 CSS 布局掌握程度决定你在Web开发中的开发页面速度.随着Web技术的不断革新,实现各种布局的方式已经多得数不胜数了. 本篇文章总结了四十二种CSS的常见布局,这四十二种布局可以细分为如下几类: ...
三种前端常用布局及其优缺点
1.网格布局优点:可将网页划分成不同的网格,任意组合不同布局,可以实现以前只能通过诸如Bootstrapcss第三方框架的布局效果. 缺点:css 实验性新特性,在浏览器中还没有得到广泛的支持. 2 ...
前端页面的几种常用布局
一 .静态页面布局传统页面布局,网页上的所有元素的尺寸一律使用px作为单位. 静态页面布局通常有几下几种: 1.表格布局 2.层布局 3.div+css样式表布局表格布局: 表格布局容易把握,是最 ...
web前端html+css常用布局05列表布局
web前端html+css常用布局05列表布局注意:引入jquery的jquery-2.1.4.min.js包图片从自己目录中路径. 代码: <!DOCTYPE html> <h ...
前端常用的文档及组件库
前端在使用过程中会用到很多的组件或者文档,需要进行引用.在此归纳自己常用的库目录一.W3school 官网推出教程:JS.HTML.CSS.XML等二.MDN(mdn web docs) 三. ...
a标签download属性无效_html常用标签大全
html中标签有很多,每一种标签都有着不同的用处,下面这篇文章给大家总结html常用的标签,每一种标签都会跟随一个例子,话不多说,让我们来看看具体内容. 我的学习交流群web前端学习交流群 <f ...
IDEA常用快捷键大全
Idea常用快捷键大全,帮助我们更快更好地进行项目的开发. 编写代码快捷键 Ctrl+Shift + Enter,语句完成. "!",否定完成,输入表达式时按 "!&qu ...
vscode前端常用插件
vscode前端常用插件文章目录 vscode前端常用插件 1. Live Server 1.1 Live Server的使用 2. rest client 3. GitLens 4. CSS pe ...

前端常用布局大全——细致讲解

前言