CSS這件小事兒

CSS零碎知識點整理2

Part 2

1. 圖片插入更改大小是用width和height，修改位置用margin，
   背景圖改大小，則用background-size，位置用background-position

• 一般情況，背景圖片適合做一些小圖標使用，background-image

• 產品展示用的是插入圖片（爲了做動畫展示）

2. 清除元素默認內外邊距用*{margin：0；padding:0}
   行內元素只有左右內外邊距，上下無效果或者效果不好
   外邊距合併，垂直的塊級盒子以最大外邊距爲主，如：50+100->100

3. 對於兩個嵌套關係的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距會與子元素的上外邊距發生合併，合併後的外邊距爲兩者中大的，即使父元素的上外邊距爲0，也會發生合併。

   解決方案 1）爲父元素定義1px的上邊框或上內邊距2）爲父元素添加overflow：hidden

4. 有序列表ol>li*3然後擊Tab鍵創立;無序列表ul>li*3;去除圓點用list-style：none

5. 設置樣式時有優先使用width，其次padding，再次margin。當分不清內外邊距時，採用寬度剩餘法或者高度剩餘法（即申請額外的width和height）

6. W3C推薦使用的盒模型 box-sizing：content-box（默認值）；此時盒子大小爲width+padding+border。另外CSS3中新增一個模式：box-sizing：border-box，此時盒子大小就是width，即padding和border是包含在width裏的，不會撐開盒子，不需要再進行計算了

7. 盒子陰影 box-shadow：水平位置（必須） 垂直位置（必須） 模糊距離 陰影尺寸（影子大小） 陰影顏色 內外陰影inset是內，outset是外（默認，可以不寫）