前端面试题 6

1. css 实现垂直居中

.flex{
   display: flex;
   justify-content: center;
   align-items: center;
}

一般采用flex布局来实现元素居中，其他方法有 margin: 0 auto;  定位 

 

2. flex布局

任意一个容器都可以使用flex 布局， Webkit 内核的浏览器 需要添加-webkit 前缀，将容易设置为flex布局以后，子元素的float、clear和vertical-align属性将失效。
  flex-direction 属性决定主轴的方向。
  flex-wrap 属性决定是否换行。
  flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
  justify-content 属性定义了项目在主轴上的对齐方式。
  align-items  属性定义项目在交叉轴上如何对齐。
  align-content  属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用.

等其他一些属性 详细查看链接 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

 

3. 浏览器内核

1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
8、百度浏览器、世界之窗内核：IE内核；
9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

 

4.从输入URL到页面展示的详细过程
    1、输入网址
    2、DNS解析
    3、建立tcp连接
    4、客户端发送HTPP请求
    5、服务器处理请求　
    6、服务器响应请求
    7、浏览器展示HTML
    8、浏览器发送请求获取其他在HTML中的资源。

 

5. 页面导入样式时，使用link和@import 有什么区别
link属于XHTML标签，而@import 时css提供的
页面加载时，link会同时被加载，而@import引用的css会等到页面被加载完成在加载
@import只在IE5以上才能识别，而link时XHTML标签，无兼容问题
link方式的样式权重高于@import的权重

 

6.HTML中href和src的区别
1. href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。src 表示来源地址，在 img、script、iframe 等元素上。
2. src 的内容，是页面必不可少的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。

 

7. HTML、CSS、JavaScript 在Web前端开发中的作用
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。（css3 也可以实现动画效果）

 

8.a标签
a标签可以定义超链接，就是页面跳转，也可以实现锚点 打电话 发邮件等其他作用。
写#会跳到页面顶端，而用 href="JavaScript:void(0);" 不会触发任何行为

 

9. id 唯一
ID唯一只是推荐的规范做法。并没有说一定不行。
但这也不意味着就可以随便用，因为在一些需要根据ID取值的情况下,如document.getElementById，存在多个相同ID的话，就不会象你在CSS中这样幸运。
所以为了避免这种在一些情况下出错，一些情况下又没问题的状况，如果你不是非常了解的话，就最好都按照规范去写，所有的规范必有其道理和长期广泛的经验结果。

 

10. html 基本结构

body 中的内容可以用 header main footer 标签来布局

 

11. 利用flex布局实现自适应布局， 如果知道高度，也可以利用calc() 计算属性来实现布局

   
   
   


header
main
footer

 

12. html中的标签属性可以随便定义吗？

可以，但是需要考虑兼容问题

 

13. display:none 和 visibility:hidden 的区别

display:none 隐藏对应的元素 在文档中消失。
visibility:hidden 隐藏对应的元素，但是在文档中的位置没有消失，并且它具有继承性，如果给子元素设置visibility:visible,则子元素会显现出来，与display:none 有、着质的区别