day02

作者: 区块链B哥 | 来源:发表于2017-11-07 15:27 被阅读0次

    A.今天学了什么

    1.html的分类

    块标签
    
    特点:1.独占一行, 2.可以改变宽高 
    
    属性:display:block(块属性)
    
    常见的块标签有: div,p,h1~h6,ul,li,dl,dt,dd.
    
    内联标签
    
    特点:并排显示,不能改变宽高,不能设置margin-top和margin-bottom
    
    属性:display:inline
    
    常见的内联标签有:a,span,em,strong
    
    内联块标签
    
    特点:并排显示,能改变宽高
    
    属性:display:inline-block
    
    常用的块联标签:img,input,button
    

    2.选择器

    分组选择器
    p,h4{ color:blue;}
    
    后代选择器
    1.子类选择器:div>p{color:blue;}
    2.后代选择器 div p{ color:blue;}
    
    兄弟选择器
    1.选择邻近的第一个兄弟 div+p{color:blue;}
    2.选择所有的兄弟(可跳过部分非兄弟) div~p{color:blue;}
    
    伪类选择器
    1.div:hover{color:blue} 鼠标触碰div变蓝色
    2.div:focus{color:blue} 鼠标点击div变蓝色
    

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

    方法一:
    display:block;
    margin-left:auto;
    margin-right:right;
    
    方法二:
    在其父类加入代码
    text-align:center;
    

    4.伪元素

    p:before{
    content:""; 可以在p元素之前插入新内容
    }
    
    p:after{
    content:"";  可以在p元素之后插入新内容
    }
    

    5.属性选择

    div[class="box1"]{color:blue;} div的class选择器为"box1"的 变蓝色
    

    B.今天掌握了什么

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

    方法一:
    display:block;
    margin-left:auto;
    margin-right:right;
    
    方法二:
    在其父类加入代码
    text-align:center;
    

    2.伪元素

    p:before{
    content:""; 可以在p元素之前插入新内容
    }
    
    p:after{
    content:"";  可以在p元素之后插入新内容
    }
    

    3.属性选择

    div[class="box1"]{color:blue;} div的class选择器为"box1"的 变蓝色
    

    4.html的分类

    块标签
    
    特点:1.独占一行, 2.可以改变宽高 
    
    属性:display:block(块属性)
    
    常见的块标签有: div,p,h1~h6,ul,li,dl,dt,dd.
    
    内联标签
    
    特点:并排显示,不能改变宽高,不能设置margin-top和margin-bottom
    
    属性:display:inline
    
    常见的内联标签有:a,span,em,strong
    
    内联块标签
    
    特点:并排显示,能改变宽高
    
    属性:display:inline-block
    
    常用的块联标签:img,input,button
    

    5.选择器

    分组选择器
    p,h4{ color:blue;}
    
    后代选择器
    1.子类选择器:div>p{color:blue;}
    2.后代选择器 div p{ color:blue;}
    
    兄弟选择器
    1.选择邻近的第一个兄弟 div+p{color:blue;}
    2.选择所有的兄弟(可跳过部分非兄弟) div~p{color:blue;}
    
    伪类选择器
    1.div:hover{color:blue} 鼠标触碰div变蓝色
    2.div:focus{color:blue} 鼠标点击div变蓝色
    

    C.今天没有掌握什么

    全部掌握了,明天加油
    

    相关文章

      网友评论

          本文标题:day02

          本文链接:https://www.haomeiwen.com/subject/lgljmxtx.html