No.1.5

优先级：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器的样式

优先级公式：!imporant>行内样式>id选择器>类选择器>标签选择器>通配符选择器>继承>浏览器默认样式（选中范围越广，优先级越低）

!imporant不要给继承的加，自己有样式，无法继承父级样式

权重叠加计算（0（行内），0（id），0（类），0（标签））

    /* (行内, id, 类, 标签) */

    /* !important 最高 */

    /* 继承: 最低 */

盒子模型：（1）内容的宽度和高度（利用width和height 属性默认设置是盒子内容区域的大小）【属性：width/height  取值: 数字+px】

　　　　　（2）边框（border-连写形式(复合属性) 　　如：border: 1px solid red）(bd+tab)（只要一个方向的边框border-方位词）

布局顺序：从外往内，从上往下

每个盒子的样式：（1）宽高 （2）辅助的背景颜色 （3）盒子模型的部分：border、padding、margin（4）其他样式：color、font、text-......

　　　　   （3）内边距（padding）设置 边框 与 内容区域 之间的距离（内边距（padding）-单方向设置   padding -方位名词）

　　　　　取值　　　　　　　　示例　　　　　　　　　　含义

　　　　  一个值　　　　　　padding: 10px;　　　　上右下左都设置为10px

　　　　  两个值　　　　padding: 10px 20px;　  　　上下设置为10px，左右设置为20px

　　　　  三个值　　padding: 10px 20px 30px;    　　上设置为10px，左右设置为20px，下设置为30px

　　　　  四个值     padding: 10px 20px 30px 40px;　 上设置为10px，右设置为20px，下设置为30px，左设置为40px

 /* 内减模式 */

/* 变成css3的盒子模型,好处:加了border和padding不需要手动减法 */

box-sizing: border-box;

　　　　 （4）外边距（margin）设置边框以外，盒子与盒子之间的距离（外边距（margin）-单方向设置   margin -方位名词）

　　　　　取值　　　　　　　　示例　　　　　　　　　　含义

　　　　  一个值　　　　　　margin: 10px;　　　　上右下左都设置为10px

　　　　  两个值　　　　margin: 10px 20px;　  　　上下设置为10px，左右设置为20px

　　　　  三个值　　margin: 10px 20px 30px;    　　上设置为10px，左右设置为20px，下设置为30px

　　　　  四个值     margin: 10px 20px 30px 40px;　 上设置为10px，右设置为20px，下设置为30px，左设置为40px

记忆规则：多值写法:永远都是从上开始顺时针转一圈,如果数不够,看对面

清除默认内外边距

    * {

      margin: 0;

      padding: 0;

    }

/* 去掉列表的符号 */

    ul {

      list-style: none;

    }

  <!-- 布局顺序:从外到内先宽高背景色,放内容,调节内容的位置,控制文字细节 -->

外边距折叠现象——（1）合并现象：垂直布局的块级元素，上下margin会合并（最终两者距离为margin最大值）解决办法：避免就好，只给一个盒子设置margin即可

　　　　　　　　　（2）塌陷现象：互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素一起向下移动

 解决方法：

1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）

2. 给父元素设置overflow：hidden

3. 转换成行内块元素

4. 设置浮动

  <!-- 行内元素 内外边距：margin padding -->

  <!-- 如果想要通过margin和padding改变行内标签的垂直位置，无法生效 -->

  <!-- 行内标签的margin-top和bottom不生效 -->

  <!-- 行内标签的padding-top和bottom不生效 -->

如果需要给垂直方向加边距 可以使用line-height