1.網易考拉下拉列表 2.愛奇藝新聞 3.ps濾鏡選單 4.愛奇藝列表
網頁設計，首先要做好整體的布局，網頁布局就是將不同的元素按照一定的規則放置在瀏覽器的不同位置，因此會經常用到一些內容、填充、邊框、邊界等屬性，html布局元素經過不同的巢狀與位置的擺放，就類似於日常生活中的用盒子裝東西，把每乙個布局元素看成乙個盒子，引出了盒子模型
元素框的最內部分是實際的內容，直接包圍內容的是內邊距（padding）內邊距呈現了元素的背景（background）；內邊距的邊緣是邊框（border）；邊框以外是外邊距（margin），外邊距預設是透明的，因此不會遮擋其後的任何元素（其實元素的margin就是其所在父元素的padding）。元素的背景應用於由內容和內邊距、邊框組成的區域。 在 css 中，width 和 height 指的是內容區域的寬度和高度，增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸
margin 簡寫屬性在乙個宣告中設定所有外邊距屬性。該屬性可以有 1 到 4 個值。 有四個值的時候：margin:10px 5px 15px 20px;（順序依次是 上 右 下 左）； 有三個值的時候：margin:10px 5px 15px; （順序依次是 上 左右 下）； 有兩個值的時候：margin:10px 5px; （順序依次是 上下 左右） 有乙個值的時候 margin：10px；（代表四個值都是10px）
#div1
#div2
#div3
#div4
塊級元素：塊級元素獨佔一行，每次都從新行上開始，寬度，行高以及外邊距和內邊距都是可以設定的，如果寬度省略的話，預設充滿整個容器，並且可以容納其他行內元素，支援所有的css屬性 行內元素：在一行內顯示，不單獨占行，不可以設定寬高，寬高被內容撐開，不支援上下margin，**換行被解析 塊級元素行內元素區別？ 為什麼img input 行內標籤 但是可以設定寬和高？ 替換元素：根據元素的屬性來顯示樣式 img input select 不可替換元素：根據原來預設好功能來顯示 strong b 塊級元素和行內元素轉換
display:block /*行內元素轉換成塊級元素 獨佔一行*/
display:inline /*塊級元素轉換成行內元素*/
display:inline-block; /*行內元素轉換成 行內塊可以支援寬高.*/
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 css 中，任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。 如果浮動非替換元素，則要指定乙個明確的寬度；否則，它們會盡可能地窄。 注釋：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
浮動的作用：可以很方便的布局 例如： 兩個div左右布局 在一行內顯示
浮動帶來的問題
父盒子設定高度
.wrap
.wrap.clearfix
.clearfix:after
bfc(block formatting context)直譯為"塊級格式化上下文"。它是乙個獨立的渲染區域，只有block-level box參與， 它規定了內部的block-level box如何布局，並且與這個區域外部毫不相干。通俗的講，bfc就是頁面上的乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素，外面的元素也不會影響到裡面的元素,同時bfc任然屬於文件中的普通流。
生成bfc的元素
根元素
float屬性不為none
position為absolute或fixed
display為inline-block, table-cell, table-caption, flex, inline-flex
overflow不為visible
1、內部的box會在垂直方向，乙個接乙個地放置。
2、box垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰box的margin會發生重疊
3、每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的
格式化，否則相反)。即使存在浮動也是如此。
4、bfc的區域不會與float box重疊。
5、bfc就是頁面上的乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之
也如此。
6、計算bfc的高度時，浮動元素也參與計算
haslayout是windows internet explorer渲染引擎的乙個內部組成部分。在internet explorer中，使用布局概念來控制元素的尺寸和定位。從表現上來說，haslayout 可以等同於 bfc。 觸發haslayout的條件：
position: absolute
float: left|right
display: inline-block
width: 除 「auto」 外的任意值
height: 除 「auto」 外的任意值 （例如很多人閉合浮動會用到 height: 1% ）
zoom: 除 「normal」 外的任意值
在 ie7 中，overflow 也變成了乙個 layout 觸發器：
overflow: hidden|scroll|auto (這個屬性在ie之前版本中沒有觸發 layout 的功能。)
overflow-x|-y: hidden|scroll|auto （css3 盒模型中的屬性，尚未得到瀏覽器的
廣泛支援。他們在之前ie版本中同樣沒有觸發 layout 的功能）
1 使元素即生成了 block formatting context，又觸發了 haslayout
1.1 對於觸發 haslayout 的元素，通過 css 設定，使它產生 block
formatting context；
1.2 生成 block formatting context 但是沒有觸發 haslayout 的元素，
通過設定 'zoom:1'，使其觸發 haslayout。
1 使元素即沒有觸發 haslayout，又沒有建立 block formatting context。
html css快速入門教程（5）
1.畫盒子1 2.畫盒子2 3.京東特色購物 4.京東發現好貨 5.京東玩3c 通過使用 position 屬性，我們可以選擇 3 種不同型別的定位，這會影響元素框生成的方式。relative 相對定位的參照物是原來自己的位置，元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。...
html css零基礎入門教程
html即超文字標記語言 hyper text markup language 是用來描述網頁的一種語言。超文字標記語言的結構包括 頭 部分 外語 head 和 主體 部分 外語 body 其中 頭 部提供關於網頁的資訊，主體 部分提供網頁的具體內容。標記語言是一套標記標籤 markup tag h...
matplotlib快速入門教程
matplotlib是乙個python的2d的繪相簿，通過使用matplotlib我們只需要幾行簡潔的 就可以繪圖，直方圖 功率譜 條形圖 錯誤圖 散點圖等。這篇部落格主要介紹的是matplotlib.pyplot模組，matplotlib其實就是乙個模仿matlab開發的python庫。當然，它不...