《自定義列表樣式》
簡(jiǎn)介：在實(shí)際工作當(dāng)中會(huì)遇到大量的自定義列表樣式的情況，那么這種情況都有一種非?？焖俚霓k法來制作；
方法一：清除ul的默認(rèn)列表樣式以后直接給li添加背景圖，對(duì)齊方式為left center，最后關(guān)鍵的一步通過padding-left單獨(dú)擠出圖片的占位空間即可。 ?（優(yōu)點(diǎn)制作快速，缺點(diǎn)：列表樣式的圖片不能被單擊。）
方法二：優(yōu)點(diǎn)可以讓小圖片也能被超鏈接覆蓋。 制作方法就是將圖片和padding-left付給a標(biāo)簽即可。
《背景圖和插如圖片的區(qū)別》
總結(jié)：插入圖片是占位的，而背景圖片只是裝飾不占位（相當(dāng)于不存在）
兩者的優(yōu)缺點(diǎn)：
背景圖片更好控制因?yàn)樗卸ㄎ粚傩?，而且由于它本身不占位也不?huì)造成互相遮擋和影響的問題。
插入圖片的優(yōu)點(diǎn)，插入圖片的語義更高更容易被瀏覽器抓取。如果說比較重要的圖片建議用插入圖片表示。
在實(shí)際工作中會(huì)遇到大量的圖文混排的效果，這種時(shí)候建議多用背景圖片因?yàn)楸容^好控制。
插入圖片是可以接受寬高定制的，它放在文字堆中本質(zhì)就相當(dāng)于一個(gè)比較大或者比較小的文字。所以說它可以當(dāng)成文字來控制。
Img的本質(zhì)就是一個(gè)文字而已。
《盒子模型深度理解》
對(duì)于盒子模型來講不管是添加margin還是padding實(shí)際上占位尺寸都是在原來的基礎(chǔ)上增加。
而其中的區(qū)別是，padding會(huì)增大實(shí)體的范圍，而margin不會(huì)影響。所以說我們可以人為padding也是實(shí)體范圍的一部分；
后期的工作中會(huì)移動(dòng)一個(gè)問題， 如果你寬度和高度寫死了。那么你再添加padding相當(dāng)于埋了一個(gè)雷，尺寸就和以前不一樣了，你需要在原有的寬高基礎(chǔ)上減掉padding的尺寸才能保證盒子大小不變。
分清當(dāng)前的東西是哪個(gè)盒子的內(nèi)容，內(nèi)容與盒子之間是內(nèi)邊距是padding，然后盒子與盒子之間是外邊距margin。
【網(wǎng)頁布局方式】
《標(biāo)準(zhǔn)流》
簡(jiǎn)介：標(biāo)準(zhǔn)流是W3C提出的一個(gè)用于網(wǎng)頁布局中的非常重要的概念。到底什么是標(biāo)準(zhǔn)流。
對(duì)于非邏輯的視覺化的一些界面或者軟件 都涉及到排版問題。然后現(xiàn)在市面上的所有軟件他們的排版可以分為兩大類型一種是 ps類型，還有一種是記事本類型。
流派：
任何可視化的軟件當(dāng)中它天然都會(huì)存在一種自動(dòng)排列的順序，設(shè)計(jì)類軟件排列順序叫做定位式，文本類軟件排列就遵循文本流，然后網(wǎng)頁這種東西也不例外它也會(huì)有天然的自動(dòng)排列順序來控制它內(nèi)部顯示的一切元素。
什么是標(biāo)準(zhǔn)流：
網(wǎng)頁中標(biāo)準(zhǔn)流指的就是塊級(jí)元素豎直排列，行內(nèi)元素水平排列，的這種自動(dòng)排列的順序。
在網(wǎng)頁中所有3類布局方式中 標(biāo)準(zhǔn)流布局是最穩(wěn)定的一種布局方式，也是W3C重點(diǎn)推薦使用的。
《浮動(dòng)流》
解釋：任何的流派指的都是一種排列方式；浮動(dòng)流是脫離標(biāo)準(zhǔn)流以外的另外一種排列方式。
浮動(dòng)流排列方式：
它是脫離標(biāo)準(zhǔn)流排列的第一種方式；浮動(dòng)流當(dāng)中只有水平排列，要么左對(duì)齊要么右對(duì)齊。
浮動(dòng)流中的注意事項(xiàng)：
一、浮動(dòng)流又稱之為半脫離標(biāo)準(zhǔn)流，也就是說它并沒有徹底脫離。它的這種脫離方式會(huì)影響到標(biāo)準(zhǔn)流中原有的標(biāo)簽或數(shù)據(jù)。
二、如果說一個(gè)元素從標(biāo)準(zhǔn)流當(dāng)中脫離了，那么就相當(dāng)于這個(gè)元素被從標(biāo)準(zhǔn)流中刪除了一樣它就不會(huì)占位了。
三、所謂的任何一種流派都指的是同級(jí)元素之間的排列。
四、我們之前有一個(gè)原則，同級(jí)元素之間水平排列和垂直排列只能用一個(gè)。這個(gè)話到現(xiàn)在為止翻譯過來就是同級(jí)元素之間標(biāo)準(zhǔn)流或浮動(dòng)流只能選其一。
《清除浮動(dòng)知識(shí)點(diǎn)》
在標(biāo)準(zhǔn)流當(dāng)中當(dāng)某個(gè)元素受到浮動(dòng)的影響以后可以通過clear：both；來清除浮動(dòng)的影響。
【定位流】
簡(jiǎn)介：在網(wǎng)頁制作中有兩種方式的定位，一個(gè)是相對(duì)定位，一個(gè)是絕對(duì)定位。都是依據(jù)物體的坐標(biāo)進(jìn)行位置排列的。它也是一種可以脫離標(biāo)準(zhǔn)流的方式，這種定位流的脫離方式稱之為徹底脫離，意義是完全不會(huì)影響標(biāo)準(zhǔn)流中的原有數(shù)據(jù)。所以說很多時(shí)候標(biāo)準(zhǔn)流和定位流是可以共存的。
《相對(duì)定位》
相對(duì)定位脫離方式是占位脫離，意義是占有原來在標(biāo)準(zhǔn)流中的位置后通過坐標(biāo)來設(shè)置新的位置；
基本結(jié)構(gòu)：
Position：relative；
坐標(biāo)設(shè)置：
Left：0；top：0；bottom：0；right：0；通過這些屬性可以設(shè)置新的坐標(biāo)值。
《絕對(duì)定位》
學(xué)習(xí)定位實(shí)際上主要以后使用最多的就是這個(gè)絕對(duì)定位。絕對(duì)定位是真正意義上的徹底脫離標(biāo)準(zhǔn)流并且不會(huì)在標(biāo)準(zhǔn)流中占位。
絕對(duì)定位的使用原則：
子絕父相；子級(jí)絕對(duì)父級(jí)相對(duì)這種設(shè)置可以讓絕對(duì)定位的元素相對(duì)于父級(jí)進(jìn)行定位。
基本結(jié)構(gòu)：
Position：absolute;
個(gè)人經(jīng)驗(yàn)：發(fā)現(xiàn)只要脫離標(biāo)準(zhǔn)流的元素它的顯示模式都會(huì)自動(dòng)轉(zhuǎn)換，都會(huì)自動(dòng)轉(zhuǎn)換為行內(nèi)塊。
發(fā)現(xiàn)塊級(jí)元素是只有標(biāo)準(zhǔn)流中才存在的。網(wǎng)頁布局中最穩(wěn)定的是標(biāo)準(zhǔn)流，其次浮動(dòng)流，最后定位流（定位流使用起來有時(shí)候比較麻煩因?yàn)樾枰O(shè)置坐標(biāo)和父級(jí)相對(duì)）所以說制作網(wǎng)頁的時(shí)候一般網(wǎng)頁設(shè)計(jì)師會(huì)選擇能用標(biāo)準(zhǔn)流制作的都用標(biāo)準(zhǔn)流制作，不能的就用浮動(dòng)流，最后才選擇絕對(duì)定位。
《圖層順序調(diào)節(jié)屬性》
進(jìn)入了定位的元素都會(huì)有上下顯示關(guān)系，在css當(dāng)中可以依靠 z-index屬性來調(diào)節(jié)標(biāo)簽的圖層顯示順序。數(shù)值越大越靠上。 注意事項(xiàng)：它的值是不帶單位的。因?yàn)樗硎疽环N級(jí)別。
《固定定位》
簡(jiǎn)介：固定定位在低版本瀏覽器中不兼容這是一個(gè)新推出的css屬性，低版本瀏覽器包括（ie678），這些低版本瀏覽器需要用js來解決固定定位實(shí)現(xiàn)的效果。
基本結(jié)構(gòu)：
Position：fixed；作用實(shí)現(xiàn)選中元素在整個(gè)屏幕上進(jìn)行固定定位，固定于屏幕；
《知識(shí)點(diǎn)》
定位中的坐標(biāo)設(shè)置是可以接受百分比的。（一個(gè)盒子的寬高尺寸實(shí)際上也可以接受百分比）
