美文网首页
19-21日作业

19-21日作业

作者: IT颖儿 | 来源:发表于2017-01-21 22:11 被阅读0次

    1.内联元素如何转化成为块元素

    <span style="display:block">内联变块</span>
    

    2.元素类型有哪些?他们的特征分别是什么?

    内联元素、块元素、内联块元素
    内联元素特征:(1)不支持宽高,宽高由内容撑开
                              (2)一行上可以显示同类的标签
                              (3)不支持上下的margin
                              (4)代码换行被解析
    块元素特征:(1)未设置宽高时,独占一行
                          (2)支持所有的css命令
    

    3.清浮动有哪些方法?你最喜欢哪个?为什么

    (1)加宽高---------扩展性不好
    (2)父级浮动--------margin失效
    (3)inline-block---------margin左右auto失效
    (4)空标签---------在IE下有问题
    (5)br-------不符合要求
    (6)after伪类-------(最喜欢的方法)可符合大部分的需求
    注意:在IE6下还要加div{*zoom:1;}
    

    4.什么是BFC?如何才能得到一个BFC

    BFC----标准浏览器
    a、float的值不为none
    b、overflow的值不为visible
    c、display的值为table-cell,table-caption,inline-block中的其中一个
    d、position的值不为relitive,static
    e、width|height|min-width|min-height(!auto)
    

    5.Positon的值有哪些?

    absolute---绝对定位;relative---相对定位;fixed---相对定位;static---默认值;
    z-index:[数字]---定位层级
    

    6.说一下绝对定位,相对定位和固定定位的区别

    相对定位:a、不影响元素本身的特性
                      b、不使元素脱离文档流
                      c、无定位偏移量,无作用
                      d、提高层级
    绝对定位:a、使元素完全脱离文档流
                      b、使内嵌支持宽高
                      c 、块属性标签内容撑开高度
                     d、如果有定位父级相对于定位父级发生相对偏移,无定位父级相对于 document发生偏移
                     e、相对定位一般配合绝对定位使用
                     f、提高层级
    固定定位:与绝对定位特性基本一致,区别是始终相对整个文档进行定位
                   问题:IE6不支持固定定位
    

    7.怎么改变一个div的层级,写出代码让DIV1在DIV2在下

    <!DOCTYPE html>
    <html>
    <head>
    <meta  charset="utf-8" />
    <title>无标题文档</title>
    <style>
    .div1{width:200px;height:200px;background:yellow;
           position:absolute;z-index:-1;}
    .div2{width:100px;height:100px;background:green;
           position:absolute;}
    </style>
    </head>
    <body>
    <div class="div1"></div>
    <div class="div2"></div>
    </body>
    </html>
    

    8.如何实现层叠的DIV1与DIV2,上面DIV1不透明下面DIV2透明?

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>无标题文档</title>
    <style>
    div{width:200px;height:200px;}
    .box{
         margin:100px auto;
         position:relative;}
         .div1{
            position:absolute;
            background:blue;
            left:-6px;top:-6px;
             z-index:2;
             }
          .div2{
             position:absolute;
             background:black;
             right:-6px;
             bottom:-6px;
             z-index:1; 
               opacity:0; 
              }
    </style>
    </head>
    <body>
    <div class="box">
      <div class="div1"></div>
      <div class="div2"></div>
    </body>
    </html>
    

    9.合并行属性,合并列属性

    <td colspan = "2"></td>
    <td rowspan = "2"></td>
    

    10.让DIV水平垂直居中

    编程1:

    方法一:(定位)

    <!DOCTYPE html>
    <html>
    <head>
    <meta  charset="utf-8" />
    <title>无标题文档</title>
    <style>
    .div1{width:100px;height:100px;background:yellow;
           position:absolute;}
    .div2{width:100px;height:100px;background:green;
           position:absolute;left:100px;}
    .div3{width:100px;height:100px;background:pink;
           position:absolute;left:200px;}
    </style>
    </head>
    <body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    </body>
    </html>
    

    方法2:(inlineblock类型转换)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>无标题文档</title>
    <style>
    span{
        width:100px;height:100px;background:pink;
        display:inline-block;   
        }
    </style>
    </head>
    <body>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    </body>
    </html>
    

    方法三:(浮动)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>无标题文档</title>
    <style>
    div{
        width:100px;
        height:100px;
        background:pink;
        float:left;
        }
    </style>
    </head>
    <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    </body>
    </html>
    

    问题二:(没做出来)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>无标题文档</title>
    <style>
    .box{width:267px;height:1165px;padding:20px #FFF;}
    .title1,.title2{display:inline-block;}
    .title1{width:29px;height:29; border:1px solid #000;border-bottom:none;}
    .title2{width:60px;height:20;font:bold normal 20px/40px "宋体";}
    .item1,item2{display:inline-block;}
    .item1{width:66px;height:13px;font:bold normal 13px/20px "宋体"; }
    .item2{width:58px;height:12;font:bold normal 13px/20px "宋体";}
    .body{background-image:url("img_2.png)" no-repeat;}/*不好使???*/
    
    </style>
    </head>
    
    <body>
    <div class="box">
        <div class="title">
            <div class="title1">TOP</div>
            <div class="title2">排行榜</div>
        </div>
        <div class="item">
            <div class="item1">最新排行</div>
            <div class="item2">新课上线</div> 
        </div>
        <div class="body">
            <div class="body1"></div>
            <div class="body2"></div>
            <div class="body3"></div>
            <div class="body4"></div>
            <div class="body5"></div>
        </div>
        <div class="footer">
            <div class="fotter1"></div>
            <div class="fotter2"></div>
            <div class="fotter3"></div>
            <div class="fotter4"></div>
            <div class="fotter5"></div>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:19-21日作业

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