zoukankan      html  css  js  c++  java
  • 前端面试题目笔记-2

    11.一个div,要求实现当内容过少时,div的最低度为200px,当内容较多时,div的高度被内容撑开。
               答:min-height:200px;


    12.实现一个布局,分左中右三栏。左栏固定宽为200px,右栏固定150px,中栏随屏幕
    宽自动适应。写出html和css。  
                答:<div id="content" class="clearfix">
    <div id="left">
    </div>
    <div id="middle">
    </div>  
    <div id="right">
    </div>
    </div>  
    #content{background:#ff6;}
    #left,#right{200px;background:#fc0;float:left;}
    #middle{float:left; 100%;margin:0 -200px;}
    #middle .inner{margin:0 200px;background:#ccc;}
    #right{float:right;} 
     

    13.a标签的四个伪类是什么?如何排序?为什么?

    爱恨分明原则: l v h a
    注释:为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后 !
    注释:为了产生预期的效果,在 CSS 定义中,a:active 必须位于 a:hover 之后!!
    注释:Pseudo-class(伪类)的名称对大小写不敏感。
    注释:伪类可与 CSS 类配合使用:
               a.red:visited {color: #FF0000;}
               <a class="red" href="css_syntax.asp">CSS Syntax</a>
    如果上面这个例子中的链接已访问过,那么它会显示为红色。  
     

    14.如何实现浮动元素居中

    <div class="box">
    <p>我是浮动的</p>
    <p>我也是居中的</p>
    </div>
    box{
    float:left;
    position:relative;
    left:50%;
    }
    p{
    float:left;
    position:relative;
    right:50%;
    }  
     
    15.已知一个div内有一个img,两者的高度均不知道,但图片的高度一定小于div的高
    度。用css实现图片在div内的垂直居中。
     
    1. <html>
    2. <head>
    3. <style>
    4. .box {
    5. /*非IE的主流浏览器识别的垂直居中的方法*/
    6. display: table-cell;
    7. vertical-align:middle;
    8. /*设置水平居中*/
    9. text-align:center;
    10. /* 针对IE的Hack */
    11. *display: block;
    12. *font-size:175px;/*约为高度的0.873,200*0.873 约为175*/
    13. *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
    14. width:200px;
    15. height:200px;
    16. border:1px solid #eee;
    17. }
    18. .box img {
    19. /*设置图片垂直居中*/
    20. vertical-align:middle;
    21. }
    22. </style>
    23. </head>
    24. <body>
    25. <divclass="box">
    26. <imgsrc="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" _fcksavedurl="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg"/>
    27. </div>
    28. </body>
    29. </html>
    效果:
     
    16.HTML静态页面出现中文乱码如何解决?
               答:<meta charset="UTF-8" />
     
     
    17.下列标签既是行内属性标签又可以设宽高的标签是? (D)
               A. div B. span C. input D. img E. h1  
     
    18.用一两句话说一下你对“盒模型”这个概念的理解,和它都涉及到哪些css属性。  
                答:网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。

                     这些属性我们可以用日常生活中的常见事物——盒字作一个比喻来理解,所以叫它盒子模式。
                     CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

     
    19.外边距、内边距、边框有几种书写形式,列举说明。  
          (1)外边距:margin:10px;   margin: 10px 11px;   margin:10px 12px 13px;margin:10px 11px 12px 13px; margin-top,margin-bottom,margin-left,margin-right。
          (2)内边距: padding:10px;   padding: 10px 11px;   padding:10px 12px 13px;padding:10px 11px 12px 13px; padding-top,padding-bottom,padding-left,padding-right。
          (3)边框:border,border-right,border-top,border-left,border-bottom。

     

    20.有上下两个div,上一个div 设置margin-bottom:10px;下一个div设置margin-top:5px;那么两个div最后的间距是多少?
    答:10px  
  • 相关阅读:
    vba中数据类型
    Excel统计函数COUNTIF()的常规用法介绍
    分类求和
    在每个sheet的相同位置写入相同的值
    Timer函数
    数组总结
    如何制作本地yum源
    HDFS的优缺点
    HDFS安全模式
    HDFS的HA(高可用)
  • 原文地址:https://www.cnblogs.com/ChenChunChang/p/6679671.html
Copyright © 2011-2022 走看看