CSS核心內容整理 - (中)

    本文是CSS核心內容整理的第二篇,承接上一篇的內容繼續對CSS的一些重要內容進行整理,推薦先看完這個系列的上一篇.

四.  頁面佈局

    佈局能夠說是我認爲CSS中最重要的東西,CSS自己是個奇怪的東西一直以來有點遊離於Coder和非Coder之間的感受.自己沒有嚴謹的邏輯,並且有不少奇怪的"習慣",這些在佈局中都有所體現.

  1. 基本佈局概念

    在佈局上高度的用處在於細節和內容,總體是由寬度決定的.

    首先從多欄佈局開始劃分,基本上有3種實現方案:固定寬度、流動、彈性.

    固定寬度:

        固定寬度的含義我就不解釋了,我記得我幾年前上大學的時候就有很流行的960Grid佈局框架,一般固定佈局的大小事900到1100,經常使用的是960由於基本上全部顯示器都知足,同時960能夠被16,12,10,8,6,5,4整除,易於分欄.

    流動佈局:

        大小會隨用戶調整瀏覽器窗口大小而變化.當頁面寬度變化的時候,文本和元素間的位置均可能變化.強調一下,有些童鞋覺得流動佈局就是響應式設計,這是不同的.經過CSS媒體查詢,適應各類寬度的可變固定佈局才叫響應式設計,這和流動佈局是不同的.

    彈性佈局:

        估計見過的人很少,效果比較相似於瀏覽器的放大和縮放功能,好比當瀏覽器窗口變寬了,那麼裏面的全部元素都按照必定比例大小變化.這個因爲過於複雜,因此實際應用的例子很少.

  2. 寬高是徹底不同的

    在本文的上一篇中我簡述了盒模型中寬高的影響,在佈局中它們各自的狀況很是不同.

    佈局高度:

        正常狀況下,咱們不該該給任何元素設定高度,除非你要建立的是一個絕對定位的元素.只有不設定的固定高度,元素才能隨本身包含內容的增長減小而在垂直方向上擴展或搜索.設定了一個固定高度,那麼超出的內容要麼跑到容器以外,要麼被減掉,由overflow屬性決定.

    佈局寬度:

        對於寬度咱們是近乎和高度相反的態度,應該精細的控制寬度,從而讓內容自動擴展到填滿欄的寬度.

  3. 固定寬度的三欄佈局

    首先要認可即便不考慮兼容的狀況下,CSS依然是一個複雜的東西.其中的一些基礎很重要,它的一些表現和屬性支撐了所有的應用.拿出一個固定寬度分三欄的小Demo,請不要輕視它,它沒你想的那麼Easy.

    先上demo代碼,稍微有點長但簡單,瀏覽一遍便可:

    代碼過長-掛在OSC@Git上-點擊查看-固定寬度的三欄佈局.html

    最好將代碼copy下到瀏覽器中看一下效果,這裏不是爲了說明150+600+210=960的問題.而是爲了說佈局中各因素的影響.一點點來:

    上面的代碼中,article裏面的內容太多緊湊,因此打算加入padding這樣的內邊距,好比padding:10px 20px;可是加入後能夠發現,三欄的位置竄了,aside被擠下來了.在本系列的上篇中提到過,固定寬度的盒子爲它加padding或者margin會致使盒子元素變寬.這裏由於article變寬從而沒有aside的位置,它就只會放到下一行.

    怎麼解決?

    (1) 從新設置寬度,在原有基礎上減去padding和margin.這樣作很差的地方就是若是之後要調整padding或者margin的值會很是"危險".

    (2) 給容器內部應用的元素添加padding.

    按照盒模型,沒有設置寬度的元素在水平方向上回適應其父元素,內容會隨着margin,border,padding增長而減小.這麼一來風險就是之後可能要調整內部元素的padding或者margin時,有牽一髮而動全身的可能.一個解決方式是在容器和應用元素之間再加一層沒有寬度的div,這個div上加入padding或者margin.這樣就不會產生很差的影響.

    固然這麼作確實是將標記用於表現用途了,沒有使用純粹的CSS.關於這一點,請往下看:

關於表現性標記的思考 

    HTML 的目的是語義，也就是給內容賦予含義。而 CSS 呢，是爲了把表現性的樣式分離出來才發明的。不過，有些表現性標記是有害的，而有些則沒有反作用。使用表格來建立多欄佈局，或者使用<br />標籤在段間換行，卻不使用<p>標籤，這種作法的確不值得提倡，由於這會形成內容難以移植。好比說吧，用三個表格單元做爲三欄，這種佈局到哪都會顯示成表格，就算是在徹底不合適的智能手機裏也同樣。若是表現性標記沒法用 CSS 修改，或者在 CSS 不可用時也要迫使用戶接受，那就是濫用 HTML。但是，div 或 span 這種中性的元素，對默認樣式沒有影響，除非你給它們應用樣式，不然它們就跟不存在同樣。因此，我認爲添加這種元素達到表現性的目的是徹底能夠接受的。 

    這裏我插一句,若是對backbone有了解或者使用的童鞋會發現View的時間其實就綁定在一個新建立的空白Div上,也就是this.$el.不少優秀的庫其實也是把div做爲一個DOM空白載體去用,由於默認狀況下它不會對頁面產生影響.    

    (3) 使用CSS3的box-sizing:border-box

    不少同窗對這個屬性不熟悉,可能由於平時要考慮各類瀏覽器的兼容因此對於CSS3乾脆就不予選擇.這裏對此不做評論,不過CSS3確實有不少方便的好東西.這裏只要給3個浮動的欄分別加上box-sizing:border-box這個屬性,再給欄添加padding或者border就不會致使盒子寬度變化了,內容會向內收縮.

預防過大的元素 

    設計一個未來可能由他人維護的動態網站時，須要考慮得更長遠一些。好比，應該預見到可能出現一些過大的元素。若是未來有一張比浮動欄更寬的圖片被放到欄中，就會致使佈局變寬，而右邊的欄又會滑到下方。爲此，一個簡單的預防措施就是添加一條.inner img {max-width:100%;}聲明，以便限制圖片的寬度不超過其父元素（在此就是內部div）。 另外一個辦法是給每一個欄（或者內部div，若是你用了的話）添加overflow:hidden聲明。這條聲明不會縮小圖片以適應父元素，而會將它（以及任何過大元素）超出容器邊界的部分剪切掉。 

    動態網站中另外一個潛在的問題是換行。HTML 只會在單詞間空格的地方換行。一些長 URL，甚至一些長單詞，在欄比較窄的狀況下，都會致使欄寬過大。所以，還應該給全部欄的外包裝元素應用 word-wrap:break-word 聲明，以便全部欄及其內容繼承這個設定。有了這條聲明，瀏覽器會把過長的詞斷開顯示在不一樣行上。只是word-wrap沒有定義在哪裏斷開，所以結果徹底是隨機的，並且沒有連字符。不過，這條規則只在須要時纔會起做用，並且能保護佈局不會被長 URL 頂得支離破碎。建議你在每一欄中都用長 URL、大圖片，以及包含內容過多的元素測試一下佈局，看看這些聲明到底會不會起做用，並發現更多須要事先考慮保護措施的其餘 漏洞。    

  4. 中欄流動的三欄佈局

     在流動佈局中,若是想要實現中欄流動,一般有兩種方式.第一是在中欄大小變化時,使用負的margin定位右邊欄.另外一種是用CSS3讓欄容器具備相似表格單元的行爲(這種方式在現代瀏覽器中應用很是之多!).

    (1) margin-right:-210px

    好吧,可能到這裏你還不知道我在說什麼,因此直接看代碼吧~貼到頁面上運行一下看看效果:

    代碼過長-掛在OSC@Git上-點擊查看-中欄流動的三欄佈局.html

    

    代碼有點長,佔用了太多的篇幅~原本想外鏈的Github上又以爲沒什麼必要~題外話了.

    若是運行了代碼,大概能夠看明白這是要實現什麼效果了.三欄中,左欄和右欄的寬度固定,中欄大小適應於瀏覽器窗口.上面代碼是經過負的margin-right實現的,根據代碼闡述一下道理.

    三欄佈局而且實現中欄寬度不固定,最核心的問題就是右邊欄的定位,以及控制中欄大小變化時右邊欄與佈局的關係.

    上面代碼實現的核心,就是控制兩個三欄以外的Div容器,一個包住所有的三欄,另外一個只包住左欄和中欄.讓這兩個div都強制它們float:left;同時寬度width:100%;包住左欄和中欄的Div咱們額外給它一個margin-right:-210px;210px就是右邊欄的寬度.同時給被它包住的中欄加一個margin-right:210px;

    爲了給右欄騰出210px的寬度,中欄article有一個margin-right:210px;可是隻有這個只會把右邊欄再向右推210px.此時包裹住中欄和左欄的DIv上有210px的負右外邊距,這就會把右欄拉回article元素右外邊距所創造的空間內.中欄的寬度不固定爲auto,因此它仍會努力的佔據左欄剩餘的空間.可是本身的margin它會留下來,這樣就巧妙的留出來右側的210px寬度.

    上面兩段話有點繞嘴,但確是這種佈局的精華,也算上本文的一大重點,能夠多讀幾回,這是一種CSS設計中頗有用的技巧.

    (2) display:table-cell

    table是一種很古老的佈局方式,能夠說若是如今你還在使用table的特性進行佈局和表現樣式,那你必定out過久了.使用table佈局是難以接受的,不過若是經過CSS使佈局有table的特性卻很是好了.

    經過將display的屬性設爲table,table-row,table-cell這種方式能夠模擬table的行爲.

    若是將上面的三欄設置爲display:table-cell有不少好處:首先不用設置浮動就能夠並列顯示了,同時內邊距也不會破壞佈局了,一行中的全部單元格高度所有統一了,任何沒有明確設定寬度的欄都浮動了.能夠說若是不考慮低版本瀏覽器支持的問題,我認爲這是一個完美的解決方案,強烈推薦.

    這裏將上面的代碼中包裹兩欄或者三欄的div所有清除,同時去掉全部float:left;爲每一個欄加上display:table-cell.而後將左欄和右欄設置固定寬度,中欄width:auto;看看效果嗎,太簡單,太乾淨了不是嗎?這個方案第一次看到的時候讓我激動了,真的!我對於佈局一直很糾結,新的舊的,float仍是position.然而這種佈局乾淨而簡單,很是推崇!