靜態(tài)頁面布局總結(jié)（新手）

MasonEast 發(fā)布于2019-08-02 12:11 / 2444人閱讀

摘要：學(xué)習(xí)一個(gè)月了，對和頁面的靜態(tài)布局進(jìn)行一次總結(jié)總體來說靜態(tài)頁面布局分為兩大類，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么對于靜態(tài)的頁面的布局就不會有太大的問題再說布局之前先說一下元素的顯示模式分類。

學(xué)習(xí)HTML一個(gè)月了，對HTML和Css頁面的靜態(tài)布局進(jìn)行一次總結(jié)

總體來說靜態(tài)頁面布局分為兩大類，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，
那么對于靜態(tài)的頁面的布局就不會有太大的問題
再說布局之前先說一下元素的顯示模式分類。
    元素的顯示模式分類可以分為塊級元素，行內(nèi)元素，行內(nèi)塊級元素。
    塊級元素是垂直排列的，每個(gè)元素會獨(dú)占一行，行內(nèi)元素和行內(nèi)塊級元素不會獨(dú)占一行，會水平排列。
    當(dāng)然元素的顯示模式是可以隨便轉(zhuǎn)換的。
下面先來說說垂直布局，
    垂直布局讓元素在頁面里面垂直排列，這個(gè)是比較簡單的，我們知道在正常情況下頁面里的
    塊級元素都是從上到下依次排列的，那么這個(gè)垂直布局就相對來說簡單點(diǎn)。只要把塊級元素依次寫在頁面中，
    那么瀏覽器會默認(rèn)的讓這些塊級元素垂直排列，如果有行內(nèi)塊級元素或行內(nèi)元素
    則可以轉(zhuǎn)化為塊級元素來實(shí)現(xiàn)元素的垂直排列。
然后是來說水平布局，
    水平布局就是讓元素在頁面里面水平排列，這個(gè)比較垂直排列會相對復(fù)雜一些，因?yàn)樗脚帕袝婕暗礁樱?    因此會出現(xiàn)很多問題，比如高度塌陷，覆蓋等。而且一般都是通過浮動來實(shí)現(xiàn)水平布局，所以會遇到很多問題，
    這就要求我們對浮動有一定的了解，下面我會寫一些布局的細(xì)節(jié)以及浮動的各種情況。
    首先最常用的就是居中顯示，各種居中方式中我們最常用的就是text-align：center ， 
    text-align：center可以讓下面幾種情況居中：
       可以讓該元素的文本內(nèi)容水平居中，該元素中的行內(nèi)元素和行內(nèi)塊級元素，
       但是不能讓元素內(nèi)部的塊級元素水平居中
       垂直居中，用的最多的是讓line-height=元素的height，還有vertical-align，
       也是垂直對齊，他一般是讓圖片右邊的文本對齊圖片的上中下。
    然后用的多的就是內(nèi)外邊距了，就是margin和padding，很好的理解和運(yùn)用內(nèi)外邊距能夠
    讓你很方便的實(shí)現(xiàn)開頭或結(jié)尾的一些距離等。
     然后就是定位了，頁面布局的定位最常用的就是浮動（float）和定位（position），
     感興趣的可以去我的日記了有詳細(xì)的介紹。
     本人學(xué)習(xí)前段一個(gè)月，完全的菜鳥，希望大家多多指點(diǎn)。