网页设计css布局方式,css制作网页布局代码

作者：sunshine小小倩

转发链接：https://juejin.im/post/599970f4518825243a78b9d5

温馨提示：本文较长，图片较多，本来是想写一篇 CSS 布局方式的，但是奈何 CSS 布局方式种类太多并且实现方法太多，所以本文主要是介绍 flex 布局和 grid 布局，以及 CSS 常见的居中方式和两种经典的布局方式“圣杯布局”和“双飞翼布局”。想到哪写到哪，请各位见谅。

需要高清的CSS布局思维导图的，关注我，回复：CSS布局获取

我们的传统布局方式就是通过盒模型，使用 display 属性（文档流布局） position 属性（定位布局） float属性（浮动布局）。这个大家都比较熟悉，没有掌握的同学再去恶补一下基础

这是最基本的布局方式，就是按照文档的顺序一个一个显示出来，块元素独占一行，行内元素共享一行，这个相信大家都比较熟悉了，就不再赘述了

浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来。这个大家也比较熟悉，就不再赘述了。

我们也可以通过 position 属性来进行定位，这个大家也比较熟悉了，就不再赘述了。

flex布局

仅仅通过上述的三种布局方式还是有一些缺陷，比如我们不能只使用一个属性来实现垂直居中布局，所以就产生了第四种布局方式：flex 布局。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

flex 是一种新型的布局方式，使用该布局方式可以实现几乎所有你想要的效果。但是要注意其浏览器的兼容性，flex 只支持 ie 10 ，所有还是要根据你的项目情况使用（没错，我们要求至少 ie 9，(ಥ_ಥ)）。