建站
咨詢
售后
建站咨詢
新聞中心
本文是向設(shè)計(jì)師普及前端知識(shí)，從0出發(fā)，內(nèi)容和難度限于設(shè)計(jì)師需要了解的范疇，獻(xiàn)給那些被代碼折磨的設(shè)計(jì)師們，和那些與前端無(wú)法交流的設(shè)計(jì)師們，做一個(gè)能和前端愉快溝通的設(shè)計(jì)師。
我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、衡陽(yáng)ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的衡陽(yáng)網(wǎng)站制作公司
設(shè)計(jì)稿與代碼之間的關(guān)系
在很久很久以前，是沒(méi)有網(wǎng)頁(yè)設(shè)計(jì)師的存在的，當(dāng)HTML橫空出世為互聯(lián)網(wǎng)注入最基本的生命之時(shí)，沒(méi)有人在意頁(yè)面 是否好看。而隨著時(shí)間的發(fā)展，大眾審美需求的提升，網(wǎng)頁(yè)也需要有更多的變化而不僅僅是文字的展示，于是開(kāi)始出現(xiàn)了網(wǎng)頁(yè)設(shè)計(jì)師這樣的職業(yè)，而與之相對(duì)的就是 CSS的誕生。
在最早的網(wǎng)頁(yè)中，一切的一切都是混在一起的(就像盤古開(kāi)天辟地之前的宇宙)，雖說(shuō)是一切，其核心只有兩個(gè)——內(nèi)容與樣式。這樣的大亂燉給工程師和網(wǎng)頁(yè)設(shè)計(jì)師都造成了很大的困擾——如果你曾經(jīng)試圖打開(kāi)過(guò)某個(gè)網(wǎng)站的 源代碼你就會(huì)知道，那里面亂成什么德行，而那個(gè)時(shí)期的源代碼是你能看到的混亂程度再乘個(gè)5位數(shù)……好吧這只是個(gè)比喻，總之因?yàn)殡p方都受不了混亂的代碼，于 是有人提出建議，把樣式從內(nèi)容中踢出去，被踢出來(lái)的部分變成了CSS，留下的便是HTML。BTW，隨之應(yīng)運(yùn)而生的就是前端工程師(當(dāng)然其實(shí)誕生途中還有 flash啊js啊php啊各種亂七八糟的東西飛來(lái)飛去，你都不必知道)。
從這里我們大概可以知道，HTML是面對(duì)電腦、工程師這些理性邏輯頭腦的，而CSS是那些理性邏輯的家伙為設(shè)計(jì)者準(zhǔn)備的一個(gè)“工具”，是幫助HTML面對(duì)人的工具，也是讓一堆文字變成與設(shè)計(jì)稿一樣的唯一工具
HTML
前面說(shuō)到網(wǎng)頁(yè)的核心是內(nèi)容與樣式，HTML就是其前者——內(nèi)容。脫離了內(nèi)容的樣式是沒(méi)有意義的，也就是說(shuō)離開(kāi) HTML光談CSS是沒(méi)有意義的。HTML語(yǔ)言其實(shí)很好辨認(rèn)，由兩個(gè)尖括號(hào)：<和>包起來(lái)的就被稱為標(biāo)簽(tag)，如果你看到某個(gè)文檔里時(shí) 不時(shí)出現(xiàn)標(biāo)簽，那這份文檔十有八九都是由HTML語(yǔ)言(或者它的親戚XML)寫成的。
而由一對(duì)標(biāo)簽(比如和)包起來(lái)的所有文字內(nèi)容，便被稱為元素(element)。元素開(kāi)頭的標(biāo)簽就被稱為開(kāi)始標(biāo)簽，而末尾的標(biāo)簽則被稱為結(jié)束標(biāo)簽。開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間可以沒(méi)有任何文字(比如)
有一種特殊的自閉合標(biāo)簽，比如水平線
或者圖片，它們的斜杠位于尖括號(hào)里面，這樣的標(biāo)簽本身就是一個(gè)元素。
元素都有它的名字，名字就是開(kāi)始標(biāo)簽的那個(gè)尖括號(hào)后面的第一個(gè)單詞，這個(gè)名字是給電腦看的，但它很重要!因?yàn)椋?/p>
某些元素只能位在特定的元素內(nèi)。
某些元素只能位在特定的位置上。
同時(shí)在前端工程師中有一個(gè)很重要的課題便是語(yǔ)義化(Semantic HTML)。這涉及到很多問(wèn)題，比如做好的網(wǎng)頁(yè)能不能被搜索引擎(比如百度、Google)收錄，被收錄的部分是不是我們希望他收錄的部分。不過(guò)作為設(shè)計(jì) 師，語(yǔ)義化是寫代碼很久以后需要考慮的課題(甚至永遠(yuǎn)不會(huì)遇到)，但我仍然希望你們知道有這樣一個(gè)東西(之后我也會(huì)經(jīng)常提到)。
元素之間可以嵌套，但是不能交叉閉合，比如：
后出現(xiàn)的標(biāo)簽要先閉合成為一個(gè)元素，像下面這樣寫就絕對(duì)不行：
關(guān)于HTML，我要說(shuō)的最后一個(gè)東西就是屬性(attribute)。屬性會(huì)出現(xiàn)在元素的開(kāi)始標(biāo)簽里，通過(guò)空格區(qū)分不同的屬性，而寫法是屬性名="屬性值"。對(duì)于使用css的設(shè)計(jì)師來(lái)說(shuō)，class屬性就是最重要也是最經(jīng)常使用的屬性之一。
現(xiàn)在你可能有點(diǎn)暈頭轉(zhuǎn)向，但是后面我會(huì)不斷提到標(biāo)簽、元素、屬性，如果不記得就回來(lái)看一下就好了。
CSS
這就是網(wǎng)頁(yè)的第二個(gè)核心——樣式。理論上講它可以規(guī)定網(wǎng)頁(yè)的一切表現(xiàn)，位置、顏色、大小、距離…設(shè)計(jì)稿上的所有效果都可以借助它一一呈現(xiàn)，但是在實(shí)際應(yīng)用中配合功能和性能以及各方面的要求，導(dǎo)致設(shè)計(jì)師的構(gòu)想并不一定能夠完整表達(dá)。
HTML代碼可以寫在很多文件中，而css代碼只能出現(xiàn)在兩個(gè)地方：css文件或者h(yuǎn)tml文件中。而css的基本呈現(xiàn)形式是這樣的：
選擇器(selector)是用來(lái)告訴瀏覽器，樣式需要應(yīng)用到哪個(gè)元素上，它的功能非常強(qiáng)大——可以直接按元素名稱選擇，也可以按元素的id屬性值選擇，還可以按元素的class屬性值來(lái)選擇，甚至可以選擇某個(gè)元素的兄弟、兒子、孫子，還能選擇元素的狀態(tài)。
在HTML及CSS中都經(jīng)常提到的一個(gè)詞，class，通常也被稱作類。一個(gè)元素是可以擁有多個(gè)類的(但不能擁 有多個(gè)id，整個(gè)HTML文件中的所有元素的id屬性值都應(yīng)該是唯一的)，類名與類名之間使用空格隔開(kāi)，而類名不能使用中文。通過(guò)類選擇器選擇元素，是 CSS中最常見(jiàn)的選擇方式。
CSS的屬性(property)和前面說(shuō)過(guò)的元素的屬性(attribute)是完全不同的，有興趣的話可以 讀一下這篇文章，之后我會(huì)盡量區(qū)分說(shuō)明，請(qǐng)各位盡量避免混淆。每一條CSS屬性-值(property-value)都構(gòu)成一個(gè)聲明，每一句聲明之后都需 要一個(gè)半角分號(hào);來(lái)作為結(jié)束(就像我們寫作時(shí)所用的句號(hào))。
至于大括號(hào)({和})，這是css的語(yǔ)法標(biāo)記，就像HTML中的尖括號(hào)，時(shí)刻不要忘，否則易出錯(cuò)。
HTML + CSS
HTML 與 CSS 結(jié)合在一起，設(shè)計(jì)稿就這樣從一張圖片變成了我們?cè)跒g覽器中瀏覽的靜態(tài)網(wǎng)頁(yè)，當(dāng)然這也就是以前可能會(huì)經(jīng)常聽(tīng)到的 DIV + CSS 。這樣話說(shuō)起來(lái)很輕巧，但是無(wú)論是 HTML 還是 CSS 都是需要一個(gè)字一個(gè)字打出來(lái)的…而更多的問(wèn)題，就在 HTML 與 CSS 的結(jié)合過(guò)程中產(chǎn)生了。欲知后事如何，且聽(tīng)…
慢著，我們還是先把它們結(jié)合起來(lái)，有問(wèn)題下次再說(shuō)…
以上是一個(gè)最基本的帶有CSS鏈接的HTML頁(yè)面的代碼：
html元素是所有網(wǎng)頁(yè)都必須要具備的，網(wǎng)頁(yè)中的一切內(nèi)容必須寫在html元素內(nèi);
head元素是給瀏覽器和搜索引擎準(zhǔn)備的，大部分并不會(huì)顯示在頁(yè)面上;
title元素中的內(nèi)容會(huì)顯示在瀏覽器標(biāo)題欄的位置上;
link元素的href屬性則指示了這個(gè)頁(yè)面所使用的css文件的;
還有可能會(huì)出現(xiàn)script元素，它將會(huì)指示這個(gè)頁(yè)面所使用的js文件;
body元素是放置網(wǎng)頁(yè)內(nèi)容的地方(你以后所寫的99.9%的HTML代碼都會(huì)位于這個(gè)元素內(nèi))。
標(biāo)簽之前的空格被稱作“縮進(jìn)”，良好的縮進(jìn)習(xí)慣可以幫助寫出易讀的代碼，在任何一個(gè)項(xiàng)目或者頁(yè)面中，都應(yīng)該正確使用縮進(jìn)。上面所展示的代碼就是一個(gè)基本的縮進(jìn)示范，每個(gè)子元素都比其父元素縮進(jìn)一個(gè)單位。
一般的縮進(jìn)只要按下鍵盤左邊的Tab鍵就好，但是在程序員中廣泛存在一種究竟是一個(gè)Tab好還是兩個(gè)空格好的爭(zhēng) 議(如同咸甜豆腐腦般的存在)。當(dāng)然在書(shū)寫過(guò)程中，沒(méi)有人會(huì)去按兩下空格，他們通常是把Tab的輸入改為兩個(gè)空格而已(所以你只要記得，縮進(jìn)一個(gè)單位按一 下Tab就好)
關(guān)于書(shū)寫代碼工具，如果你實(shí)在沒(méi)得選，可以使用Dreamweaver(請(qǐng)使用代碼模式或者各半模式)，否則當(dāng)然首推Sublime Text，綠色便攜的Notepad++也是不錯(cuò)的選擇。
簡(jiǎn)單了解了HTML和CSS，下邊從網(wǎng)頁(yè)代碼與 PS 文件的相似性入手，來(lái)說(shuō)說(shuō) HTML 中一個(gè)最基礎(chǔ)的概念——內(nèi)聯(lián)元素與塊級(jí)元素，而與之對(duì)應(yīng)的 CSS 當(dāng)中的概念便是行框與盒模型。
BTW：在網(wǎng)上看到有人說(shuō)到 HTML 4 + CSS 2.1 與 HTML 5.0 + CSS3 的問(wèn)題，我會(huì)根據(jù)需求和實(shí)際情況具體說(shuō)明，而文章整體上是趨向于 HTML 5.0 + CSS3 的，而HTML 5.1 在語(yǔ)義化中所作的努力，我也會(huì)盡量寫進(jìn)來(lái)(但是因?yàn)閭€(gè)人了解實(shí)在有限，所以如果出現(xiàn)錯(cuò)誤還請(qǐng)不吝賜教)。
簡(jiǎn)單來(lái)說(shuō)，如果你的老板/客戶要求你兼容IE6、7、8，那就幾乎無(wú)法使用 HTML 5，普通的 HTML 也會(huì)出現(xiàn)各種奇怪的問(wèn)題，作為一個(gè)設(shè)計(jì)師的你也可以直接義正言辭地說(shuō)，臣妾做不到啊~~(IE6 兼容在世界各地的前端工程師眼里都是眼中釘肉中刺上輩子的仇敵這輩子的冤家)
在下文開(kāi)始之前，我想先讓你看一眼最上面那張圖，你是不是覺(jué)得這種展示方式仿佛在哪里見(jiàn)過(guò)?如果你曾經(jīng)做過(guò)應(yīng)用 的banner或者是手機(jī)主題，那你甚至有可能用過(guò)類似的方式來(lái)展現(xiàn)你們的產(chǎn)品。Google前段時(shí)間推出的Material Design也提到了布局的縱深感，在其中有這樣一張示意圖：
網(wǎng)頁(yè)內(nèi)的每一個(gè)元素，其實(shí)就好像是你 PS 文件中的一個(gè)圖層，通過(guò) CSS 的手段來(lái)定位圖層，就好像你在PS里移動(dòng)、縮放、旋轉(zhuǎn)圖層那樣，本質(zhì)上沒(méi)有太多區(qū)別。我們都知道 PS 的圖層面板中，越靠上的圖層，在圖片中顯示越“往前”，而在 HTML 中，后出現(xiàn)的元素則會(huì)疊在先出現(xiàn)的元素上面。如果說(shuō)圖層就是一張張紙片，PS 中的圖層管理是把一張張紙片疊起來(lái)，那么 HTML 中每出現(xiàn)一個(gè)新元素，就好像是新拿來(lái)一張紙，疊在原本的紙片堆上。
以上面那張 Google Material Design 的示意圖為例，其 HTML 代碼簡(jiǎn)單寫下來(lái)大概是下面這樣(我用div的id屬性值來(lái)表示上面圖中的部件名稱，實(shí)際使用中請(qǐng)不要這么做)：
我寫這段代碼的用意是展示 HTML 代碼中的元素與實(shí)際頁(yè)面上的層的關(guān)系。在 PS 中，只要圖層之間的上下位置正確就可以，如果兩個(gè)部分沒(méi)有互相重疊，那么這兩個(gè)部分的圖層誰(shuí)在上誰(shuí)在下都可以。但是在 HTML 中，除了遵循最基本的“后出現(xiàn)在上面”的原則，通常還需要注意，如果兩個(gè)部分屬于同級(jí)，那么位置靠上的內(nèi)容要先寫(加粗“通?！眱蓚€(gè)字真意味深長(zhǎng)啊哈 哈)。
在 CSS 的世界中，這種一個(gè)個(gè)表現(xiàn)得如同圖層一般的 HTML 元素就被稱為塊級(jí)元素(Block Element)。
塊級(jí)元素與盒模型
塊級(jí)元素有兩個(gè)默認(rèn)的表現(xiàn)：
在沒(méi)有規(guī)定寬度的情況下，它的寬度會(huì)自動(dòng)撐滿所能占據(jù)的寬度。
這些塊會(huì)一個(gè)接一個(gè)的上下放置。
這是我覺(jué)得 HTML 元素為數(shù)不多的與 PS 圖層不同的地方。PS 的圖層更隨意，HTML 元素受到的約束更多。
塊級(jí)元素本身，則遵循著被稱作盒模型(Box Model，也被稱作框模型)的布局方法，你可能已經(jīng)聽(tīng)說(shuō)過(guò)padding和margin這兩大基友了，也許還看過(guò)不少示意圖，如果你仍然不懂…我也不想丟你一個(gè)抽象得只有線的圖，請(qǐng)看：
最中央位于“畫(huà)”的部分的，是為Content(內(nèi)容)，你的文 字、圖片或者其他子元素都會(huì)放在這里。畫(huà)框與畫(huà)之間的綠色區(qū)域(藍(lán)色箭頭所示長(zhǎng)度分別表示上下左右距離)，就是所謂的padding(內(nèi)邊距)，畫(huà)框自然 就是border(邊框)，再往外一層的空白(被染紅了，箭頭所示長(zhǎng)度分別表示上下左右距離)，就是margin(外邊距)，在這里我用深淺不同的紅色表 示每一個(gè)“元素”的外邊距，其實(shí)。在我的理解里，margin就好像元素伸出來(lái)的一只手，擬人之后大概是這樣:
當(dāng)然了padding、border和margin的寬度、顏色乃至樣式(僅限border)都可以分別設(shè)置，家庭的一些無(wú)框裝飾畫(huà)或者像是莫奈的睡蓮那種三幅一聯(lián)這樣的，都是比較典型的三無(wú)(左右無(wú)內(nèi)外邊距、無(wú)邊框)元素。
元素之所以又是內(nèi)又是外，里里外外跟洋蔥似的套那么多層，是因?yàn)?HTML 元素需要一個(gè)定位的基準(zhǔn)。在 PS 中，所有的圖層都是以該圖層的左上角的像素點(diǎn)，相對(duì)于整個(gè)畫(huà)布的位置來(lái)決定的(你打開(kāi)窗口 —> 信息 面板，并移動(dòng)圖層的時(shí)候，就能看到這個(gè)圖層的位置信息)。然而這種定位方式對(duì)于網(wǎng)頁(yè)來(lái)說(shuō)，并不現(xiàn)實(shí)，而說(shuō)到定位與布局，那就是 CSS 的另一個(gè)非常重要且龐大的部分了，所以我們留到之后再說(shuō)……
#p#
在簡(jiǎn)單了解了HTML和CSS后，從網(wǎng)頁(yè)代碼與 PS 文件的相似性入手，說(shuō)說(shuō) HTML 中一個(gè)最基礎(chǔ)的概念——內(nèi)聯(lián)元素與塊級(jí)元素，以及與之對(duì)應(yīng)的 CSS 當(dāng)中的概念便是行框與盒模型。然后進(jìn)入CSS 的核心內(nèi)容，定位與布局。
行內(nèi)元素與行框
我們都知道，PS 里除了普通圖層，文字也會(huì)自成一個(gè)圖層，當(dāng)我們想把一段文字中的某兩個(gè)字換個(gè)顏色，改改字號(hào)或者字體，只要選中這兩個(gè)字，然后去用文字工具修改就可以了。 但是在 HTML 中，這樣不行。你需要告訴瀏覽器，從哪個(gè)字開(kāi)始，到哪個(gè)字結(jié)束，它們的字號(hào)、字體、顏色需要發(fā)生變化。
這么說(shuō)可能有點(diǎn)抽象，那么我們來(lái)舉個(gè)栗子：
我要告訴所有人這個(gè)魚(yú)塘被我承包了。
這句話的“所有人”三個(gè)字是紅色，而“被我承包了”這段話上出現(xiàn)了刪除線。其對(duì)應(yīng)的 HTML 代碼應(yīng)該是(在實(shí)際寫代碼的時(shí)候，這種地方不用分行，我分成5行是為了便于解釋)：
p元素是段落元素，它里面不能放置任何塊級(jí)元素，而放置其中span元素及s元素，便被稱為行內(nèi)元素 (Inline Element，也被稱作內(nèi)聯(lián)元素)。另外“我要告訴”、“這個(gè)魚(yú)塘”、“?！边@三段被分割的文字(標(biāo)點(diǎn)符號(hào)也算文字)，瀏覽器會(huì)在分析顯示的時(shí)候，創(chuàng)造 出一個(gè)行內(nèi)“匿名框”，因此這個(gè)p元素里實(shí)際上擁有5個(gè)行內(nèi)框，這些“框”從左到右依次排列在一起，就變成行框。
在我們學(xué)習(xí)英 語(yǔ)的時(shí)候，老師會(huì)講到所有的字都要位于某一條線的上方，只有像f\g\j\p\q\y這些字會(huì)把尾巴伸到那條線的下方，這條線就被稱為基線 (Baseline)。在默認(rèn)情況下，行內(nèi)元素及那些行內(nèi)匿名框都是以基線對(duì)齊的( PS 中有且僅有基線對(duì)齊一種方式，所以基線就是我們?cè)?PS 中編輯文字時(shí)總能看到的那條線了)。
另外一個(gè)困擾無(wú)數(shù)前端的大問(wèn)題就是行高(line-height)…不過(guò)我覺(jué)得對(duì)于廣大設(shè)計(jì)師來(lái)說(shuō)這都不是事 兒……對(duì)，PS 里也有一個(gè)叫做行高的值，如果前面說(shuō)的框框框框讓你難以理解，把 PS 中的行高直接帶入理解也沒(méi)有什么問(wèn)題(當(dāng)然具體問(wèn)題具體分析，高度計(jì)算在整個(gè) CSS 布局中都是一個(gè)比較令人困擾的問(wèn)題)。
行框相對(duì)于盒模型來(lái)說(shuō)鮮少被提到，因?yàn)槟切靶袃?nèi)框”實(shí)際上也應(yīng)用了 盒模型，只是對(duì)于那些非自閉和標(biāo)簽所構(gòu)成元素(這種元素被稱為非替換元素(non-replaced elements)，意思是說(shuō)元素所顯示的內(nèi)容無(wú)法通過(guò)修改屬性的方式替換)而言，padding、margin乃至width(寬度)屬性都會(huì)被無(wú)視， 這點(diǎn)經(jīng)常被人忽視而造成問(wèn)題。
總結(jié)
在本節(jié)文章中，我提到了三個(gè)非常重要的概念盒模型、塊級(jí)元素與行內(nèi)元素(這三個(gè)是一定需要理解和記住的，其它的 嘛……不急于現(xiàn)在記住…)。這三個(gè)概念都是在 CSS 當(dāng)中使用的，其中，盒模型是 CSS 當(dāng)中，對(duì) HTML 元素“圖層化”的處理規(guī)范;塊級(jí)元素和行內(nèi)元素，則是 CSS 當(dāng)中，對(duì) HTML 元素的一種分類方式(HTML 對(duì)它的元素有自己的另一種分類方式)。
至于說(shuō)哪些元素是塊級(jí)的，哪些是行內(nèi)的，哪些元素里面不能有哪些元素這種比較細(xì)節(jié)的問(wèn)題，我在這里寫一些常用的…肯定涵蓋不到全部范疇，但是作為一個(gè)設(shè)計(jì)師的你來(lái)說(shuō)，應(yīng)該是完全夠用了：
塊級(jí)元素
最常見(jiàn)的塊級(jí)元素便是div，如同 PS 中的圖層 1 或者圖層 765，沒(méi)有特殊含義，里面可以套各種各樣的元素。
有序列表ol、無(wú)序列表ul也是塊級(jí)元素，而他們的子元素只能是列表項(xiàng)li元素，li元素是塊級(jí)元素，但是li元素里只能放行內(nèi)元素(和p元素一樣)。
h1~6是標(biāo)題專用的標(biāo)簽，還有引用blockquote，這兩個(gè)是塊級(jí)元素，而其里面只能放行內(nèi)元素。
表格table及其相關(guān)的行、列、單元格元素在表現(xiàn)上你可以當(dāng)作它是一個(gè)塊級(jí)元素，但它整體的樣式解析方式非常特殊。本著樣式追隨內(nèi)容的原則，在需要展現(xiàn)表格的地方使用表格元素，不要把表格當(dāng)作樣式或者布局的工具。
表單form，語(yǔ)義化的塊級(jí)元素，在 HTML 中表示這是個(gè)表單元素，而在 CSS 中，他跟div元素一樣，里面放什么都行。
HTML 5 中新增了一批塊級(jí)元素，主要是為了 HTML 語(yǔ)義化。包括header(頁(yè)頭)、footer(頁(yè)腳)、nav(導(dǎo)航)、article(文章)、aside(側(cè)邊欄)、section(節(jié)選)。它 們對(duì)其子元素都沒(méi)有強(qiáng)制性的要求，只有article和section需要內(nèi)嵌一個(gè)標(biāo)題元素，這同樣是出于語(yǔ)義化的考慮。如果你不知道怎么用，可以不用理 會(huì)它們，統(tǒng)統(tǒng)用div(除非你是個(gè)想轉(zhuǎn)為前端的設(shè)計(jì)師)。
行內(nèi)元素
任何一段沒(méi)有被標(biāo)簽包圍的文本都會(huì)被視為一個(gè)行內(nèi)元素。
超鏈接a是一個(gè)典型的行內(nèi)元素(但是實(shí)際應(yīng)用中，經(jīng)常會(huì)用超鏈接元素來(lái)做一個(gè)按鈕(需要padding、margin)，這在 CSS 當(dāng)中也是可行的，以后再說(shuō))。
span元素在行內(nèi)元素中的地位與div在塊級(jí)元素中的地位相同，萬(wàn)金油的行內(nèi)元素。
看起來(lái)變粗的b與strong，以及看起來(lái)變斜體的i與em。這兩組元素在HTML 5中嚴(yán)格規(guī)定了語(yǔ)義，b表示無(wú)意義的加粗(比如產(chǎn)品名，或者僅僅是為了排版)，i表示在文章中突出不同意見(jiàn)或語(yǔ)氣(分類、術(shù)語(yǔ)、諺語(yǔ)等等),em表示一般 的強(qiáng)調(diào)，strong表示超級(jí)強(qiáng)調(diào)的強(qiáng)調(diào)(……)。
圖片img、輸入框input、下拉菜單select、文本框textarea。這幾個(gè)元素作為行內(nèi)元素，但卻可以設(shè)置padding、margin(因?yàn)樗鼈兪翘鎿Q元素)
讓字變小的small(讓字變大的big元素雖然也是行內(nèi)元素，但是 HTML 5 已經(jīng)將其廢止了)、上標(biāo)sup、下標(biāo)sub、短引用q、注音ruby、換行br等等都是行內(nèi)元素。
之前說(shuō)了什么是 CSS ，也介紹了 CSS 的盒模型，下面理所當(dāng)然地要進(jìn)入 CSS 的核心內(nèi)容，定位與布局。
其實(shí)說(shuō)完這個(gè)部分，CSS 就沒(méi)什么東西可說(shuō)了，剩下的都是些細(xì)枝末節(jié)或者很直觀的東西。對(duì)，把最抽象的這部分理解了， CSS 就沒(méi)有任何難度可言了。
如果你的制圖習(xí)慣比較良好，有好好對(duì)圖層進(jìn)行分組，那么你就已經(jīng)對(duì)你的設(shè)計(jì)稿完成了最初步的切版工作。按照你切 的版，把元素一個(gè)個(gè)碼好，你的頁(yè)面就搞定了。然而實(shí)際上的頁(yè)面并不是像PSD設(shè)計(jì)稿那么安分，它有可能這個(gè)部分要一直固定在屏幕頂端，那個(gè)部分的內(nèi)容時(shí)多 時(shí)少，因此才要學(xué)會(huì) CSS 的“布局語(yǔ)言”。
常規(guī)流
我們通常講的塊級(jí)元素與行內(nèi)元素的默認(rèn)表現(xiàn)，就是它們?cè)诔Ｒ?guī)流中的表現(xiàn)。有一個(gè)名為display的 CSS 屬性可以修改它們的表現(xiàn)形式。在默認(rèn)情況下，塊級(jí)元素的display屬性值為block，行內(nèi)元素的屬性值為inline，如果你把某個(gè)a元素的 display屬性值改成block，那么這個(gè)a元素就會(huì)像一個(gè)塊級(jí)元素一樣表現(xiàn)自己了。另外還有一個(gè)比較特殊的屬性值為inline-block，顧名 思義是像行內(nèi)元素那樣排列的塊級(jí)元素，一般情況下，在想要并列排列某些塊級(jí)元素的時(shí)候，就可以把它們的display屬性值改成inline- block(無(wú)獎(jiǎng)問(wèn)答：為什么不直接改成inline呢?)
相對(duì)定位
一般的教程會(huì)把相對(duì)定位和絕對(duì)定位一起放在浮動(dòng)的前面或者后面，而我選擇這么安排內(nèi)容的原因之一是我想要強(qiáng)調(diào)相對(duì)定位的元素仍然在常規(guī)流中(事實(shí)上W3C標(biāo)準(zhǔn)也是如此安排目錄的)。
position:relative的元素就擁有了相對(duì)定位的能力，而用戶可以通過(guò)上下左右(top、 bottom、left、right)四個(gè)屬性值(但是通常只使用top和left，因?yàn)檫@里允許使用負(fù)數(shù)，right = -left)來(lái)在視覺(jué)上“推走”這個(gè)元素。相對(duì)定位最大的特點(diǎn)就是，元素的本體還在那里，而用戶看到的則未必(上下左右都不設(shè)置或者為0的時(shí)候，元素仍舊 在那里)，定位方式是“相對(duì)于原位置定位”，因此被稱為相對(duì)定位。而其真正在定位上的應(yīng)用，通常不是在大框架的布局，而是一些小地方、小細(xì)節(jié)的微調(diào)，而其 更常見(jiàn)的用法，會(huì)在下面再次提到。
當(dāng)然一個(gè)超級(jí)普通毫無(wú)特色常規(guī)流塊級(jí)元素根本無(wú)法滿足我們對(duì)豐富布局的需求，所以出現(xiàn)了人間大殺器——float。
浮動(dòng)
當(dāng)我們將某個(gè)元素的float屬性改為left或者right的時(shí)候，這個(gè)元素就成為了一個(gè)浮動(dòng)的塊級(jí)元素。
首先它仍然是一個(gè)塊級(jí)元素(如果它原本是一個(gè)內(nèi)聯(lián)元素，那么此時(shí)它也變成了塊級(jí)元素)——擁有padding、border、margin，可以設(shè)置寬高。其次它浮起來(lái)了：
它脫離了常規(guī)流
它的寬度變成了它內(nèi)容的寬度
它向著你規(guī)定的方向擠成一堆
這些事意味著什么呢：
浮動(dòng)元素的寬度變成了其內(nèi)容所需的最小寬度。如果這個(gè)元素里面還有一個(gè)常規(guī)塊級(jí)元素呢?那就要看這個(gè)常規(guī)塊級(jí)元素多寬咯(它沒(méi)定義寬度，那還是100%)。
浮動(dòng)元素后面的常規(guī)元素看不見(jiàn)他(因?yàn)樗麄儾辉谕粋€(gè)“流”里了)，浮動(dòng)元素的父元素也看不見(jiàn)他(視而不見(jiàn))，只有行框看得見(jiàn)——文字會(huì)繞著它們排列。
浮動(dòng)元素會(huì)按著所規(guī)定的方向一個(gè)接一個(gè)水平排列，如果水平位置不夠則換到下一行，如果水平位置和垂直位置都還有剩，則會(huì)優(yōu)先往上放。
浮動(dòng)元素與父元素、浮動(dòng)元素之間的內(nèi)外邊界不會(huì)相交。也就是說(shuō)，浮動(dòng)元素以及其父元素的padding、margin區(qū)域都不會(huì)重疊。
浮動(dòng)元素的頂邊不會(huì)超過(guò)源代碼中它前面出現(xiàn)元素所生成行框的頂。
幾乎所有關(guān)于浮動(dòng)布局可能出現(xiàn)的問(wèn)題，都可以在上面這幾條中找到原因。舉個(gè)栗子：
兩列布局
微博就是最典型的兩列布局(新版V6的登錄后首頁(yè)變成三列了，不過(guò)用戶頁(yè)面仍然是兩列…)，這種兩列式的布局解決方法很簡(jiǎn)單，兩個(gè)固定寬度的div，一起向左浮動(dòng)，或者一個(gè)向左、一個(gè)向右。
而在很多游戲網(wǎng)站中， 為了盡可能利用大屏幕的優(yōu)勢(shì)，而把頁(yè)面設(shè)計(jì)成左邊有一個(gè)固定寬度的導(dǎo)航，右側(cè)全屏占滿，在這種情況下，上面的寫法就不成立了。不管兩個(gè)元素如何浮動(dòng)，寬度 都沒(méi)有辦法正好撐滿整個(gè)屏幕，雖然 CSS 中的width(寬度) 屬性可以使用百分比的值，但是當(dāng)你將其設(shè)為100%的時(shí)候，它又掉下來(lái)了。此時(shí)最好的做法是將左邊欄(第一個(gè) div)設(shè)為浮動(dòng)，并且給一個(gè)固定的寬度(比如200px)。此時(shí)兩個(gè) div 元素在同一高度上，但是右側(cè)的 div 看不到左側(cè)的那個(gè)，內(nèi)容仍然從左上角開(kāi)始顯示，此時(shí)只要給這個(gè) div 的margin-left賦值為200px，就可以將右側(cè)div的左邊200px空出來(lái)，這樣兩列布局的基本就完成了。
清除浮動(dòng)(Clear-fix)
有些人覺(jué)得Clear fix被翻譯為清除浮動(dòng)并不合適，因?yàn)閷?shí)際上浮動(dòng)仍然還在(元素仍然漂浮著)，而這個(gè)術(shù)語(yǔ)的本意也應(yīng)該是“清除浮動(dòng)所造成的不良影響”，不過(guò)在中文圈子里，從 clearfix 方法出生伊始，它就被叫做清除浮動(dòng)了…所以也沒(méi)辦法啦。
它所修正的不良影響，主要是針對(duì)上面的第二條。浮動(dòng)元素的父元素看不到它：如果某個(gè)塊級(jí)元素里的所有子元素都是浮動(dòng)的，那么這個(gè)元素自身就不會(huì)有高度，在需要設(shè)置背景和邊框的時(shí)候，這種問(wèn)題總像幽靈般如影隨形。解決方法也很成熟：
另外還有一個(gè)“真正的”清除屬性——clear，在上面的示例中也出現(xiàn)了，這個(gè)屬性規(guī)定了該元素的左側(cè)或右側(cè)是否可以與浮動(dòng)元素相鄰——如果規(guī)定的方向有浮動(dòng)元素，那么這個(gè)元素就會(huì)向下排列(到底是有多討厭人家…)
絕對(duì)定位
還有一種比較特殊的定位方式，被稱為絕對(duì)定位，事實(shí)上我們PS文件中的圖層都是絕對(duì)定位。position:absolute的元素就成為了一個(gè)絕對(duì)定位元素，相對(duì)定位是相對(duì)于元素自身，而絕對(duì)定位也是針對(duì)元素自身而言——跟自身原本絕對(duì)沒(méi)關(guān)系。
絕對(duì)定位的元素完全脫離了常規(guī)流，可以說(shuō)是“哪個(gè)元素都看不見(jiàn)它”。而它仍然需要一個(gè)定位的“原點(diǎn)”，W3C規(guī) 定離絕對(duì)定位元素最近的position屬性為relative、absolute或fixed的祖先元素的內(nèi)容框的左上角(有一個(gè)特例，就是該祖先元素 為行內(nèi)元素的時(shí)候，這里不展開(kāi)說(shuō)明了，基本遇不到)，作為該元素絕對(duì)定位的原點(diǎn)。因此，其實(shí)，相對(duì)定位元素(position:relative)通常都 被用于創(chuàng)建絕對(duì)定位元素的包含塊(containing block)，如果你有一個(gè)絕對(duì)定位元素，而它的位置跟你預(yù)想的不對(duì)，那就是其定位基準(zhǔn)出問(wèn)題了。而其定位方式一樣，是通過(guò)上下左右的值來(lái)規(guī)定的。
固定定位
position:fixed的元素就是固定定位元素，本質(zhì)上它也是一種絕對(duì)定位，這種元素會(huì)固定于瀏覽器窗口的固定位置，很多網(wǎng)站頂端的固定導(dǎo)航、右下角的固定廣告等等都是通過(guò)這種方式定位的。
定位關(guān)系
如果某個(gè)元素是絕對(duì)定位元素(position為absolute或fixed)，則float屬性對(duì)其無(wú)效，同時(shí)元素變?yōu)閴K級(jí)元素。
而當(dāng)某個(gè)元素的position不為static(position:static即為最普通的常規(guī)流中的元素)時(shí)，它們彼此之間就有可能發(fā)生重疊(就像PS圖層一樣，圖層重疊是很常見(jiàn)的)。
在源代碼中后出現(xiàn)的元素會(huì)覆蓋先出現(xiàn)的元素
浮動(dòng)元素會(huì)覆蓋常規(guī)流元素
絕對(duì)定位元素會(huì)覆蓋浮動(dòng)元素
使用z-index可以無(wú)視上述三條規(guī)則
z-index屬性可以規(guī)定圖層之前的層疊順序，其數(shù)值越大，該元素越靠“前”(疊在所有圖層的最上面)，如果你發(fā)現(xiàn)某個(gè)元素?zé)o論如何都覆蓋不了，檢查一下它的z-index屬性值，也許就能找到答案。
Flexible Box(伸縮盒模型)
display:flex的元素就會(huì)應(yīng)用伸縮盒模型，它是 CSS 中真正為布局而生的模型?，F(xiàn)在關(guān)于這個(gè)模型的相關(guān)文章還很少，而且各種問(wèn)題也很多，因?yàn)閺?9年到現(xiàn)在，它經(jīng)歷了3個(gè)大的版本變化，而這涉及到了大量手機(jī) 及IE的版本兼容問(wèn)題，導(dǎo)致很多網(wǎng)站都不愿意采取這種布局方式。
使用這種模型布局進(jìn)行布局最炫酷的一點(diǎn)是，我們不用再費(fèi)力計(jì)算寬度然后為元素規(guī)定寬度，所有的寬度根據(jù)所有可用空間及內(nèi)容進(jìn)行分配，這樣對(duì)于個(gè)數(shù)不固定的元素也可以實(shí)現(xiàn)完美分配?？臻g分配方式有兩種：
按照盒的寬度比例分配
按照剩余空間比例分配
如果上面的說(shuō)明有點(diǎn)不清楚，點(diǎn)這里有一個(gè)DEMO，可以通過(guò)改變左邊各項(xiàng)屬性的值看到其結(jié)果。如果你們的項(xiàng)目只 針對(duì)最新的iPhone(iOS7及以上)，你可以考慮拗你們的前端去嘗試使用這個(gè)模型來(lái)布局(我曾親測(cè)過(guò)絕大多數(shù)網(wǎng)上流傳的兼容代碼，全軍覆沒(méi)，主要國(guó) 內(nèi)有UC瀏覽器這個(gè)大殺器)。
最后
display規(guī)定了該元素所應(yīng)用的模型，position規(guī)定了該元素的定位方式，二者共同構(gòu)成了 CSS 定位與布局的基礎(chǔ)。另外W3C也提出了伸縮盒模型用于滿足復(fù)雜多變的布局需求，并且開(kāi)始推薦廠商實(shí)現(xiàn)，如果各位有需要，在將來(lái)我可以單獨(dú)開(kāi)一篇文章講這部 分內(nèi)容。
定位與布局在整個(gè) CSS 當(dāng)中是最難掌握的，這里我提到內(nèi)容也只是最容易發(fā)生的問(wèn)題，對(duì)于初入代碼門的設(shè)計(jì)師來(lái)說(shuō)，基本上是夠用了。但是很多前端工程師(不僅是處女座的)多少都會(huì) 有一些代碼潔癖，對(duì)代碼中的嵌套包含關(guān)系也很在意，比如某位大神的這篇文章中提到的代碼層級(jí)關(guān)系與內(nèi)容層級(jí)之間的聯(lián)系，不愿意僅僅為了布局而增加一個(gè)額外 的元素，這種時(shí)候精通各種 CSS 布局方式及其特點(diǎn)就顯得很有必要了。各位可以根據(jù)自己的程度選擇自己想要深入到何處~
最后關(guān)于相關(guān)的教程，除了W3C School的定位系列之外，我還推薦CSDN的說(shuō)說(shuō)標(biāo)準(zhǔn)系列。前者應(yīng)用型很強(qiáng)還帶有很多示例，適合初學(xué)者以應(yīng)用為目的的基礎(chǔ)學(xué)習(xí)，后者則是推薦給那些想 要進(jìn)階為前端工程師的人，深入了解 W3C 對(duì)盒模型及定位的定義，同時(shí)也有很多示例代碼可供學(xué)習(xí)。
文章名稱：【干貨】向設(shè)計(jì)師普及前端代碼知識(shí)
URL鏈接：http://www.5511xx.com/article/dpsdgpe.html
