day04

作者: 向钱看丷向厚赚 | 来源:发表于2017-08-02 22:01 被阅读0次

    A.今天掌握了什么

    1.css盒子模型

    1.1box-sizing:border-box

    image.png
    当设置box-sizing:border-box
    设置pandding,和border,它的宽度还是会保持不变
    
    box-sizing:content-box(默认清晰)
    
    当设置pandding和border时宽度会发生改变
    总宽度=width+border+pandding
    
    //html
    <div><div>
    //css
     div{   border:10px;solid;#333;
            padding:10px;
            box-sizing:content-box
            width:100px;
            height:100px;
            background-color:red
    }
    
    1.2实现元素居中
    display:block
    margin-left:auto;margin-right:auto;
           
    
    2.浮动
    float:left/right/center/bottom
    目的:为了让元素并排显示
    
    >#####2.1如何清除浮动
    
    (1)给下面的兄弟元素给clear:both
    //html
    <div class=“one”><div>
    <div class=“two”></div>
    //css
    .one{          width:100px;
                      height:100px;
                      background-color:red;
                      float:left;
            }
    .two{          clear:both;
                      width:200px;
                      hedght:50px;
                      background-color:yellow;
           }
    
    (2)给父级加overflow:hidden
    //html
    <div class=“one”></div>
    <div class=“two”></div>
    //css
    .two{
               width:100px;
               height:100px;
               background:red;
               float:left;
           }
           /*子级float,父级有高度,如何让父级有高度*/
     .one{
                overflow:hidden;
                width:200px;
                background:yellow;
          } 
    
    (3)用伪元素,给父级内容生成
    .row:before{display:table;content"  "}
    .row:after{display:table;content:"  "
    clear:both}
    //html
    <div class=“one”></div>
    <div class=“two”></div>
    //css
    .two{
               width:100px;
               height:100px;
               background:red;
               float:left;
           }
           /*子级float,父级有高度,如何让父级有高度*/
     .one{
                overflow:hidden;
                width:200px;
                background:yellow;
           } 
    .one,two:ofter{content:“”;
                   display:table;
                   cear:both;
           }
    
    3.定位
    postion:absolute/relative
    (1)relative
    相对元素的定位是相对其正常位置
    
    position:relative
    (2)basolute
    绝对定位的元素的位置相对于最近的已定位父元素,如果没有已定位的父元素,那么他的位置相当于<HTML>
    //html
    <div class=“one”>
    <div class=“two”><div>
    </div>
    //css
    *{margin:0px;padding:0px;}
    /*相对定位:就是元素在页面上的位置*/
    .one
           {margin-left:100px;
            width:100px;
            height:100px;
            background-color:red
           }
      .two
           {width:50px;
            height:50px;
            background-color:yellow;
            position:absolute;
            left:0;
           }
    
    都通过left,top,right,bottom移动
    
    z-index:设置元素的堆积顺序  给position:absolute绝对定位的元素
    例子:搜索框
    input当子元素没有设置宽度,如果设置了绝对定位,他不会继承父元素的宽度
    
    4.布局方式的总结
    1、默认布局
    2、浮动布局(左右安置)
    层级布局(定位)
    
    5.实现元素的垂直居中
    父元素设置parent{position:relative}
    
    子元素设置child{position:absolute;
    left:50%;top:50%;
    margin-left:50%*child*width;
    margin-top:50%*child*height;}
    
    6.css样式的几种引入方式
    外部样式
    <link rel=""“stylesheet”type=text/css“href”=/c5.css>
    
    内部样式表(位于<head>标签内部)
    <style>
    
    给同一选择器设置同一样式,离元素近的样式设置方式优先级高
    

    B.我掌握了什么?

    >##### .css盒子模型
    1.1box-sizing:border-box
    
    当设置box-sizing:border-box
    设置pandding,和border,它的宽度还是会保持不变
    
    box-sizing:content-box(默认清晰)
    
    当设置pandding和border时宽度会发生改变
    总宽度=width+border+pandding
    
    //html
    <div><div>
    //css
     div{   border:10px;solid;#333;
            padding:10px;
            box-sizing:content-box
            width:100px;
            height:100px;
            background-color:red
    }
    
    实现元素居中
    display:block
    margin-left:auto;margin-right:auto;
    

    C今天没掌握什么?

    .浮动
    float:left/right/center/bottom
    目的:为了让元素并排显示
    
    //html
    <ul>
            <li>手机</li>
            <li>电脑</li>
            <li>平板</li>
    <ul>
    
    >#####如何清除浮动
    
    (1)给下面的兄弟元素给clear:both
    //html
    <div class=“one”><div>
    <div class=“two”></div>
    //css
    .one{          width:100px;
                      height:100px;
                      background-color:red;
                      float:left;
            }
    .two{          clear:both;
                      width:200px;
                      hedght:50px;
                      background-color:yellow;
           }
    
    给父级加overflow:hidden
    //html
    <div class=“one”></div>
    <div class=“two”></div>
    //css
    .two{
               width:100px;
               height:100px;
               background:red;
               float:left;
           }
           /*子级float,父级有高度,如何让父级有高度*/
     .one{
                overflow:hidden;
                width:200px;
                background:yellow;
          } 
    
    用伪元素,给父级内容生成
    .row:before{display:table;content"  "}
    .row:after{display:table;content:"  "
    clear:both}
    //html
    <div class=“one”></div>
    <div class=“two”></div>
    //css
    .two{
               width:100px;
               height:100px;
               background:red;
               float:left;
           }
           /*子级float,父级有高度,如何让父级有高度*/
     .one{
                overflow:hidden;
                width:200px;
                background:yellow;
           } 
    .one,two:ofter{content:“”;
                   display:table;
                   cear:both;
           }
    
    3.定位
    postion:absolute/relative
    (1)relative
    相对元素的定位是相对其正常位置
    
    position:relative
    basolute
    绝对定位的元素的位置相对于最近的已定位父元素,如果没有已定位的父元素,那么他的位置相当于<HTML>
    //html
    <div class=“one”>
    <div class=“two”><div>
    </div>
    //css
    *{margin:0px;padding:0px;}
    /*相对定位:就是元素在页面上的位置*/
    .one
           {margin-left:100px;
            width:100px;
            height:100px;
            background-color:red
           }
      .two
           {width:50px;
            height:50px;
            background-color:yellow;
            position:absolute;
            left:0;
           }
    
    都通过left,top,right,bottom移动
    
    z-index:设置元素的堆积顺序  给position:absolute绝对定位的元素
    例子:搜索框
    input当子元素没有设置宽度,如果设置了绝对定位,他不会继承父元素的宽度
    
    6.css样式的几种引入方式
    外部样式
    <link rel=""“stylesheet”type=text/css“href”=/c5.css>
    
    内部样式表(位于<head>标签内部)
    <style>
    pstyle=“color:pink,
    font-size:16px”</style>
    
    给同一选择器设置同一样式,离元素近的样式设置方式优先级高
    

    相关文章

      网友评论

          本文标题:day04

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