1.盒子模型

1.1盒子模型的传参

margin:100px； 四个方向全部改变
margin:100px 200px;  就是上下100px  左右200px
margin:100px 200px 300px;  上100px 左右200 下300
margin:100px 200px 300px 400px;  顺时针

1.2 PADDING

传一个参数 四个方向都改变
padding: 20px 30px; 上下20px 左右20px
padding: 20px 30px 40px; 上20 左右30 下40
padding: 20px 30px 40px 50px;顺时针

2.HTML标签的分类

2.1块标签

h1,p,div,ul,li,dl,dt,dd都是块标签
特点：1、独占一行 2、能设置width，height

<h1>h1</h1>
    <p>p</p>
    <ul>
        <li>1</li>  
        <li>2</li>
    </ul>
    <dl>
        <dt>dt</dt>
        <dd>dd</dd>
    </dl>
    <div>div</div>

2.2内联标签

a,span,em,strong
//特点
1.并排显示
2.不能设置width,height
3.不能设置margin-top,margin-bottom

 <a href="#">a</a>
 <span>span</span> 
 <i>i</i>
 <em>em</em>
 <strong>strong</strong>

2.3内联块

//常用的内联块标签
button,img,input
//特点
1.并排显示
2.可以设置宽高

<button>百度一下</button>
<img src="images/timg1.jpg" alt="">
<input type="text">

2.4块标签，内联元素和内联块

• 内联元素和内联块元素水平居中

{  display:block;
     margin-left:auto;
     margin-right:auto;
 }

• 块标签默认

display：block；

• 内联默认

display:inline;

• 内联块默认

display:inline-block

2.5如何让内联元素和内联块元素水平居中

//给父级加
text-align:center

 body{
     text-align: center;
      }

3.CSS选择器

3.1选择器

• 伪类选择器

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

 p,h1,div{
      color: royalblue;
          }

• 分组选择器

p:hover{color:firebrick;}

3.2后代选择器

.parent p{} 选择parent之后的所有p元素

<div class="parent">
        <p>hello world</p>
        <p>hello world</p>
     <div>
        <p>hello world</p>
     </div>
    </div>
  <div>
      <p>hello world</p>
  </div>

3.2兄弟选择器

div+p{ color:red;} -->选中div之后的第一个p元素
div~p{ color:bule;} -->选中div之后的所有p元素

 div~p{
        color: bisque;
       }
 div+p{
        color: bisque;
       }

3.3伪元素

伪元素-->用css自定义生产的元素
div:before{ content: " " }

div:before{
        width:100px;
        height: 100px;
        background: red;
        content:"前面";
        display:block;
           }

3.4属性选择器

语法
element[attr=value]{}

 [class="one"]{
                 color:red;
               }

3.5选择器的优先级

元素选择器<class选择器<ID选择器<!important

p{
        color: antiquewhite !important;
  }

3.6选择器的权重

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

 .child{
        color: aqua;
    }
 .parent>.child{
        color:bisque; 
    }