1.三栏布局的5种解决方案及优缺点
假设高度已知,请写出三栏布局,左栏、右栏宽度300px,中间宽度自适应。
这道题本身的难度并不大,我们在布局页面的时候,写个三栏布局还是挺简单的。但是如果在面试的时候遇到这道题,就没有那么简单了。看似简单的一道题,想把它答好是不简单的。往往越简单的题越不好答。如果看到这题只想到了浮动和绝对定位,那这题你连及格都及格不了。
下面是5种三栏布局的方法。
在写布局代码之前,先写两段公共的样式,此段写在头部
样式
<style media="screen">
html *{
padding: 0;
margin: 0;
}
.layout article div{
min-height: 100px;
}
</style>
a. 浮动布局
<!--浮动布局 -->
<section class="layout float">
<style media="screen">
.layout.float .left{
float:left;
width:300px;
background: red;
}
.layout.float .center{
background: yellow;
}
.layout.float .right{
float:right;
width:300px;
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h2>浮动解决方案</h2>
1.这是三栏布局的浮动解决方案;
2.这是三栏布局的浮动解决方案;
</div>
</article>
</section>
浮动布局是有局限性的,浮动元素是脱离文档流,要做清除浮动,这个处理不好的话,会带来很多问题,比如高度塌陷等。
浮动布局的优点就是比较简单,兼容性也比较好。只要清除浮动做的好,是没有什么问题的。
延伸:你知道哪些清除浮动的方案?每种方案的有什么优缺点?
b 绝对定位布局
<!-- 绝对布局 -->
<section class="layout absolute">
<style>
.layout.absolute .left-center-right>div{
position: absolute;
}
.layout.absolute .left{
left:0;
width: 300px;
background: red;
}
.layout.absolute .center{
left: 300px;
right: 300px;
background: yellow;
}
.layout.absolute .right{
right:0;
width: 300px;
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>绝对定位解决方案</h2>
1.这是三栏布局的绝对定位解决方案;
2.这是三栏布局的绝对定位解决方案;
</div>
<div class="right"></div>
</article>
</section>
绝对定位布局优点,很快捷,设置很方便,而且也不容易出问题,你可以很快的就能想出这种布局方式。
缺点就是,绝对定位是脱离文档流的,意味着下面的所有子元素也会脱离文档流,这就导致了这种方法的有效性和可使用性是比较差的。
c. flex布局
<!-- flexbox布局 -->
<section class="layout flexbox">
<style>
.layout.flexbox{
margin-top: 110px;
}
.layout.flexbox .left-center-right{
display: flex;
}
.layout.flexbox .left{
width: 300px;
background: red;
}
.layout.flexbox .center{
flex:1;
background: yellow;
}
.layout.flexbox .right{
width: 300px;
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>flexbox解决方案</h2>
1.这是三栏布局的felx解决方案;
2.这是三栏布局的flex解决方案;
</div>
<div class="right"></div>
</article>
</section>
felxbox布局是css3里新出的一个,它就是为了解决上述两种方式的不足出现的,是比较完美的一个。目前移动端的布局也都是用flexbox。
felxbox的缺点就是不能兼容IE8及以下浏览器。
d.表格布局
<!-- 表格布局 -->
<section class="layout table">
<style>
.layout.table .left-center-right{
width:100%;
height: 100px;
display: table;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: red;
}
.layout.table .center{
background: yellow;
}
.layout.table .right{
width: 300px;
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>表格布局解决方案</h2>
1.这是三栏布局的表格解决方案;
2.这是三栏布局的表格解决方案;
</div>
<div class="right"></div>
</article>
</section>
表格布局在历史上遭到很多人的摒弃,说表格布局麻烦,操作比较繁琐,其实这是一种误解,在很多场景中,表格布局还是很适用的,比如这个三栏布局,用表格布局就轻易写出来了。还有表格布局的兼容性很好,在flex布局不兼容的时候,可以尝试表格布局。
表格布局也是有缺陷的,当其中一个单元格高度超出的时候,两侧的单元格也是会跟着一起变高的,而有时候这种效果不是我们想要的。
e. .网格布局
<section class="layout grid">
<style>
.layout.grid .left-center-right{
width:100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left-center-right>div{
}
.layout.grid .left{
width: 300px;
background: red;
}
.layout.grid .center{
background: yellow;
}
.layout.grid .right{
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>网格布局解决方案</h2>
1.这是三栏布局的网格布局解决方案;
2.这是三栏布局的网格布局解决方案;
</div>
<div class="right"></div>
</article>
</section>
网格布局也是新出的一种布局方式,如果你答出这种方式,也就证明了你的实力,证明你对技术热点是有追求的,也说明你有很强的学习能力。
这五种解决方案应该是最常见的三栏布局,如果你还有其他的方案,欢迎补充!
最后这个问题还有很多延伸问题的,比如,
高度已知换为高度未知呢?
块内内容超出会是怎样的效果?
如果是上下高度已知,中间自适应呢?
如果是两栏布局呢?
如果是上下左右混合布局呢?
以上几个延伸你能否轻松应对,如果绝对还有欠缺,尽早查缺补漏吧!
欢迎补充!
本本文属于转载原文地址:请点击。
2. 如何实现弹窗的水平居中:
方法一:
//控制弹窗水平垂直居中
var win_width=parseInt(document.body.clientWidth)/2-400; //400为弹窗的宽度的一半
var win_heigth=parseInt(document.body.clientHeight)/2-250; //250为弹窗高度的一半
$(".windowshow").css({"left":win_width+"px","top":win_heigth+"px"}); //.windowshow为弹窗的class
方法二:
该方法是封装好的,只需要在调用弹窗的地方调用该方法,并传对象(要居中的弹窗对象)即可。如下:
divCenter($(".windowshow"));
.windowshow {
width: 800px;
height: 500px;
position: absolute;
border-top: 5px solid #398FC7;
left: 50%;
top: 50%;
margin: 0,0,0,0;
background: #fff;
z-index: 1001;
}
3. == 和 === 的区别
==用于一般比较,===用于严格比较,==在比较的时候可以转换数据类型,===严格比较,只要类型不匹配就返回flase。举例说明:“1” == true类型不同,""将先做类型转换,把true转换为1,即为 “1” == 1;此时,类型仍不同,继续进行类型转换,把"1"转换为1,即为 1 == 1。1.如果比较:“1” === true 左侧为字符型,右侧为bool布尔型或int数值型,左右两侧类型不同,结果为false;
如果比较: 1 === 1 左侧为int数值型,右侧为int数值型,左右两侧类型相同,数值大小也相同,结果为true;3.如果比较: 1 === 2 左侧为int数值型,右侧为int数值型,左右两侧类型相同,但数值大小不同,结果为false。
4.window.onload执行时间?
在JS中,如果希望在页面加载完成后执行某些操作的话,一般的写法如下:
window.onload = function(){//ToDo};
但是,onload函数的执行并不是我们通常所理解的浏览器构建完html页面对应的DOM树后立刻执行,而是要等到页面中所引用的图片等外部资源 完全下载完成后并且在浏览器中显示才执行,也就是说,如果页面中包括很多图片或者图片很大时将导致onload函数执行时间会被推迟很久,页面中基于 onload的特效或者其它相关内容将并不立刻可用,导致用户体验差。JQUERY的提供了一个自己的类似onload方式,通过该方法实现的页面加载后 执行函数将在浏览器构建完DOM树后立刻执行,而并不需要等待图片等外部资源下载完成。
(
f
u
n
c
t
i
o
n
(
)
/
/
s
o
m
e
t
h
i
n
g
t
o
d
o
)
;
在
(function(){//something to do}); 在
(function()//somethingtodo);在(document).ready()执行时,整个DOM文档树已经解析完成,即各个DOM元素都已经可以访问了(但是对于某些元素的某些属性 此时访问可能还不精确,如图片的宽度高度)
而window.onload会在整个文档都加载完成后才会执行,常见的就是对于页面含很多图片的情况下,必须等到图片都下载 下来后才会执行。而$(document).ready()不会。
5.了解JS继承吗?
prototype(原型)模式
prototype为构造函数的一个属性,指向另一个对象,该对象所有属性方法都会被构造函数实例继承。一般用来存放公有方法和属性。
function Man(name,age){
this.name = name;
this.age = age;
}
Man.prototype.work = function(){alert("人都需要工作");{}
var man5 = new Man("hkj",20);
man5.work();
优点:所有实例对象的work方法都使用了同一个内存地址指向了prototype对象,提高了效率。
相关方法:
alert(Man.prototype.isPrototypeOf(man5)); //true 判断prototype与实例之间的关系
alert(Man.hasOwnProperty("name")); //true 判断是否是本地属性 alert("name" in man5); //true 判断是否含有某个属性
6.利用原型链的继承有什么缺点吗?
类式继承:在子类型构造函数的内部调用父类的构造函数
原型继承:子类通过prototype将所有在父类中通过prototype添加的属性和方法都追加到Child,从而实现了继承
优缺点: 类式继承在运行时,无法修改或者添加新的方法,而原型继承是可以通过改变原型链接而对子类进行修改的,类式继承不支持多重继承,而对于原型继承来说,只需要写好extend对对象进行进一步的扩展就可以。