1、盒子模型的传参

margin按照top 、right 、bottom、 left的顺序改变。

div{
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 100px 200px 300px 400px;
    }

01.png

2、关于padding

2.1、margin按照top,right,bottom,left顺序改变

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: red;
        padding: 20px 30px 40px 50px;/*传一个参数，四个方向都改变*/
    }
</style>

2.2、元素内容的起始位置，是基于它自身的width.height的起始位置

<style>
    *{margin: 0;padding: 0;}
    div{
      width: 300px;
      height: 300px;
      background-color: red;
      padding: 20px;
    }
</style>
<body>
    <div>
        hello world
    </div>

3、标签的分类及其特点

3.1、块标签

<h1>~<h6>,<p>,<div>,<ul>,<li>,<dl>,<dt>,<dd>
        特点：1、独占一行  
             2、能设置width、height

3.2、内联标签

<a><span><i><em><shrong>
特点：      1、并排显示
            2、不能设置width、height
            3、不能设置margin-top、margin-bottom

3.3、内联块标签

<input>、<img>、<button>
        特点：1、能设置width，height
             2、并排显示

3.4、内联元素和内联块元素水平居中

 {
        display:block;     
        margin-left: auto;
        margin-right: auto;
}/*块标签默认 display:block;
        内联标签 display:inline*/

4、选择器

4.1、组合选择器

<style>
    p,h1,div{
        color: red;
    }
</style>
<body>
    
    <h1>hello world</h1>
    <p>p</p>
    <div>div</div>

4.2、后代选择器

<style>
    /*.parent>p{   <!--亲儿子
        color: red;
    }*/
    /*.parent p{}选择parent之后的所有p元素*/
.parent p{
     color: red;
}
</style>
<body>
    <div class="parent">
        <p>hello world</p>
        <p>hello world</p>
        <div>
            <p>hello world</p>
        </div>
        <p>hello world</p>
    </div>

4.3、兄弟选择器

<style>
    /*兄弟选择器*/
    /*div+p{}-->选中div之后的第一个P元素*/
    /*div~p{}-->选中div之后的所有P元素*/
    div+p{
        color: red;
    }
    /*div~p{
        color: yellow;
    }*/
    /*伪类选择器
    input：focus{}
    */
    input:focus{
        background: red;
    }
</style>
<body>
    <div>div</div>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
    <input type="text">

4.4、伪元素

<style>
    /*伪元素-->用CSS自定义的元素
    div:before{
        content:
    }
    div:after{
        content:
    }*/
    div::before{
        width: 50px;
        height: 50px;
        background: blue;
        content: "前面";
        display: block;
    }
    div:after{
        width: 50px;
        height: 50px;
        background: yellow;
        content: "后面";
        display: block;
    }
</style>
<body>
    <div>content</div>
</body>

02.png

4.5、属性选择器

<style>
    /*属性选择器
    语法
    element[attr=value]{
        
    }*/
    p[class="one"]{
        color: red;
    }
</style>
<body>
    <p class="one">hello world</p>
</body>

4.6、选择器的优先级别

id>class>p
<style>
   /*id>class>p*/
    p{
        color: red !important;
    }
    .one{
        color: yellow;
    }
    #two{
        color:green;
    }

  
    .child{
        color: red;
    }
    .parent>.child{
        color: blueviolet;
    }
</style>
<body>
    <p class="one" id="two">hello world</p>
    <div class="parent">
        <div class="child">child</div>
    </div>
</body>

04.png

选择器嵌套的层次越深，权重高越

<style>

    p{
        color: red !important;
    }
    .one{
        color: yellow;
    }
    #two{
        color:green;
    }

    /*选择器的权重*/
    .child{
        color: red;
    }
    .parent>.child{
        color: blueviolet;
    }
</style>
<body>
    <p class="one" id="two">hello world</p>
    <div class="parent">
        <div class="child">child</div>
    </div>
</body>