一运褪、布局
1.PC端頁面
由于PC的屏幕分辨率較大（從1280768到1600900甚至是1920*1080）毙替，一般不會出現(xiàn)寬度不夠?qū)е抡坌胁婷铡Q行等情況陡蝇，所以一般都按照UI設(shè)計圖原始尺寸來進行編寫痊臭。在此時，一般會采用導(dǎo)航或者頂部登夫、底部等信息欄滿寬度广匙，內(nèi)容固定寬度然后居中的模式。通常狀況下恼策，內(nèi)容會在一個div里鸦致，比如：

<div class="nav">
.....(網(wǎng)站導(dǎo)航)
</div>
<div class="main">
    .....（內(nèi)容主體）
</div>
<div class="foot">
    .....(版權(quán)信息，合作單位等)
</div>

樣式：

.nav,.foot{
      width:100%;
}
.main{
      width:1200px;
      margin: 0 auto;
}

有時為了布局整體美觀涣楷，就算是滿寬度的部分分唾，其具體文字等信息內(nèi)容也是固定寬度居中的。

2.移動設(shè)備
移動設(shè)備的話狮斗，大致和PC端是一樣的绽乔，不過還是有其特別的部分。
1).在頁面的頭部要加meta標(biāo)簽:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

因為不同的用戶其手機可能會因為系統(tǒng)或者用戶自身設(shè)置的原因碳褒，其屏幕的大小縮放可能不為100%迄汛。加上這個標(biāo)簽意思就是將頁面在用戶的屏幕上以100%的縮放率顯示，并且不允許用戶自行縮放頁面大小骤视，從而達到最佳顯示效果鞍爱。
2).單位。由于移動設(shè)備屏幕分辨率等的不一致专酗，所以為了做到頁面的自適應(yīng)睹逃，一般不用px這樣的固定單位。寬度上一般使用百分比祷肯，此時元素的寬度是根據(jù)父元素的寬度計算的（最上級的父元素就是window對象也就是屏幕）沉填，所以還是很好算的。高度方面一般使用rem佑笋，即root em翼闹。由于em的計算方式在多層元素嵌套的時候會導(dǎo)致計算十分的復(fù)雜和困難，于是就有了rem蒋纬。rem單位的計算方式和em基本一樣猎荠，只不過其參照的并不是父元素的font-size而是html標(biāo)簽的font-size坚弱。具體的一些設(shè)置思路會在后面有所講述。此外還有vh和vw兩種單位关摇，但由于其提出時間較短荒叶，所以兼容性還不是很好。
3).設(shè)計模式输虱。由于現(xiàn)在很多的移動設(shè)備為了清晰度使用的是2倍屏甚至3倍屏些楣，所以在設(shè)計圖上UI有一種“高清設(shè)計模式”。

chrome的開發(fā)模式下宪睹，可以看到iPhone5的DPR是2.0愁茁，意思為2倍屏，即用2*2的像素來顯示一個像素點亭病。

在這種情況下埋市，通常來說根據(jù)UI給出的設(shè)計圖和實際設(shè)備的屏幕寬度，需要按比例將單位縮小或者通過一些方法來進行適配（注：適配多用于圖片的高清模式）命贴。

3.浮動
浮動是在布局過程中很重要的一個部分道宅。在此主要講解一下清除浮動。
由于浮動后的元素事實上脫離文本流胸蛛，所以在設(shè)置了浮動后污茵，會需要再進行浮動清除來使得其不影響布局。否則會出現(xiàn)如下情況：

測試用demo葬项，可以看出未清浮動的情況下父元素沒有高度

方法一：overflow:hidden
通過給浮動元素的父元素設(shè)置overflow:hidden可以有效的清除浮動泞当。
優(yōu)點：簡單，方便民珍。
缺點：如果遇到特殊的樣式需求需要子元素中有內(nèi)容需要超出父元素范圍時會導(dǎo)致顯示不完全襟士，如圖：

右上角定位的標(biāo)記超出部分無法顯示

方法二：給父元素定義height
由于是浮動元素脫離文本流，導(dǎo)致無法撐起父元素的高度從而導(dǎo)致排版布局錯亂嚷量，所以只要能給父元素一個應(yīng)有的合適的高度就可以解決了陋桂。
優(yōu)點：兼容性好。
缺點：這樣一來父元素高度定死蝶溶，無法隨著子元素高度變化而變化嗜历。
這種方法適用于寫死的靜態(tài)頁面使用。

方法三：使用after偽類和clear:both
通過偽類和clear(其實在網(wǎng)上這是兩種方法抖所，考慮到兼容性問題可以同時使用來兼容老版本瀏覽器)來清除浮動梨州，是當(dāng)前常用的辦法

.layout:after {
    visibility:hidden;
    display:block;
    clear:both;
    content:"";
    height:0;
    }
.layout {
    zoom:1;
    }
.clear {
    clear:both;
    }

在很多資料上這是分開成兩種方法的，然而事實上其可以同時使用田轧，因為其針對瀏覽器的兼容性不同的暴匠，比如zoom:1這一條就是用于處理ie6和ie7，而:after偽類則是用于ie8以上的版本的傻粘。

4.定位
大致簡單說一下定位每窖。定位分絕對定位和相對定位兩種帮掉。
1）.margin
在此之前先說說平時常用的margin，因為我感覺margin這種用來表示元素間間距的屬性也能算在頁面布局定位這里面吧岛请。在此主要想說的是，margin在垂直位置上會產(chǎn)生一個邊界疊加的問題警绩，即在垂直情況下崇败，兩個元素中的上下margin會產(chǎn)生一個邊界，然后兩個元素的邊界會使margin值進行疊加肩祥，以較大的那個值為準后室。

垂直位置的邊界疊加

邊界疊加并不僅僅只出現(xiàn)在上下位置的元素中，一個元素中包含另一個元素時也會產(chǎn)生邊界疊加混狠。

包含情況下的邊界疊加

相對定位的元素在原來的位置仍然占據(jù)空間蚓庭，但是卻已經(jīng)顯示到了其他位置

3）致讥。絕對定位
設(shè)置了絕對定位的元素就意味著這個元素已經(jīng)從文檔流中刪除掉了，其位置是不會隨著文檔流變化的器赞，也不會影響其他元素的位置垢袱。一般常用的有fixed、absolute港柜。大致的用法很簡單惶桐，fixed的定位是相對于整個瀏覽器窗口而言的，而absolute則是相對于其最近的設(shè)置為relative的父元素定位的潘懊，如果沒有其他relative則相對于整個body進行定位姚糊。
另外，絕對定位必須要設(shè)置水平位置和垂直位置授舟。
同時還要注意fixed在IOS上表現(xiàn)極差救恨，盡量不要使用fixed而是采取其他替代方案。

二释树、適配
適配這一部分肠槽，主要是想說一下移動端的自適應(yīng)方法擎淤。至于PC端，現(xiàn)在的主流PC的分辨率已經(jīng)不需要進行自適應(yīng)了秸仙，只需要將主要內(nèi)容按之前的說法那樣設(shè)置個居中嘴拢，這樣自然就美觀了。
1.百分比
百分比這種寫法一般都使用于寬度上寂纪，其計算的就是百分比x父元素的相應(yīng)尺寸席吴。
2.em和rem
1）em
em是web中所使用的一種長度單位，其大小是根據(jù)父元素的font-size決定的捞蛋，1em就代表著父元素的font-size孝冒，比如父元素的font-size是20px，那么對于其子元素來說1em就等于20px拟杉。所以庄涡，當(dāng)父元素的font-size變化時，1em代表的大小也會隨之發(fā)生改變搬设，這就可以打到自適應(yīng)的效果穴店。在單頁面應(yīng)用中，如果像我們之前那樣不同的組件由不同的人開發(fā)拿穴，所采取的自適應(yīng)方案不同迹鹅，那么使用em就可以防止自己組件的自適應(yīng)方案污染其他人的組件。然而em有一個最大的致命問題贞言，那就是當(dāng)頁面元素復(fù)雜的時候斜棚，元素之間的嵌套會使得元素的font-size屬性變得難以計算，em的計算同樣也會亂掉该窗。
2）rem
rem是當(dāng)前進行移動端適配的最佳選擇弟蚀，其兼容性和，便利性和實際效果等等都不錯酗失。rem其實就是root em的意思义钉，也就是說其參照的并不是父元素的font-size，而是整個html的font-size规肴。這樣在計算rem時就不會發(fā)生嵌套捶闸、繼承等等關(guān)系導(dǎo)致的提高計算量的問題。
3）媒體查詢
無論是em還是rem來做自適應(yīng)拖刃，都是通過改變font-size來實現(xiàn)的删壮，而修改這個的方法，我一般是使用媒體查詢來實現(xiàn)的
先看代碼

@media only screen and (min-width: 320px){
    html {
        font-size: 32px !important;
    }
}

@media only screen and (min-width: 400px){
    html {
        font-size: 40px !important;
    }
}
@media only screen and (min-width: 480px){
    html {
        font-size: 48px !important;
    }
}
@media only screen and (min-width: 540px){
    html {
        font-size: 54px !important;
    }
}
@media only screen and (min-width: 640px){
    html {
        font-size: 64px !important;
    }
}
@media only screen and (min-width: 720px){
    html {
        font-size: 72px !important;
    }
}
@media only screen and (min-width: 750px){
    html {
        font-size: 75px !important;
    }
}
@media only screen and (min-width: 850px){
    html {
        font-size: 85px !important;
    }
}
@media only screen and (min-width: 1000px){
    html {
        font-size: 100px !important;
    }
}

這一連串的媒體查詢原理很簡單兑牡，就是通過媒體查詢@media來根據(jù)不同的設(shè)備屏幕寬度來設(shè)置不同的font-size央碟，這樣一來在頁面渲染時，就會根據(jù)媒體查詢獲得的值來計算之后一系列的rem值均函，就可以實現(xiàn)頁面的自適應(yīng)了亿虽。
值得一提的是菱涤，chrome有最小字體的限制，使用媒體查詢方案來解決自適應(yīng)時在chrome上測試時會出現(xiàn)到了一定的小屏幕時哪怕適配了仍然會出問題的情況洛勉。

三.其他一些小技巧
1).box-sizing.
網(wǎng)頁的盒子模型分為兩種粘秆，w3c標(biāo)準和ie標(biāo)準模型。其中收毫， W3C標(biāo)準模型的盒子攻走，其外部尺寸（即作為元素的空間尺寸）是由其元素大小+其border寬度+其margin值+其padding值組成的，而其元素尺寸（即元素的大小尺寸）則是包括元素大小+padding+border牛哺。在這種情況下陋气，元素的height和width與其padding和border是分開的劳吠，這是我們常用的默認設(shè)置引润，但是在計算布局中元素所占的空間時則需要考慮其border和padding的值。然而ie盒子模型則有點不太一樣痒玩，在老版本的ie中淳附，盒子模型默認的尺寸中已經(jīng)包含了border和padding的值。

圖中可以看出蠢古，給與同樣的尺寸奴曙，兩種模型顯示出來的實際尺寸不同

在IE8以上版本的瀏覽器中萤晴，可以通過box-sizing屬性來調(diào)整盒子模型的類型裤唠，content-box為W3C標(biāo)準模型，border-box為IE模型详恼。一般來說堕战，后者在遇到一些復(fù)雜的帶邊框的布局時可以使用坤溃，能夠在尺寸計算上更為方便（當(dāng)然根據(jù)border的值可能尺寸上會和設(shè)計圖有些許差異）。

2).行內(nèi)元素
一般的行內(nèi)元素嘱丢，在水平方向上的margin和padding有效薪介，但是豎直方向無效。另外越驻，一般的行內(nèi)元素汁政，無法設(shè)置寬高，其寬高由內(nèi)容來決定缀旁，如果想設(shè)置寬高用display:inline-block记劈，比如想要在一個段落開頭插入一個兩個空格的縮進，可以給所有的p標(biāo)簽加一個before偽類來插入一個空格并巍。

.doublewords::before{
      display:inline-block;
      width:2em;
      content:'';
}

以上代碼display設(shè)為inline和inline-block的區(qū)別

順帶一提抠蚣，html里鍵盤輸入的空格你無論輸入多少個最后都會只顯示一個空格，如果要輸入多個空格的話履澳，使用?嘶窄。

3).在不定死寬度的情況下居中的問題
有的時候會碰到這種需求：有的導(dǎo)航欄怀跛、翻頁之類的地方，子元素個數(shù)柄冲、總寬度不確定吻谋，在這種情況下margin:0 auto會無效，因為此時瀏覽器無法自動計算其左右的margin值现横，這會導(dǎo)致其水平居中很麻煩漓拾，其實這時候有兩種辦法。
第一是采用flex盒子戒祠，這樣簡單方便快捷骇两。然而考慮到某些情況，有的瀏覽器不支持flex的話姜盈，就可以采用另一種方法低千，那就是給其設(shè)置：display:table

如圖，在設(shè)置了display:table之后就可以在不定死寬度的情況下使用margin:0 auto來居中了

4）垂直居中問題
1.圖片和文字的垂直居中
這種情況下馏颂，給圖片設(shè)置vertical-align: middle即可示血，但是這樣需要設(shè)置行高，根據(jù)行高來進行居中對齊救拉。這個屬性用于設(shè)置圖片等和文字的垂直對齊模式难审。
2.絕對定位
有些情況下，我們可以采取絕對定位的形式對某個元素進行垂直居中亿絮。代碼如下：

.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
margin-top:-50%;
left:0;
}

其原理是先將子元素定位在父元素高度一半的位置告喊，然后再通過負邊距將子元素上移子元素高度的一半，這樣就在事實上做到了垂直對齊派昧。
3.flex盒子
這種方法也能做到垂直居中黔姜，但由于有條件上的需求（即父元素中只有這一個子元素），所以用的其實并不多斗锭。

5）PC和移動端的其他一些區(qū)別
1.事件與接口的差別地淀。移動端沒有鼠標(biāo)事件，PC沒有移動端的一些相關(guān)API和觸摸事件岖是。
2.cursor屬性帮毁。cursor是一個用來改變鼠標(biāo)指針圖標(biāo)的CSS屬性，移動端是沒有的豺撑，但PC端在有的時候是需要通過cursor屬性來打
到提示用戶一些交互的作用的烈疚。
3.a標(biāo)簽。a標(biāo)簽有三個狀態(tài)偽類：active聪轿、hover爷肝、visited，這三個偽類在PC上實現(xiàn)的效果和移動端是不同的。比如hover偽
類灯抛，在PC上是鼠標(biāo)移動過的時候改變樣式金赦，但在移動端上并沒有這個事件，我自己測試時會在點擊a標(biāo)簽時改變樣式对嚼。同時夹抗，a
標(biāo)簽的href屬性是可以寫javascript語句的，在有的時候是可以用來代替onclick事件的纵竖。

本來還想用我以前寫過的一些頁面舉例來大致講一下的漠烧，仔細想想其實并沒什么好說的，不如在日常編寫中運用還更有用一點靡砌。前端不僅僅是js已脓，html和css同樣很重要，不能顧此失彼通殃，不能因框架寫好了很多東西就忽視別的東西度液。