CSS进阶

一、Chrome调试工具（遇到样式出不来，要学会通过调试工具找错）

二、PxCook的基本使用 

三、盒子模型

1. 盒子模型的介绍
   1. 
2. 内容区域的宽度和高度
   1. 作用：利用width和height属性默认设置是盒子内容区域的大小
   2. 属性：width/height
   3. 常见取值：数字+px
3. 边框（border）
   1. 属性名：border
   2. 属性值：单个取值的连写，取值之间以空格隔开：如：border：10px solid red
   3. 快捷键：bd+tab
   4. 实线：solid 虚线：dashed 点线：dotted
4. 边框（border）-单方向设置
   1. 场景：只给盒子的某个方向单独设置边框
   2. 属性名：border-方位名词
   3. 属性值：连写的取值
5. 边框（border）-单个属性
   1. 作用：给设置边框粗细、边框样式、边框颜色效果
   2. 单个属性：

      作用	属性名	属性值
      边框粗细	border-width	数字+px
      边框样式	border-style	实线 solid、虚线 dashed、点线 dotted
      边框颜色	border-color	颜色取值

6. 内边距（padding） 
   1. 
7. CSS3盒模型（自动内减）
   1. 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px内边距，如何完成？
   2. 解决方法：手动内减
      1. 操作：自己计算多于大小，手动在内容中减去
      2. 缺点：项目中计算量太大，很麻烦
   3. 解决方法：自动内减
      1. 操作：给盒子设置属性box-sizing：border-box；即可
      2. 优点：浏览器会自动计算多余大小，自动在内容中减去
8. 外边距（margin）
9. 清除默认内外边距
   1. 场景：浏览器会默认给部分设置默认的margin和padding，但一般在项目开始前需要先清除这些默认的margin和padding，后续自己设置
      1. 比如：body标签默认有margin：8px
      2. 比如：p标签默认有上下的margin
      3. 比如：ul标签默认由上下的margin和padding-left
10. 版心居中：margin：0 auto；
11. 外边距折叠现象-合并现象
    1. 场景：垂直布局的块级元素，上下的margin会合并
    2. 结果：最终两者距离为margin的最大值
    3. 解决方法：避免就好，只给其中一个盒子设置margin即可
12. 外边距折叠现象-塌陷现象
    1. 场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上
    2. 结果：导致父元素往下一起移动
    3. 解决方法：
       1. 给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
       2. 给父元素设置overflow：hidden
       3. 转换成行内快元素
       4. 设置浮动