、

• 、
• 、

  、

  、

  -

  、

  等

  空元素：即系没有内容的HTML元素，例如：
  、、

  ---

  、、、等

  盒子模型：Css盒模型:内容，border ,margin，padding

  

  问： CSS引入的方式有哪些? link和@import的区别是?

  答：有4种方式可以在HTML中引入CSS：

  一、内联方式：指直接在HTML标签的style属性中添加CSS

  示例:

  评价：不推荐，此种方式只能改变当前标签的样式，如果想要多个

  拥有相同的样式，需要重复为每个

  添加相同的样式，想要修改一种样式，又不得不修改所有的style中的代码。

  二、嵌入方法：在HTML头部中的

  示例:

  .content { background : red;}

  评价：此方法可以一目了然的查看HTML结构和CSS样式，但此方法的CSS只对当前网页有效，如果当多个页面需要引入相同CSS代码时，这样写会导致代码冗余，不利于维护。

  三、链接方式：使用HTML头部的

  标签引入外部的CSS文件。

  示例:

  评价：推荐，这种方式，所以得CSS代码只存在于单独的CSS文件中，具有良好的可维护性。并且所以得CSS代码只存在于CSS文件中，CSS文件会在第一次加载时引入，以后切换页面时只需要加载HTML文件即可。

  四、导入方式：使用CSS规则引入外部CSS文件。

  示例:

  @import  url(style.css);

  link和@import的区别：

  两者都是外部引用CSS方式，但是存在一定的区别

  a、link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

  b、link支持使用Javascript控制DOM去改变样式，而@import不支持。

  c、link是XHTML标签，除了加载CSS，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS

  d、link是XHTML标签，无兼容问题；@import是在CSS 2.1提出的，低版本的浏览器不支持。

  问：前端页面有哪三层构成，分别是什么？作用是什么？

  网页三个层次，即：结构层(Html)、表示层(CSS)、行为层(js)。

  网页的结构层(structural layer)：由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述。但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

  网页的表示层(presentation layer)：由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

  网页的行为层(behavior layer)：负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

  扩展：

  网页的表示层和行为层总是存在的，即使我们未明确地给出任何具体的指令也是如此。此时， Web 浏览器将把它的默认样式和默认事件处理函数施加在网页的结构层上。

  例如，浏览器会在呈现“文本段”元素时留出页边距，有些浏览器会在用户把鼠标指针悬停在 某个元素的上方时弹出一个显示着该元素的 title 属性值的提示框，等等。

  分离

  在所有的产品设计活动中，选择最适用的工具去解决问题是最基本的原则。具体到网页设计工作，这意味着：

  使用 (X)HTML 去搭建文档的结构。

  使用 CSS 去设置文档的呈现效果。

  使用 DOM 脚本去实现文档的行为。

  不过，在这三种技术之间存在着一些潜在的重叠区域，如：DOM 技术可以用来改变网页的结构。在 CSS 身上也可以找到这种技术相互重叠的例子。诸如 :hover 和 :focus 之类的预定义符号(伪 class 属性) 使我们可以根据用户触发事件来改变呈现效果。改变元素的呈现效果当然是表示层的“势力范围”，但对用户触发事件做出反应却是行为层的领地。表示层和行为层 的这种重叠形成了一个灰色地带。

  伪 class 属性是 CSS 正在深入 DOM 领地证据，但 DOM 在这方面也不是毫无作为。我们完全可以利用 DOM 技术把样式信息施加在 HTML 元素身上。

  分离的效果要做到即使去掉表示层和行为层，文档的内容也依然可以访问，因为“内容才是一切”。而且网页的行为层 (javascript) 与其结构 (XHTML) 是彼此互不干扰的，不能混杂在一起。还要给行为层“预留退路”，要考虑到如果你的用户禁用了 Javascript 会怎样？是不可网页还可以正常运作。

  问：你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？

  IE内核浏览器：360，傲游，搜狗，世界之窗，腾讯TT。

  非IE内核浏览器：firefox opera safari chrome 。

  问：著名的前端框架都有哪些的呢?

  答：布局框架：bootstrap、easy UI等。Js动效框架：jquery、angular.js等。

  问：切图工作是UI设计师来做?还是前端工程师来做?

  答：对于app工程师，也就是ios和Android工程师，大多由UI设计师来完成切图。

  对于web前端工程师，也就是PC端、浏览端，大多有web前端工程师自己完成切图。

  问：css的基本语句构成是？

  选择器{属性1:值1;属性2:值2;……}

  问：. CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？

  标签选择符 类选择符 id选择符

  继承不如指定 Id>class>标签选择

  important优先级高

  问：img标签上title与alt属性的区别是什么?

  Alt 当图片不显示是 用文字代表。

  Title 为该属性提供信息

  问：描述css reset的作用和用途。

  Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一

  问：解释css sprites，如何使用。

  Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

  问：你如何对网站的文件和资源进行优化?期待的解决方案包括：

  文件合并

  文件最小化/文件压缩

  使用CDN托管

  缓存的使用

  问：如何居中一个浮动元素?

  1、可以在外层加一个div，外层的div采用margin居中，里层的div设置宽度为100%。

  2、设置当前div的宽度，然后设置margin-left:50%; position:relative; left:-250px;其中的left是宽度的一半。

  问： 有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况

  HTML5强化了web网页的表现性能，语义化更强。如: ,,,,等。

  HTML5有强大的绘图功能(canvas标签，svg)

  HTML5新增视频标签

  CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器。

  问： 如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？

  涉及到人手，分工，同步；

  1、先期团队必须确定好全局样式(globe.css),编码模式(utf-8)等。

  2、编写习惯必须一致(例如都是采用继承式的写法，单样式都写成一行)。

  3、标注样式编写人，各模块都及时标注(标注关键样式调用的地方)。

  4、页面进行标注(例如页面模块开始和结束)；

  5、CSS跟HTML分文件夹并行存放，命名都得统一(例如:style.css)

  6、JS分文件夹存放命名以该JS功能为准英文翻译。

  7、图片采用整合的images.pngpng8格式文件使用尽量整合在一起，方便将来的管理。

  问： 你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

  问： 你怎么来实现下面这个设计图,主要讲述思路 (效果图省略)