目前自己的問題：
1所有東西都想用div，比如頭部幾個導航，不是用幾個div而是用ui,li 。搜尋框不是div套兩個div，而是div套input，buttom。且h，p，ul，ol等這種塊級元素，都可以直接設定height,width當盒子用。全用div他的語義就不好了。【靠經驗】
2看見盒子老想去設定寬高，很多時候子盒子都不用設定寬，因為設定父盒子寬就行了。高度也可以考慮直接用padding撐大，正好還居中。
3padding不夠熟悉。【padding會不會把盒子擠大，主要看父盒子有沒有位置給他撐大】
什麼時候會外邊距塌陷？
怎麼清除浮動？
比較好的方法：透過偽元素在父盒子最後加一個元素，宣告displat: block變成盒子，再給盒子加clear: both，再把盒子隱藏【偽元素宣告displat: block變成盒子時，我直接叫他偽元素盒子】
原來的做法是最後面加一個多餘的空盒子，如果頁面上有很多需要清楚浮動的地方就需要加很多個盒子，偽元素就很好解決這個問題
寫CSS步驟？
1初始化，所有標籤去掉預設的預設邊距，li 去掉小黑點等等
background與background-image區別？
就像magin與magin-top的區別，magin包括了magin-top。background同理。background-image只能設定圖片，background可以設定背景顏色，圖片等等。background: url(../山.jpg) 40% / 10em gray round fixed border-box;;
1這四個盒子都是標準流，所以從上到下排列
top（和瀏覽器一樣寬不需要指定寬度）
a{padding:0 20px} 指的是給a內的文字padding，也就是會把a撐大【如果沒有指定width與height就不會撐開盒子】
1給 .box設定高寬，圖片寬度設為100%
2 .review設定高度，這樣最下面的文字不會因為中間的字多而被擠下去，因為下方還有足夠距離，所以上下距離不能用padding，不然盒子會撐大
3 .review設定padding: 0 30px,因為.review寬度沒設定就是100%，沒位置給他撐大所以不會撐大。【別人這麼說也對：因為.review沒有設定寬度，盒子不會撐大】
總結：h，p，ul，ol等都是塊級元素，都可以直接設定height,width當盒子用
box父盒子設定完寬度以後，子盒子肯定沒必要設定寬度了，這是padding就能很好的控制文字左右。
下面程式碼沒寫清楚， .last是加在最後一個li上的類
第一步確定版心+網頁背景顏色+清楚邊距：以後哪個盒子需要這個寬度以及居中，直接在盒子的class中加個類名就行
第一眼：寬度百分百的就不需要寫寬度。在中間的就給版心的樣式
導航欄
給最外面的盒子加 w 這個類
nva中的a 連結最經典寫法: 變塊級；然後才可以加高度，行高上下使文字居中；因為字數不確定不能加寬，所以加左右padding正好又可以左右居中
.nav ul li a {
display: block;
height: 42px;
padding: 0 10px;
line-height: 42px;
}
搜尋框並不是div裡面套兩個div，這樣寫語義不好，直接div套input和button，語義更好。背景圖片用background: url(...);
1最外面的div不需要給寬度，預設100%
1看圖他這裡的a 也不是整個li的範圍
2 li 沒設定寬度，所以給li設定padding就沒變大（經常這樣，自己這個塊級元素沒設定寬度，可是上一級或者上上級設定了寬度，就預設一樣大，這時給自己設定padding就可以把裡面內容擠到中間，但是自己大小沒變！！非常好用）
.bd ul li {
padding: 14px 0;
border-bottom: 1px solid #ccc;
}對於下圖的li來說父盒子有足夠的高度，當他加上下padding時可以給 li 撐開，正好也起到了上下居中效果。 a 連結新增 display: block;變塊級元素再去寫樣式變成按鈕
1 不是三個div!!! 2中間li文字長度一般不一樣，所以不設定寬度，用padding撐開 3都是文字都是居中，直接給最外面的盒子加height，line-height讓他們相等，繼承過去
可以把ul改大，雖然最外層用來 .w 的樣式但是可以單獨重寫width。浮動後也能裝下就不用單獨找第5，第10個把他的右邊距刪除
具體每一個li：圖片修改為100%，表示跟父親一樣寬。改一下標題樣式。改一下margin: 上 右 下 左；
dl是塊級元素，給他們全浮動
1直接把圖片大小設定跟盒子大小一樣。
2行內元素新增absolute 或者 fixed 可以直接設定寬高（直接記住案例：輪播圖按鈕，回到頂部按鈕）
補充：absolute 或者 fixed不能用margin: 0 auto 居中。加了這兩個屬性都是用固定程式碼居中，先 left: 50%；margin: 盒子的負一半大小
3 想讓誰浮誰就加float: left。margin:3px上下左右全都間距3
1中間的播放按鈕圖片 和 背景顏色都是透過background顯示
2當滑鼠經過 class1讓 class2顯示出來， .class1:hover .class2{display: block} 記住就好
第二種做法：
用偽元素選擇器，結構性更好。
給裡面圖片浮動，下面的盒子會上去，圖片會把p盒子壓住，但是不會壓住 p中的文字。
給 a 設定padding大小，再把 a 的寬高減去padding大小才不會改變a的形狀，因為a直接在body標籤裡，body有足夠的空間，盒子設定padding會被撐大
善於用text-align:center。只要加了text-align:center裡面的行內元素和行內塊元素都會水平居中
SEO三大標籤
<title>。。</title>
<meta name="description" content="。。。!" />
<meta name="keywords" content="相機,數碼,配件,手錶,儲存卡,京東" />
結構大於一切：分三成，第一層就是整個100%頂部，第二部分版心，第三部分版心中的左右盒子
第一眼兩個盒子裡面裝兩個ul，li 都是浮動且居中，所以寫出共同樣式
1因為它不像上面一樣需要一個寬度100%的背景顏色，只需要一個盒子在中間，所以W直接給最外面的盒子
2三個部分，又不是貼邊顯示，直接用 子絕父相做，量出上 左或 上 右的距離，設定top與left
把圖片變成 a 連結： 一個盒子裡面裝a，設定a的大小=盒子大小，（兩個盒子一樣大，給誰設定背景圖片都一樣）
input 與 button都是行內塊元素，放一行會有縫隙，如果再調大，搜尋框會被擠下去，要設定浮動去除縫隙
最右邊購物車左右兩個字型圖片肯定用偽元素來做。（補：偽元素是行內元素，行內元素是可以設定magin 與 padding的） 上方的訊息提示原點用點位做，內容長度不確定不設定寬，用padding給他撐大就有自適應寬度了。
跟第一部分html結構一樣，需要一個寬度100%的盒子設定底邊框，所以也是外盒子套一個類為W的盒子
（）
dropdown做的是下拉選單（他這裡起名dt,dd，只是為了語義性更好，其他名也一樣）
總結1：
這三種距離旁邊都有一點距離的都是用padding。父盒子設定了寬度，子盒子沒有設定寬度，直接設定padding