day03

01盒子模型的传参

       margin:100px;  四个方向全部改变
       margin:  100px 200px; top-botton--100px;  left-right--200px;
       margin:  100px 200px 300px; top--100px;left-right--200px; bottom--300px;
       margin:  100px 200px 300px 400px;
                        top    right   bottom  left 按顺时针

02padding填充

padding
传一个参数  四个方向都改变
传两个参数  第一参数top,bottom 第二个参数left,right
传三个参数  第一个参数top  第一参数left,right  第三个参数bottom
传四个参数  top,right,bottom,left

03html

元素内容的起始位置，是基于自身width,height的起始位置

01.png

04标签的分类

h1
    
p
    

        
1
        
2
    
    

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

aspaniemstrong
    

内联标签
特点： 1并排显示 2不能设置width,height 3不能设置margin-top,margin-bottom.

    
    btn
内联块 ： input,img,button
特点：1并排显示  2能设置width,height

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

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

06 水平居中

不改变内联和内联块的display属性 实现水平居中
        方案 ：
        parentElement{
            text-align:center;
        }

07选择器

 
body>
    
hello world
    
h1
    
div

08后代选择器

    

        
hello world
        
hello world
        

            
hello world
        
    

    

        
hello world
    

09兄弟选择器

    
div
    
hello world
    
hello world
    
hello world
    
hello world
    
hello world
    

10伪元素

02.png

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

11属性选择器

    
hello world

12选择器的优先级

hello world
important>id>class>p

13选择器的权重

    

        
child