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是外（默认，可以不写）