题目点评

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

初始化样式的原因

因为浏览器的兼容的问题,不同浏览器有些标签的默认值是不同的,如果没有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. php prepare

    详见 https://stackoverflow.com/questions/134099/are-pdo-prepared-statements-sufficient-to-prevent-sql- ...

  2. 自适应大邻域搜索代码系列之(1) - 使用ALNS代码框架求解TSP问题

    前言 上次出了邻域搜索的各种概念科普,尤其是LNS和ALNS的具体过程更是描述得一清二楚.不知道你萌都懂了吗?小编相信大家早就get到啦.不过有个别不愿意透露姓名的热心网友表示上次没有代码,遂不过瘾啊 ...

  3. 基于python复制蓝鲸作业平台

    前言 去年看武sir代码发布的视频无意中听到了蓝鲸平台但是一直没深究,前一段时间公司要搞一个代码发布平台,但是需求变化很多一直找不到一个很好的参考 模板,直到试用了一下蓝鲸作业平台发现“一切皆作业”的 ...

  4. STM32-增量式旋转编码器测量

    Development kit:MDK5.14 IDE:UV4 MCU:STM32F103C8T6 一.增量式旋转编码器 1.简介 编码器(encoder)是将信号(如比特流)或数据进行编制.转换为可 ...

  5. Java Web 热部署

    热部署有多种方案,下面的方案是其中的一种. 暂时还没找到一种令人满意的方案. 1,配置WEB Server 去这里 (https://tomcat.apache.org/download-90.cgi ...

  6. Keras2.2 predict和fit_generator的区别

    1.使用predict时,需设置batch_size 查看keras文档中,predict函数原型:predict(self, x, batch_size=32, verbose=0) 说明:只使用b ...

  7. jackson构建复杂Map的序列化

    1.序列化复杂的Map时,可能需要下面的方式 import com.fasterxml.jackson.databind.JavaType; import com.fasterxml.jackson. ...

  8. Mac 10.12安装WebStorm

    下载: (链接: https://pan.baidu.com/s/1c2o8wUG 密码: 2waz)

  9. IE8下不识别indexOf的问题

    1.为Array原型添加indexOf方法(如果学过面向对象,相当于给Array类添加实例方法),方法体如下: //添加数组IndexOf方法 if (!Array.prototype.indexOf ...

  10. 3D效果

    3D transform:rotate3d(x,y,z,a) (0.6,1,0.5,45deg) transform-origin 允许改变转换元素的位置,(中心点) transform-style ...