【只差一個CSS】布局：簡介

makeFoxPlay 發布于2019-08-21 12:03 / 2966人閱讀

摘要：同樣美化頁面，我們需要先對頁面元素進行整理，這種整理就叫布局。如何布局首先頁面有一種默認布局，也就是什么也不寫，然后頁面對元素的排布情況。用哪一種工具來布局同學們要問啦，這么多工具，我到底用哪一種呢這里強烈推薦。

為什么要強調布局？

? 我們為頁面寫css，就是想美化這個頁面，讓它變得好看，而變得好看其實可以分兩步來完成，第一步是整理，第二步是修飾。就像一間房間，房間里有很多有用的東西，雜亂無章的擺放著，我們現在怎么美化這個房間呢？需要先把東西擺放整齊嘛，至于那些東西，可能本身看起來不太漂亮，但是我們不能一上來就給他們包個書皮，貼兩朵花什么的，這樣只會讓本來就亂糟糟的房間更亂，是不是？我們要先把它們擺放到位，然后在這個基礎上，對不同的東西進行美化，這樣才能有效的美化房間。同樣美化頁面，我們需要先對頁面元素進行整理，這種整理就叫布局(Layout)。

如何布局？

? 首先頁面有一種默認布局，也就是什么css也不寫，然后頁面對元素的排布情況。我們提到的布局一定是對這種默認布局進行調整，那怎么調整呢？互聯網剛剛發展的時候，網頁不像現在那么花哨，所以對css的要求沒有現在那么高，所以一開始css并沒有提供專門的布局方案，而是提供了一些基礎的功能，然后所謂布局，就是你自己用這些基礎功能去定位元素，就像你要做一個糖人，一開始只是給你提供了鉤子錐子，后來才有了專用的模具。

總結起來，傳統css布局工具有：

Float

Position

Table

現代css布局工具有：

Flexbox

Grid

我們可以用這些工具來對頁面布局。另外要講一點，Grid不僅是一種css提供的布局工具，更是一種布局方式，我們可以用任何布局工具來實現這種布局方式，可以用float做一個Grid框架，也可以用Flexbox來做。

用哪一種工具來布局？

? 同學們要問啦，這么多工具，我到底用哪一種呢？這里強烈推薦Flexbox。理由是Flexbox是一種現代的布局工具，當然要比舊工具好用啦，唯一的不足是瀏覽器兼容性，但是我們要做的是小程序，就沒有什么瀏覽器兼容性的問題了，小程序能很好的支持Flexbox，還有什么不用的理由呢？！

本教程免費開源，任何人都可以免費學習、分享，甚至可以進行修改。但需要注明作者及來源，并且不能用于商業。

本教程采用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。

想看系列其他課程，請關注微信訂閱號：只差一個程序員

如在閱讀教程過程中，有任何疑問，請加入答疑群

GPU云服務器云服務器 css簡介 css布局 css布局教程學習css布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87394.html

【只差一個CSS】布局：簡介

摘要：同樣美化頁面，我們需要先對頁面元素進行整理，這種整理就叫布局。如何布局首先頁面有一種默認布局，也就是什么也不寫，然后頁面對元素的排布情況。用哪一種工具來布局同學們要問啦，這么多工具，我到底用哪一種呢這里強烈推薦。為什么要強調布局？ ? 我們為頁面寫css，就是想美化這個頁面，讓它變得好看，而變得好看其實可以分兩步來完成，第一步是整理，第二步是修飾。就像一間房間，房間里有很多有用...

elina 2019-08-29 13:12 評論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...

Warren 2019-08-29 13:10 評論0 收藏0