思路： transform: scalex()
會
- 當父級元素(含祖先元素)沒有設定position的relative和absolute屬性值時;子元素設定了position: absolute,且子元素沒有設定left right top bottom屬性,那麼子元素相對於哪個元素定位(精確到: 是其margin的左上角 還是 padding的左上角 還是 content的左上角)
**父級元素的content左上角**
- 當父級元素(含祖先元素)沒有設定position的relative和absolute屬性值時,子元素設定了position: absolute,且子元素設定了left right top bottom屬性,那麼子元素相對於哪個元素定位(精確到: 是其margin的左上角 還是 padding的左上角 還是 content的左上角)
**html,body的margin區域的左上角**
- 當父級元素(含祖先元素)設定了position的relative和absolute屬性值時;子元素設定了position: absolute,且子元素沒有設定left right top bottom屬性,那麼子元素相對於哪個元素定位(精確到: 是其margin的左上角 還是 padding的左上角 還是 content的左上角)
**父級元素content的左上角 且 子元素沒有把父元素撐開**
- 當父級元素(含祖先元素)設定了position的relative和absolute屬性值時,子元素設定了position: absolute,且子元素設定了left right top bottom屬性,那麼子元素相對於哪個元素定位(精確到: 是其margin的左上角 還是 padding的左上角 還是 content的左上角)
**父級元素padding的左上角**
- 了解 粘性定位 (** 表頭固定; 吸頂)
劣： 有相容性的坑，對不同手機適配不是非常精準；需要設定多個**查詢來適應不同手機，單某款手機尺寸不在設定範圍之內，會導致無法適配。
網易方案：
某元素 50px
1rem iphone6(375) 50px;
1rem iphone6 plus(414) 55.2;
設計稿 給的尺寸是: 750px * 1334px
優：通過動態根 font-size 來做適配，基本無相容性問題，適配較為精準，換算簡便
劣：無 viewport 縮放，且針對 iphone 的 retina 屏沒有做適配，導致對一些手機的適配不是很到位
手淘方案：
優：通過動態根 font-size、viewpor、dpr 來做適配，無相容性問題，適配精準。
劣：需要根據設計稿進行基準值換算，在不使用 sublime text 編輯器外掛程式開發時，單位計算複雜
2020.12.19 作業題 1 ~ 10題 end
css解析從右往左解析
css 層級結構不要寫太深
原則上是不要超過三層, 層越多解析越慢, 頁面效能就越不好
// 盡量避免下面層級過多及用大量標籤來選擇元素
.container > .box > p > span > i
功能範圍不同
載入順序不同
相容性控制樣式時的差別
權重區別
xml裡面用的(了解)
重繪不一定需要重排（比如顏色的改變），重排必然導致重繪（比如改變網頁位置）
var arr = [『 『
瀑布流布局
預載入提前把載入好, 放在快取資料列表內
提高使用者體驗
new image()
作業要求: 實現乙個懶載入的案例和 乙個預載入的案例
了解下按需載入的概念
哪些元素會生成bfc
資源載入進來 => cssdom + dom => render tree(css html合成乙個tre，然後渲染) => layout => paint
針對谷歌瀏覽器核心，加webkit字首，用transform:scale()這個屬性進行縮放
優點：
缺點：現在一般用 字型圖示 代替 精靈圖
!important > 行內樣式(1000) > id選擇器(100) > 類、屬性和偽類選擇器(10) > 標籤和偽元素選擇器(1) > 萬用字元
Spring面試基礎題
1.你有沒有用過spring的aop?是來幹嘛的?大概會怎麼使用？答 1 有 2 用來實現橫切關注點與他們所影響的物件之間的解耦 橫切關注點 橫切關注點是散布於應用中多處的功能。橫切關注點是與應用的業務邏輯相分離的，往往會直接嵌入到應用的業務邏輯之中 2.如果1個介面有2個不同的實現,那麼怎麼來au...
前端讀者 前端面試基礎手冊（HTML CSS）
語義化的html 符合w3c規範 語義化 讓搜尋引擎容易理解網頁 重要內容html 放在最前 搜尋引擎抓取html順序是從上到下，有的搜尋引擎對抓取長度有限制，保證重要內容一定會被抓取 重要內容不要用js輸出 爬蟲不會執行js獲取內容 少用iframe 搜尋引擎不會抓取iframe中的內容 非裝飾性...
WEB前端 HTML CSS基礎前十題
結構層 由 html 或 xhtml 之類的標記語言負責建立，僅負責語義的表達。解決了頁面 內容是什麼 的問題。表示層 由css負責建立，解決了頁面 如何顯示內容 的問題。行為層 由指令碼負責。解決了頁面上 內容應該如何對事件作出反應 的問題。ie6盒子模型與w3c盒子模型 文件中的每個元素被描繪為...