题目点评

这个题目乍一看感觉怪怪的,什么叫初始化样式了?如果换一句话你可能就理解了,就是通用样式。这道题目主要涉及的是理论方面的知识,不用写代码,只要描述清楚就可以了

初始化样式的原因

因为浏览器的兼容的问题,不同浏览器有些标签的默认值是不同的,如果没有CSS初始化往往会出现浏览器之间的页面显示差异。

  1. <h1>标题1标签在不同浏览器的盒子模型</h1>
  火狐浏览器 谷歌浏览器
IE7浏览器 IE9浏览器


从上面可以看出,同一个标签,不同的浏览器解析的数据是不一样的,这样就会导致显示的差异了。


弊端

初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

淘宝初始化代码

  1. body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
  2. body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
  3. h1, h2, h3, h4, h5, h6{ font-size:100%; }
  4. address, cite, dfn, em, var { font-style:normal; }
  5. code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
  6. small{ font-size:12px; }
  7. ul, ol { list-style:none; }
  8. a { text-decoration:none; }
  9. a:hover { text-decoration:underline; }
  10. sup { vertical-align:text-top; }
  11. sub{ vertical-align:text-bottom; }
  12. legend { color:#000; }
  13. fieldset, img { border:0; }
  14. button, input, select, textarea { font-size:100%; }
--------------------------------------------------------------------------------------------------------------------

Web前端面试指导(十六):为什么要初始化CSS样式?的更多相关文章

  1. Web前端面试指导(十八):用纯CSS创建一个三角形的原理是什么?

    题目点评 三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单 答题要点 1.采用的是均分原理 盒子都是一个 ...

  2. Web前端面试指导(十):元素定位有哪些?

    本题点评 在web前端中,元素定位是必须掌握的,是网页制作的必备技能,也是衡量是否为一个合格的web前端开发的标准之一,在网页设计中,很多地方都需要使用定位,例如菜单弹出,提示信息层等都需要定位.所以 ...

  3. Web前端面试指导(十九):CSS样式-如何清除元素浮动?

    题目点评 本题属于比较常问的题目,也是在网页设计中经常遇到的问题,面试官希望通过这样的面试题来了解你对网页设计的基本功底,如果这样的题目答不出来,必会让面试官大失所望,面试成功的概率是非常小的. 答题 ...

  4. Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?

    题目点评 这道题目的提问比较多,连续问了三个问题,正常元素.绝对定位元素.互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要 ...

  5. Web前端面试指导(十五):CSS样式-display有哪些作用?

    题目点评 其实就是要你说清楚该属性有哪些值,每个值都有什么作用,这个题目可以答得很简单,但要答全也并非是一件容易的事情. 元素默认的display值的情况如下(这个一般很少人注意这一点) block( ...

  6. Web前端面试指导(十二):::before 和:before有什么区别?

    题目点评 这个问题看来很简单,但如果之前没有琢磨这个问题,给人感觉也是门头一垂,听到这个题目就懵逼了,因为原来从来没有注意过这个问题,即便有注意这个问题也不能很好的回答清楚.回答的技巧就是从相同点和不 ...

  7. Web前端面试指导(二十):JavaScript中如何翻转一个字符串?

    题目点评 字符串作在程序中是非常常见的,因为程序中绝大部分的数据都可以当作字符串来处理.需要对字符的处理方法比较熟悉,在回答的时候尽量能够说出多种解决方法更好! 字符串翻转的方法 1)使用字符串函数 ...

  8. Web前端面试指导(九):盒子模型你是怎么理解的?

    问题分析 这道题问得比较宽泛,一定要找准切入点,如果切入点找不准,很容易乱答,甚至答偏,所以找准切入点是非常的重要的. 解答思路 1)盒子模型有两种,W3C和IE盒子模型 (1)W3C定义的盒子模型包 ...

  9. Web前端面试指导(八):iframe有那些缺点

    本题的特点 这道题目的特点就是不按照正常的套路来提问,一般都是问优点,这里比较反常问iframe的缺点,很多同学肯定很不习惯这种问答,因为平时只关注有点,这么一问就懵逼了! 本题解答的思路及要点 ① ...

随机推荐

  1. Spring表单验证

    表单验证 给表单添加验证的步骤如下 1.在 pom.xml 里添加 hibernate-validator 依赖http://hibernate.org/validator/documentation ...

  2. FlowPortal-BPM——创建新模块

    一.设置webconfig (1)数据源设置 添加所有所用到数据库 (2)修改企业信息 二.Main.ashx——添加新的功能选项卡 new { id = "EXECUTE", t ...

  3. 06-图2 Saving James Bond - Easy Version (25 分)

    This time let us consider the situation in the movie "Live and Let Die" in which James Bon ...

  4. BZOJ AC 300祭!

  5. 算法图解学习笔记01:二分查找&大O表示法

    二分查找 二分查找又称折半查找,其输入的必须是有序的元素列表.二分查找的基本思想是将n个元素分成大致相等的两部分,取a[n/2]与x做比较,如果x=a[n/2],则找到x,算法中止:如果x<a[ ...

  6. 3.1)DFM-塑胶件设计总章

    本章目的:各种塑胶工艺了解,DFM-塑胶件的设计准则是依据哪种工艺. 1.塑胶概念 塑胶的定义(美国塑料工业协会): 塑胶主要由碳.氧.氢和氮及其他有机或无机元素所构成,成品为固体,在制造过程中是熔融 ...

  7. 【GIS新探索】GeoHash原理和编解码实现

    1.什么是GeoHash geohash基本原理是将地球理解为一个二维平面,将平面递归分解成更小的子块,每个子块在一定经纬度范围内拥有相同的编码.不好理解,没关系,我来找个图. 就像上面这张图,一个坐 ...

  8. (转)Mysql主从复制搭建及详解

    http://www.cnblogs.com/kevingrace/p/6256603.html---------Mysql主从同步(1)-主从/主主环境部署梳理 原文:http://blog.csd ...

  9. ZOJ 2971 Give Me the Number

    Give Me the Number Numbers in English are written down in the following way (only numbers less than  ...

  10. 作为一个编程新手,我再也不怕Flink迷了我的眼!

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由kyledong发表于云+社区专栏 使用 Flink 编写处理逻辑时,新手总是容易被林林总总的概念所混淆: 为什么 Flink 有那么 ...