因为刚开始学，用了bootstrap的框架，有些东西可以用现成的，不用自己布局，后来发现如果要调比较精细的布局还是得自己写css，然后就开始一点点去掉bootstrap的布局，不然在原来bootstrap的css上改，没有完全理解bootstrap这个效果是怎么弄出来的话想去掉某个效果也很难，某些样式会和自己调的样式冲突，最终决定直接把整个bootstrap框架卸掉，全部用原来的

    但是一卸调之后布局全变了，控件各种错位，完全想不明白为什么，width调的50%却占了70+%，于是去看了一下,最低下的兼容性注意事项说到

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。

border-box;，个人也是觉得这个调控件位置调起来比较方便，所以采用的博主的做法，原来用bootstrap的排版撤掉bootstrap后还是没什么大问题的

前端面试中除了口试之外，很多时候还会要求面试者进行笔试，这是企业为了考核求职者的技术水平是否真的过关。以下是为大家整理了最新前端开发面试题及参考答案，希望能对面试者有所帮助

2、常见的块标签和内联标签以及内联块标签的区别

3、清除浮动有哪些方式？

          em 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。（都是内联标签，em更具有强调的意义）

5、谈谈你对语义化的理解

        简单讲就是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析，有利于SEO，便于团队开发和维护。

6、如何合并表格单元格

8、 常见表单元素有哪些

9、引入css的方式有几种，分别是什么

      什么时候使用：只有这么一个标签需要这个样式的时候

10、html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

　　(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;

11、简述一下你对HTML语义化的理解？

　　html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

　　即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

　　搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;

12、什么叫优雅降级和渐进增强？

　　优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。

        渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

14、单行文本水平垂直如何实现居中

15、选择器优先级如何计算

        我们可以把选择器中规则对应多加法，比较权值，如果权值相同那就后面的覆盖前面的。

16、Css中哪些属性是可以继承的

17、盒模型是由什么组成的

18、CSS3有哪些新特性？

19、谈谈你对重构的理解

        网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，

在扩展的同时保持一致的UI。

20、对web标准以及w3c的理解和认识

        标签闭合，标签小写，不乱嵌套，提高搜索机器人搜索几率。使用外链css和js脚本，结构行为表现分离，内容能被更多广泛的设备所访问,更少的代码和组件，容易维护，改版方便，不需要变动页面内容。

22、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

23、媒体查询怎么使用？

25、如何修改chrome记住密码后自动填充表单的黄色背景

26、请写出html5新增的标签，并说明其语义和应用场景

28、如何实现浏览器内多个标签页之间的通信?

30、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

31、CSS3新增伪类有那些?

33、css3中制作动画有几个属性？

34、常见的兼容性问题

35、伪元素选择器有哪些？

36、Margin常见问题及解决办法

37、浮动产生的问题，清除浮动的方案

38、如何让盒子水平垂直居中

41、BFC能解决什么问题

42、图片间隙问题如何解决

    两个图片之间和图片下方多出的空白间隙可以使用以下方式解决。

43、说说常见浏览器的兼容问题

44、等高布局实现原理及代码

由于左中右三栏浮动，所以儿子的高度为0，需要清除浮动，可以使用float：left，然后给爸爸也设置float：left清除浮动，给爷爷设置overflow：hidden清除浮动

45、圣杯布局实现原理及代码

46、双飞翼布局实现原理及代码

47. 给大盒子设置清除浮动和最小宽度

48、网页中常见图片格式及特点

        优点：无损压缩，图像容量小，支持透明背景和半透明背景，透明图像的边缘是光滑的，这是和gif相比它的一大优点缺点：不能制作成动画。

        1. 使用大幅面图片时，如果要使用不透明背景时，首选jpg图片，因为它的容量相对最小；如果要使用透明或半透明背景的图片时，就使用png图片。

        2.使用小幅面图片或图标图片时，如果图片含多种颜色，可以使用gif或png图片；如果图片的色彩很单一，而且要求有很好的显示效果放大不失真，可以使用svg图片；如果要求图片是动画的，可以使用gif

49、为什么要初始化css样式？哪些样式需要初始化

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

51、标签应该如何合理嵌套

        块标签可以套其他的标签，但是p标签除外，p标签不能嵌套其他的块标签，内联标签不能嵌套块标签(a标签特殊)，a标签不允许嵌套a标签和其他有交互作用的标签。.块级元素与块级元素并列、内嵌元素与内嵌元素并列

52、项目中你是如何做图片优化的

    （1). 降低图片的大小、选择适当的图片宽度尺寸，压缩图片，选择更小kb的图片格式，以达到最优的显示效果

    （3. Icon Font，将图标做成字体文件。优点是图标支持多个尺寸，兼容所有浏览器，减少页面请求等(可去比特虫网站下载. Ico图片

54、HTML5的兼容如何处理

55、Css3新增的选择器

        css预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

59、常见的移动端布局有哪些方式？原理是什么？

        （2）流式布局:重点就是使用百分比来代替传统px，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，。

        （3）响应式做法:根据目标用户的访问设备的主要类型做三种或四种布局。 每种布局有一个区间即可利用媒体查询@media，可以为不同分辨率的设备加载不同的样式。

60、简述rem布局原理

box-sizing 属性用来改变默认的 CSS盒模型 对元素宽高的计算方式。这个属性可以用于模拟那些非正确支持标准盒模型的浏览器的表现。

　　　　默认值，标准盒模型。 width与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。

　　　　注意: 内边距, 边框 & 外边距 都在这个盒子的外部。

　　　　尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。

　　　　这是IE 怪异模式（Quirks mode）使用的 盒模型 。注意：这个时候内边距和边框将会包括在盒子中。

　　　　如果计算后的最内部的内容宽度为负值，都会被计算成0，内容还在，所以不可能通过　border-box来隐藏元素。