上週，我們結束了京東站的製作，本週我們開始了手機站和響應式**的學習，並仿製了乙個手機端介面和乙個響應式介面，在完成這兩個**的過程中我遇到了許多問題，也了解了它們的解決方法，接下來我講詳細介紹本週我們的學習內容。
周一，我們了解了畫素之間的關係，具體為：
1.裝置物理畫素：裝置上的乙個畫素點。
2.裝置無關畫素：可以與物理畫素通過dpr轉換。（dpr為1時無關畫素=物理畫素。）
3.css畫素：css中使用的的抽象概念，頁面沒有縮放時，css畫素=無關畫素。
和視口viewport 的概念：
設定布局viewport的各種資訊
width=device-width：寬度等於裝置預設寬度，
initial-scale=1.0預設縮放比為1（讓css畫素=裝置無關畫素），
maximum-scale=1:最大縮放比為1，
minimum-scale=1:最小縮放比為一，
user-scalable=no:使用者禁止縮放（ios10中的sarifi瀏覽器失效）。
具體寫法：
之後，我們又了解了手機端用到的一些新的meta標籤：
禁止裝置將疑似手機號/郵箱,進行識別。取消點選撥打**等事件
設定瀏覽器，時候最新的ie和chrome去編譯
>>> 不是手機端專用，pc網頁一般也需要設定
其他幾個meta標籤，了解即可
① 設定瀏覽器過期時間，-1表示時刻過期，及每次重新整理都要請求最新資料
② 是否設定瀏覽器快取，否
③ 是否從本機讀取快取檔案，否
手機端樣式選擇:
1.手機端一般不支援微軟雅黑,中文字型無需選擇,使用手機預設即可,;
2.英文本型一般選擇
font-family: helvetica;
-webkit-user-select: none;
-moz-user-select: none;
去除表單預設外觀
手機電腦均可使用。
input::-webkit-input-placeholder
幫助：文件偽類物件選擇符可查
a img
打**給:0535-10086
發簡訊給: 10086
發郵件給: [email protected]
之後，我們學習了很好用的彈性盒子和它的屬性：
彈性盒flex的使用
1.給父容器新增display：flex/inline-flex；屬性。
2.父容器可以使用的屬性值有：
①.flex-direction:屬性決定主軸的方向（即專案的排列方向）。
row（預設值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
②.flex-wrap:如果一條軸線排不下，如何換行.
nowrap（預設）：不換行。當父容器寬度不夠時每個item會被適當擠壓。當父容器寬度過大時不會拉伸。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。
③.flex-flow：flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
④.justify-content：justify-content屬性定義了專案在主軸上的對齊方式。
flex-start（預設值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，專案之間的間隔都相等。(首位專案分別在父容器最左、最右)
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。（首尾專案與父容器邊界有間隔。）
⑤.align-items：屬性定義專案在交叉軸上如何對齊。
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。(與專案行高，字型等會影響每行的基線)
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
⑥.align-content：屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）：軸線佔滿整個交叉軸。
3.專案的屬性：
①.order：屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
②.flex-grow：屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
如果所有專案的flex-grow屬性都為1，
則它們將等分剩餘空間（如果有的話）。
如果乙個專案的flex-grow屬性為2，其他專案都為1，
則前者佔據的【剩餘空間】將比其他項多一倍。
③.flex-shrink：屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
如果所有專案的flex-shrink屬性都為1，
當空間不足時，都將等比例縮小。
如果乙個專案的flex-shrink屬性為0，
其他專案都為1，則空間不足時，前者不縮小。
負值對該屬性無效。
④.flex-basis：屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
它可以設為跟width或height屬性一樣的值（比如350px），則專案將佔據固定空間。
⑤.flex：屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
⑥.align-self：定義單個item在交叉軸上的對齊方式，可以覆蓋父容器的align-item對齊方式。
預設為auto。表示繼承父容器。
接下來就是用於響應式布局的屬性：@media，
使用@media的三種方式
1.直接在css檔案中使用
@media 型別 and （條件1） and （條件2）｛
css樣式
｝2.使用@import匯入
@import url（） all and（）；
3.使用link鏈結，media屬性用於設定查詢方式。
以上就是這週我的h5學習內容。
h5學習（css第三天）
今日所學 盒模型 最終結果可以做到 d1 d2 d3 d4 d5 d6 d7 強調border元素對margin元素的影響，若忽略border元素會導致margin元素脫離上一級的束縛 先是對文件的編輯，包括一些盒模型技巧 在這裡插入描述 關於盒模型 乙個元素在頁面中真實佔據的位置叫做盒模型。mar...
第三週學習總結
這周關於深度學習的內容比較簡單，是對線性代數的簡單回顧，所以我在這裡做乙個簡單的總結。向量與矩陣 矩陣是由m n個數組成的乙個m行n列的矩形 特別地,乙個m 1矩陣也稱為乙個m維列向量 而乙個1 n矩陣 也稱為乙個n維行向量.向量可以用矩陣表示,且有時特殊矩陣就是向量.簡言之就是矩陣包含向量.矩陣加...
第三週學習總結
複習了一周唄 就感覺鞏固了一下，學習方法還是理解著背，死記硬背是不可能的，除了英語和文科這輩子都不可能死記硬背的。今天還複習了剩下的搜尋。比如拓撲排序，根據深度進行的排序？雖然又看了一遍但是還是不知道這個到底與按深度排序有什麼區別的說，總之就是先算出深度，然後從入度為0的乙個個廣搜，放進陣列就好。剩...