笔记、作业

1、css的权重：
   当不同选择器的样式发生设置发生冲突时，高权重选择器的样式会覆盖低权重选择器的样式
（1）标签选择器：0001
（2）类选择器：0010
（3）id选择器：0100
（4）伪类选择器：0010
（5）属性选择器：0010
（6）伪元素选择器：0001
（7）包含选择器的权重等于权重之和
（8）内联样式：1000

2、轮廓线：
  <style>
        input{
            outline-color: aqua;
            outline-width: thin;
            outline-style: double;
            outline: none; (可连写)
        }
  <style>

3、浮动：
  <style>
        div{
            float: left;
        }
  </style>
注：盒子发生浮动，会失去原来的位置（脱离文档流）
    多个盒子同时浮动，盒子会从左往右依次排列成一行（BFC）
    a/span浮动后将不遵循原来的规则，就可以设置行高

4、浮动出现的问题：
 父亲高度塌陷：
（1）给父亲设置高度
（2）<style>
        div{
            width: 100px;
            background-color: aliceblue;
            overflow: hidden;
        }       
    </style>
 文字环绕浮动：
   p{
      clear:both;
   }

5、外边距：（magin）
   盒子真正大小：content+border+padding（内边距）
   外边距不会影响盒子大小
    <style>
        div{
            width: 300px;
            height: 300px;
        }       
        .box1{
            background-color: pink;
        }
        .box2{
            background-color: aqua;
            margin-top: 20px;
            margin-bottom: 20px;
            margin-right: 20px;
            margin-left: 20px;
            margin: 20px; （上下左右外边距都是20像素）
                        margin：0px 20px; (上下外边距都是0，左右外边距都是20)
            margin：0px 20px 80px; (上外边距是0，左右外边距是20，下外边距是80)
            margin：10px 20px 30px 40px; （上外边距是10，右外边距是20，下外边距是30，左外边距是40）
        }
        .box3{
            background-color: brown;
        }
    </style>

6、内边距：（padding）
   <style>
        div{
            width: 400px;
            height: 150px;
            background-color: pink;
            padding: 20px;
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left:20px;
            padding-right: 20px;
            padding: 10px 20px;
            padding: 10px 20px 30px;
            padding: 10px 20px 30px 40px;
        }
    </style>

7、外边距margin塌陷：
 (1)border：1px solid pink;
 (2)padding:10px;
 (3)overflow:hidden;

8、auto：（自适应）
   <style>
        div{
            width: 800px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>

9、清除默认内外边距：（body、ul有）
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            background-color: pink;
            list-style: none;
            width: 300px;
            height: 300px;
       }
    </style>

10、补充：
  <style>
      div{
         width:300px;
         height:300px;
         padding:100px;
         box-sizing:border-box; （不改变盒子大小）
      }
  </style>