前端面试题汇总(理论篇五)---布局篇

垂直居中的几种方法？

1）table-cell

display:table-cell;vertical-align:middle

2) flex

display:flex;justify-content:center;align-items:center

3) 绝对定位

margin:auto;top、left、right、bottom都设置为0

4）transform:translate(-50%,-50%);

position:absolute;tp:50%;left:50%;width:100%;transform:translate(-50%,-50%);

5) 父元素relative,子元素absolute(具体的top,left值)

6) display:inline-block

7) line-height

em和rem

rem是相对于根元素进行计算，而em是相对于当前元素或父元素的字体大小。

rem不仅可以设置字体的大小，还支持元素宽、高等属性。

em是相对于当前元素或父元素进行换算，层级越深，换算越复杂。而rem是相对于根元素计算，避免层级关系。

什么是盒模型？（content/padding/border）

标准盒模型:box-sizing:content-box width(content) + padding + border + margin

IE盒模型：box-sizing:border-box width(content + padding + border) + margin

盒模型分为两类：标准盒模型和怪异盒模型（IE 盒模型）
盒模型的组成部分（由外向内）：
margin（外边距）+ border（边框）+ padding（内边距）+ content（盒子内容大小）
注：
标准盒模型的 width 指的是内容 content 的宽度，height 指的是 content 的高度
怪异盒模型的 width 指的是内容、边框、内边距总的宽度（content + border + padding）；
height 指的是内容、边框、内边距总的高度
盒子转换方式：
如果 doctype 协议缺失，会由浏览器自己界定。
在 IE 浏览器中 IE9 以下（IE6、IE7、IE8）的版本触发怪异模式，其他浏览器中会默认
为 W3C 标准模式。
box-sizing: content-box 标准盒模型
box-sizing: border-box IE 盒模型

BFC（块级格式化上下文)）

BFC是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

display:none和visibility:hidden的区别？

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

什么是css Hack

CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。

常用的CSS hack 有三种方式，CSS 内部hack、选择器hack、HTML 头部引用，其中第一种最常用。
CSS 内部hack

/*Mozilla内核浏览器：firefox3.5+*/
  -moz-transform: rotate | scale | skew | translate ;
 /*Webkit内核浏览器：Safari and Chrome*/
  -webkit-transform: rotate | scale | skew | translate ;
 /*Opera*/
  -o-transform: rotate | scale | skew | translate ;
 /*IE9*/
  -ms-transform: rotate | scale | skew | translate ;
 /*W3C标准*/
  transform: rotate | scale | skew | translate

选择器hack

针对IE9的hack可以这么写

:root .test
{
    background-color:green;
}

HTML 头部引用

<!– 默认先调用css.css样式表 –>
<link rel="stylesheet" type="text/css" href="css.css" />
<!–[if IE 7]>
<!– 如果IE浏览器版是7,调用ie7.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]–>
<!–[if lte IE 6]>
<!– 如果IE浏览器版本小于等于6,调用ie.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]–>

HTML语义化的理解

用正确的标签做正确的事情。

HTML语义化让页面的内容结构化，结构更清晰，便于浏览器、搜索引擎解析；即使在没有css样式的情况下，也以一种文档格式显示，并且是容易阅读的

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

使阅读源代码的人更容易将网站分块，便于阅读维护理解

href 与 src？

href (Hypertext Reference)指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。（目的不是为了引用资源，而是为了建立联系，让当前标签能够链接到目标地址。）

src source（缩写），指向外部资源的位置，指向的内容将会应用到文档中当前标签所在位置。

href与src的区别:

1、请求资源类型不同：href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片；

2、作用结果不同：href 用于在当前文档和引用资源之间确立联系；src 用于替换当前内容；

3、浏览器解析方式不同：当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因

表单中readonly和disabled的区别？

共同点：能够使用户不能改变表单中的内容

不同点：
1、readonly只对input和textarea有效，但是disabled对所有的表单元素都是有效的，
包括radio、checkbox
2、readonly可以获取到焦点，只是不能修改。
disabled设置的文本框无法获取焦点
3、如果表单的字段是disabled，则该字段不会发送（表单传值）和序列化

简明说一下 CSS link 与 @import 的区别和用法

link 是 XHTML 标签，除了加载CSS外，还可以定义 RSS 等其他事务；@import 属于 CSS 范畴，只能加载 CSS。
link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。
link 支持使用 Javascript 控制 DOM 去改变样式；而@import不支持