【只差一个CSS】布局：简介

elina 发布于2019-08-29 13:12 / 2031人阅读

摘要：同样美化页面，我们需要先对页面元素进行整理，这种整理就叫布局。如何布局首先页面有一种默认布局，也就是什么也不写，然后页面对元素的排布情况。用哪一种工具来布局同学们要问啦，这么多工具，我到底用哪一种呢这里强烈推荐。

为什么要强调布局？

我们为页面写css，就是想美化这个页面，让它变得好看，而变得好看其实可以分两步来完成，第一步是整理，第二步是修饰。就像一间房间，房间里有很多有用的东西，杂乱无章的摆放着，我们现在怎么美化这个房间呢？需要先把东西摆放整齐嘛，至于那些东西，可能本身看起来不太漂亮，但是我们不能一上来就给他们包个书皮，贴两朵花什么的，这样只会让本来就乱糟糟的房间更乱，是不是？我们要先把它们摆放到位，然后在这个基础上，对不同的东西进行美化，这样才能有效的美化房间。同样美化页面，我们需要先对页面元素进行整理，这种整理就叫布局(Layout)。

如何布局？

首先页面有一种默认布局，也就是什么css也不写，然后页面对元素的排布情况。我们提到的布局一定是对这种默认布局进行调整，那怎么调整呢？互联网刚刚发展的时候，网页不像现在那么花哨，所以对css的要求没有现在那么高，所以一开始css并没有提供专门的布局方案，而是提供了一些基础的功能，然后所谓布局，就是你自己用这些基础功能去定位元素，就像你要做一个糖人，一开始只是给你提供了钩子锥子，后来才有了专用的模具。

总结起来，传统css布局工具有：

Float

Position

Table

现代css布局工具有：

Flexbox

Grid

我们可以用这些工具来对页面布局。另外要讲一点，Grid不仅是一种css提供的布局工具，更是一种布局方式，我们可以用任何布局工具来实现这种布局方式，可以用float做一个Grid框架，也可以用Flexbox来做。

用哪一种工具来布局？

同学们要问啦，这么多工具，我到底用哪一种呢？这里强烈推荐Flexbox。理由是Flexbox是一种现代的布局工具，当然要比旧工具好用啦，唯一的不足是浏览器兼容性，但是我们要做的是小程序，就没有什么浏览器兼容性的问题了，小程序能很好的支持Flexbox，还有什么不用的理由呢？！

本教程免费开源，任何人都可以免费学习、分享，甚至可以进行修改。但需要注明作者及来源，并且不能用于商业。

本教程采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

想看系列其他课程，请关注微信订阅号：只差一个程序员

如在阅读教程过程中，有任何疑问，请加入答疑群

idc机房托管专线服务 css简介 css布局 css布局教程学习css布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112439.html

【只差一个CSS】布局：简介

摘要：同样美化页面，我们需要先对页面元素进行整理，这种整理就叫布局。如何布局首先页面有一种默认布局，也就是什么也不写，然后页面对元素的排布情况。用哪一种工具来布局同学们要问啦，这么多工具，我到底用哪一种呢这里强烈推荐。为什么要强调布局？我们为页面写css，就是想美化这个页面，让它变得好看，而变得好看其实可以分两步来完成，第一步是整理，第二步是修饰。就像一间房间，房间里有很多有用...

makeFoxPlay 2019-08-21 12:03 评论0 收藏0
【只差一个小程序】介绍：简介

摘要：为什么要学小程序小程序类似于一种轻型的手机，可实现大部分的功能。小程序是微信团队推出的，拥有微信的原生支持，可共享微信庞大的用户群等等资源。小程序开发基于技术，相对于和的传统，开发成本低。为什么要学小程序？小程序类似于一种轻型的手机app，可实现大部分app的功能。小程序是微信团队推出的，拥有微信的原生支持，可共享微信庞大的用户群等等资源。小程序开发基于web技术，相对于an...

joy968 2019-08-21 11:53 评论0 收藏0
【只差一个小程序】介绍：简介

摘要：为什么要学小程序小程序类似于一种轻型的手机，可实现大部分的功能。小程序是微信团队推出的，拥有微信的原生支持，可共享微信庞大的用户群等等资源。小程序开发基于技术，相对于和的传统，开发成本低。为什么要学小程序？小程序类似于一种轻型的手机app，可实现大部分app的功能。小程序是微信团队推出的，拥有微信的原生支持，可共享微信庞大的用户群等等资源。小程序开发基于web技术，相对于an...

klivitamJ 2019-06-28 13:25 评论0 收藏0
【只差一个小程序】介绍：简介

摘要：为什么要学小程序小程序类似于一种轻型的手机，可实现大部分的功能。小程序是微信团队推出的，拥有微信的原生支持，可共享微信庞大的用户群等等资源。小程序开发基于技术，相对于和的传统，开发成本低。为什么要学小程序？小程序类似于一种轻型的手机app，可实现大部分app的功能。小程序是微信团队推出的，拥有微信的原生支持，可共享微信庞大的用户群等等资源。小程序开发基于web技术，相对于an...

lunaticf 2019-08-05 11:51 评论0 收藏0
【只差一个小程序】介绍：简介

摘要：为什么要学小程序小程序类似于一种轻型的手机，可实现大部分的功能。小程序是微信团队推出的，拥有微信的原生支持，可共享微信庞大的用户群等等资源。小程序开发基于技术，相对于和的传统，开发成本低。为什么要学小程序？小程序类似于一种轻型的手机app，可实现大部分app的功能。小程序是微信团队推出的，拥有微信的原生支持，可共享微信庞大的用户群等等资源。小程序开发基于web技术，相对于an...

Warren 2019-08-29 13:10 评论0 收藏0