HTML5教程

HTMl面试题

本文主要是介绍HTMl面试题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

link和@improt的区别

  1. link输入html标签;@improt在css中使用表示导入外部样式表
  2. 页面被加载的时候,link会同时被加载,而@import引用的css会等到页面被加载完再加载
  3. imoprt只在IE5以上才能识别,而link是HTML标签,无兼容问题
  4. link支持使用javascript改变样式,后者不可。

渐进增强与优雅降级

  • 渐进增强:一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高版本浏览器进行效果、交互、追加功能达到更好的体验
  • 渐进增强:一开始就构建站点的完整功能,然后针对浏览器测试和修复
  • 渐进增强是相对于向上兼容;优雅降级是相对于向下兼容

什么是BFC?开启方式

BFC 即 Block Formatting Contexts (块级格式化上下文),BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。

开启方式

  1. overflow的值不是visible
  2. float的值不是none
  3. position的值不是static或者relative(abslute或者fixed)
  4. display的值是inline-block、table-cell、fiex、table-caption或者inline-flex

盒子模型

src和href的区别 

href表示超文本引用,用来建立当前元素和文档之间的链接。常用的有:link、a

src是引入,src指向的内容会嵌入到文档中当前标签所在的位置。常用的有:img、script、iframe

css精灵原理、优缺点

原理:CSS Sprites就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-imgage”,“background-repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确地定位处背景图片的位置。

优点:

  • 减少网页的http请求,提高页面性能
  • 减少图片字节
  • 解决图片命名的困扰
  • 更换方便,一张修改,整个页面可改变

缺点: 

  • 图片合并需留足够空间,防止出现不必要背景,宽屏容易出现背景断裂
  • 开发麻烦,需测量每个背景单元精确位置
  • 维护麻烦,页面少许改动,其他图片和CSS也要改动

 浮动的原理,以及浮动带来的影响及清楚浮动方法

浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

浮动元素会造成父元素高度坍塌。

清楚浮动的方法

  • 在浮动的元素后面添加一个空div:
    <div class="clear"></div>,给该div添加样式clear{
      clear:both;
    }
  • 给父元素添加伪元素after
    .clearfix::after{
      display:block;
      content:"";
       clear:both;
    }
  • clear:left清楚左浮动
    clear:right清除右浮动
    clear:both清除左右浮动

这篇关于HTMl面试题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!