一、Chrome除錯工具 二、PxCook的基本使用 1. PxCook的基本使用 1. 通過軟體開啟設計圖 ① 開啟軟體 ② 拖拽入設計圖 ③ 新建專案 2. 常用快捷鍵 1. 放大設計圖：ctrl + + 2. 縮小設計圖：ctrl + - 3. 移動設計圖：空格按住不放，滑鼠拖動 3. 常用工具 1. 量尺寸 2. 吸顏色 4. 從psd檔案中直接獲取資料 1. 切換到開發介面，直接點選獲取資料 三、盒子模型 掌握盒子模型 邊框、內邊距、外邊距 的設定方法 盒子模型一共有幾個部分組成？分別是什麼？ 1. 內容區域：content 2. 邊框區域：border 屬性值：單個取值的連寫，取值之間以空格隔開 如：border : 10px solid red; Ø 快捷鍵：bd + tab 邊框單方向設定 屬性名：border-方位名詞 3. 內邊距區域：padding（邊框與內容之間的距離） 場景：只給盒子的某個方向單獨設定內邊距。  屬性名：padding-方位名詞  屬性值：數字+px Ø 給盒子設定四周 20px 的內邊距可以通過什麼屬性設定？ padding : 20px ;（常用） Ø 給盒子設定上下20px、左右30px的內邊距可以通過什麼屬性設定？ padding : 20px 30px ; Ø 給盒子設定左側50px的內邊距可以通過什麼屬性設定？ padding-left : 50px ; 記憶規則：從上開始賦值，然後順時針賦值，如果沒有賦值的，看對面的！！ 4. 外邊距區域：margin  作用：設定邊框以外，盒子與盒子之間的距離 盒子區域的大小通過寬度width和高度height來設定 場景：瀏覽器會預設給部分標籤設定預設的margin和padding，但一般在專案開始前需要先清除這些標籤預設的margin和padding，後續自己設定。   css佈局：浮動 一.結構偽類選擇器： 二.浮動 浮動的程式碼  屬性名：float    屬性值：左浮動 left  右浮動 right  浮動的作用 早期作用：左浮動 float：left                   右浮動 float：right  浮動的特點 1. 浮動元素會脫離標準流（簡稱：脫標），在標準流中不佔位置 • 相當於從地面飄到了空中 2. 浮動元素比標準流高半個級別，可以覆蓋標準流中的元素 3. 浮動找浮動，下一個浮動元素會在上一個浮動元素後面左右浮動 4. 浮動元素會受到上面元素邊界的影響 5. 浮動元素有特殊的顯示效果 • 一行可以顯示多個 • 可以設定寬高 Ø 注意點： • 浮動的元素不能通過text-align:center或者margin:0 auto，讓浮動元素本身水平居中 浮動元素的特點有哪些？ 1. 浮動元素會脫標，在標準流中不佔位置 2. 浮動元素比標準流高出半個級別，可以覆蓋標準流中的元素 3. 浮動找浮動，下一個浮動元素會在上一個浮動元素後面左右浮動 4. 浮動元素會受到上面元素邊界的影響 5. 浮動元素有特殊的顯示效果：① 一行可以顯示多個 ② 可以設定寬高 浮動書寫網頁導航步驟 1. 清除預設的margin和padding 2. 找到ul，去除小圓點 3. 找到li標籤，設定浮動讓li一行中顯示 4. 找到a標籤，設定寬高 → a標籤預設是行內元素，預設不能設定寬高？？ • 方法一：給a標籤設定 display : inline-block • 方法二：給a標籤設定 display : block • 方法三：給a設定 float : left 三.清除浮動 含義：清除浮動帶來的影響 • 影響：如果子元素浮動了，此時子元素不能撐開標準流的塊級父元素 Ø 原因： • 子元素浮動後脫標 → 不佔位置 Ø 目的： • 需要父元素有高度，從而不影響其他網頁元素的佈局 清除浮動的方法：1 直接設定父元素高度  2 額外標籤法：1. 在父元素內容的最後新增一個塊級元素； 給新增的塊級元素設clear:both