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面试题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！