一、盒子模型

  1. <title>盒子模型的传参</title>
  2.     <style>
  3.         /*margin top上,right右,bottom下,left左*/
  4.         div{
  5.              margin:100px 200px;/*一个参数 四个方向改变*/
  6.                                 /*两个参数  第一个参数top,bottom 第二个参数 right,left*/
  7.                                 /*三个参数 第一个参数top，第二个参数right,left，第三个参数bottom */
  8.              width: 100px;
  9.              height:100px;
  10.              background: red;
  11.              padding: 100px 100px 100px;
  12.          }   
  13.     </style>
  14. </head>

二、html标签的分类

<head>
标签的分类
<style>
    div{
        width: 100px;
        height: 100px;
        background: red;
    }
    a{
        width: 100px;
        height: 100px;
        background: red;
        margin-top: 100px;
        margin-bottom: 100px;
    }
    input{
        width：200px;
    }
</style>
<body>
    /*块标签
    div,p,ul-li,dl-dt-dd,h1~h6
    特点：1.独占一行 2.能够设置width,height
    display:block(转换内联标签、内联块互相转换)
    因为他底层有个属性 叫block*/
    <div>div</div>
    <p>p</p>
    <h1>H1</h1>
    /*
        内联标签 a,span,i,em,strong
        1、并排显示
        2、不能设置width，height
        3、不能设置margin-top,margin-bottom(下边距)
        display:inline*/
    <a href="#">a</a></body>
    <span>span</span>
    <i>i</i>
    <em>em</em>
    <strong>strong</strong>
    <p>hello world</p>
    /*内联块 img,input,button
    1、并排显示 2、能设置width,height
    display:inline-block;*/
    <input type="text">
    <button>确定</button>
</head>

三、水平居中(两种方法)

<style>
     /*margin-left:auto;margin-right:auto仅仅针对块元素有效*/
     a{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 800px;
        background: red ;
     }
</style>
</head>
<body>
    <a href="#">a</a>
<title>不改变display实现水平居中</title>
<sytle>
        body{
            text-align: center;
        }
        /*如何让内联元素或内联块元素水平居中
        1、改变元素自身的display属性，使用margin-left，margin-right方案
        2、给他爹设置test-align:center;*/
</sytle>
</head>
<body>
    <a herf="#">a</a>
    <button>btn</button>
</body>

四、分组选择器

title>分组选择器</title>
<style>
    /*div,p,h1{}分组选择器*/
    div,p,h1{
          color: red;
      }   
</style>
</head>
<body>
    <div>div</div>
    <p>p</p>
    <h1>h1</h1>
</body>
</html>

五、后代选择器

<style>
        /*选中conter 亲儿子 .conter>p{}*/
        .conter>p{
            color:red;
        }
        /*选中conter之后的所有p元素
        .conter p{
            color:red;
        }*/
    </style>
</head>
<body>
    <div class="conter">
        <p>hello world</p>
        <ul>
            <li>hello world</li>
            <li>hello world</li>
            <li>hello world</li>
            <li>hello world</li>
        </ul>
        <p>hello world</p>
    </div>
</body>
</html>

七、兄弟选择器

<style>
    /*选中one之后的第一个p元素
    .ont+p{
        color:red;
        选中one之后的所有的p元素
    }*/
    .one~p{
        color:red;
    }
    /*光标移动变色，变手掌样式*/
    h1:hover{
        color:red;
        cursor: pointer;
    }
</style>
</head>
<body>
    /*网页上可见的内容写在body里
         input，img，br 单标签，特殊-->
    <p class="one">hello world</p>*/
    <p>hello world</p>
    <p>hello world</p>
</body>
</html>

八、选择器的优先级

<style>
        /*写样式的时候不要使用id选择器*/
        /* id>class>p{}
        class样式优先于p样式*/
        p{
            color:red;
        }
        .one{
            color:yellowgreen;
        }
        #test{
            color: blueviolet;
        }
</style>
</head>
<body>
    <p class="one" id="test">hello world</p>
</body>
</html>

九、选择器的权重

<style>
        /*嵌套的越深权重就越高*/
        .one{
            color: red;
        }
        div.wrap .one{
            color: green;
        }
        .container .wrap .one{
            color: yellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wrap">
            <p class="one">hello world</p>

        </div>
    </div>
</body>
</html>

十、命名

<body>
    <!-- 驼峰命名 -->
    <div class="navWrap"></div>
    <!-- 划线-->
    <!-- 中划线-->
    <div class="nav-wrap"></div>
    <!-- 下划线-->
    <div class="nav_wrap"></div>
    <!-- !!!统一使用中划线命名法 html 中-->    
</body>
</html>