❶ 前端代码DIV+CSS关于定位
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>关于定位</title>
<styletype="text/css">
body{
margin-left:0px;
margin-top:0px;
margin-right:00px;
}
#header{
width:800px;
height:30px;
background-color:#9F9;
}
#main{
width:800px;
height:auto;
background-color:#FF6;
position:relative;
}
#one{
width:300px;
height:200px;
background-color:#F30;
position:absolute;
left:0px;
top:0px;
}
#tow{
width:490px;
height:200px;
background-color:#93F;
position:absolute;
left:310px;
top:0px;
}
#three{
width:400px;
height:200px;
background-color:#390;
position:absolute;
left:0px;
top:210px;
}
#four{
width:390px;
height:200px;
background-color:#66F;
position:absolute;
left:410px;
top:210px;
}
#foot{
width:960px;
height:30px;
background-color:#3C9;
}
</style>
<scripttype="text/javascript"src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<divalign="center">
<divid="header"align="center">头部</div>
<divid="main">
<divid="one">one</div>
<divid="tow">tow</div>
<divid="three">three</div>
<divid="four">four</div>
</div>
<divid="foot"align="left">版权</div>
</div>
</body>
<scripttype="text/javascript">
$(document).ready(function(){
varlast=$("#main>div").last();
vartop=last.css("top").replace("px","");
top=parseInt(top);
varheight=last.css("height").replace("px","");
height=parseInt(height);
varmainHeight=top+height;
$("#main").css("height",mainHeight+"px");
});
</script>
</html>
你的布局style都不用改，只需要在页面加载完成后，计算出div#main中的div占用的实际高度，并赋值给div#main。
计算原理：div#main中的每一个div都是设置了固定的top和height的，那么最后一个div的top+height肯定就是div#main的实际占用高度。
代码中，我引用了jquery的css方法，你如果不jquery也可以自己用js原生写。还有什么问题就追问哈。
❷ 如何理解前端模块化
前端模块化
在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀
这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（mole）了，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码
模块
既然JavaScript不能handle如此大规模的代码，我们可以借鉴一下其它语言是怎么处理大规模程序设计的，在Java中有一个重要带概念——package，逻辑上相关的代码组织到同一个包内，包内是一个相对独立的王国，不用担心命名冲突什么的，那么外部如果使用呢？直接import对应的package即可
import java.util.ArrayList;
遗憾的是JavaScript在设计时定位原因，没有提供类似的功能，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化。
一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，各行其是就都乱套了
规范形成的过程是痛苦的，前端的先驱在刀耕火种、茹毛饮血的阶段开始，发展到现在初具规模，简单了解一下这段不凡的历程
函数封装
我们在讲函数的时候提到，函数一个功能就是实现特定逻辑的一组语句打包，而且JavaScript的作用域就是基于函数的，所以把函数作为模块化的第一步是很自然的事情，在一个文件里面编写几个相关函数就是最开始的模块了
function fn1(){
statement
}
function fn2(){
statement
}
这样在需要的以后夹在函数所在文件，调用函数就可以了
这种做法的缺点很明显：污染了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间没什么关系。
对象
为了解决上面问题，对象的写法应运而生，可以把所有的模块成员封装在一个对象中
var myMole = {
var1: 1,
var2: 2,
fn1: function(){
},
fn2: function(){
}
}
这样我们在希望调用模块的时候引用对应文件，然后
myMole.fn2();
这样避免了变量污染，只要保证模块名唯一即可，同时同一模块内的成员也有了关系
看似不错的解决方案，但是也有缺陷，外部可以随意修改内部成员
myModel.var1 = 100;
这样就会产生意外的安全问题
立即执行函数
可以通过立即执行函数，来达到隐藏细节的目的
var myMole = (function(){
var var1 = 1;
var var2 = 2;
function fn1(){
}
function fn2(){
}
return {
fn1: fn1,
fn2: fn2
};
})();
这样在模块外部无法修改我们没有暴露出来的变量、函数
上述做法就是我们模块化的基础，目前，通行的JavaScript模块规范主要有两种：CommonJS和AMD
CommonJS
我们先从CommonJS谈起，因为在网页端没有模块化编程只是页面JavaScript逻辑复杂，但也可以工作下去，在服务器端却一定要有模块，所以虽然JavaScript在web端发展这么多年，第一个流行的模块化规范却由服务器端的JavaScript应用带来，CommonJS规范是由NodeJS发扬光大，这标志着JavaScript模块化编程正式登上舞台。
定义模块
根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性
模块输出：
模块只有一个出口，mole.exports对象，我们需要把模块希望输出的内容放入该对象
加载模块：
加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的mole.exports对象
❸ 如何规划和设计较复杂的网页
网页的规划和设计是两个相对独立的内容。
一般网页制作都会经历一个：规划 - 设计 - 制作 的过程。
规划，规划也叫网站策划，你需要整理出网站的内容分类，通常是从主导航入手，然后逐层细化和归类。主要的原则是流畅，清晰，这直接涉及最终的用户体验。一般规划还可以使用草图文案和原型图设计。规划工作完成时，你要整理出完整的页面列表和内容形式，比如列表，图文列表等。
设计，设计阶段是简单说是美化原型图，让网页更具美感。设计的原则自然是遵循网页设计规范，保持设计源文件的清晰度和图层合理性，这一步，你除了需要具备基础的网页设计理论外，还需要作图能力，当然，还需要你大致懂得网页效果图和实际网页的关系（字体，图片，图标等！）
制作，制作部分一般称为开发，开发分为前端和编程两部分。
前端开发，是把网页效果图制作成html文件。这一步，你需要使用到html、css、js等基础的网页编程语言。前端开发的原则是代码严谨（标签使用得当，js无错误等），页面兼容大部分浏览器和屏幕。
编程开发，是制作页面动态数据交互，也就是通常所说的增删改查。这一步的工作相对复杂，主要需要注意程序的高效性，安全性和交互的合理性。
其实，你所说的复杂，可以从两个方面理解，一是页面结构的复杂，二是程序功能的复杂。
网页结构的复杂，就是网页设计的比较“繁琐”。页面内容较多，页面中的各种交互较为复杂。这种时候，你需要有灵活的代码逻辑，也需要你能够从整体上把握网页的构成和框架，只有这样，你才可以把复杂的网页一步一步、一层一层简化掉，也就是化整为零。通常，一个网页的设计和制作也基本是1-2-3-4-5这样的制作，一个页面，氛围2个区域，然后逐层细分。当你熟练的使用position等特殊的css技巧后，你会发现，其实做网页和ps作图差不多。
程序设计的复杂性，这个就仁者见仁了，程序设计的复杂和网站规划相关，也和程序开发的模式有关，网站规划的时候，你就要把每个功能推敲好，具体这个模块或功能适合怎样的表现，大致能使用到那些技术，有无其他接口等。其实有时候，规划初期可能有20几个功能，经过推敲后变成了10个，而最终开发的时候，可能因为模块的操作的相似性又会被程序人员开发成5个功能块，当然这是一种开发模式。总而言之，程序设计的复杂性，首先需要考虑有无必要复杂，然后设计复杂程序，然后简单的验证程序的可用性，最终确定程序设计方案。
❹ 前端如何快速寻找到css样式的位置
CSS样式实现快速定位bug的六大技巧
1、检查是否清除浮动
其实有不少的CSSBUG问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的，推荐使用无额外HTML标签的清除浮动的方法（尽量避免使用overflow:hidden;zoom:1的类似方法来清除浮动，会有太多的限制性）。
2、检查IE下是否触发haslayout
很多的IE下复杂CSS BUG都与IE特有的haslayout息息相关。熟悉和理解haslayout对于处理复杂的CSSBUG会事半功倍。推荐阅读old9翻译的《Onhavinglayout》（如果无法翻越穿越伟大的GFW，可阅读蓝色上的转帖）
快捷提示：如果触发了haslayout，IE的调试工具IEDeveloperToolbar中的属性中将会显示haslayout值为-1。
3、边框背景调试法
故名思议就是给元素设置显眼的边框或者背景（一般黑色或红色），进行调试。此方法是最常用的调试CSSBUG的方法之一，对于复杂BUG依旧适用。经济实惠还环保.
4、检查页面的标签是否闭合
不要小看这条，也许折腾了你两天都没有解决的CSS BUG问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。
快捷提示：可以用Dreamweaver打开文件检查，一般没有闭合的标签，会黄色背景高亮。
5、样式排除法
有些复杂的页面也许加载了N个外链CSS文件，那么逐个删除CSS文件，找到BUG触发的具体CSS文件，缩小锁定的范围。
对于刚才锁定的问题CSS样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。
6、模块确认法
有时候我们也可以从页面的HTML元素出发。删除页面中不同的HTML模块，寻找到触发问题的HTML模块。
❺ 前端页面有哪三层构成，分别是什么作用是什么
最准确的网页设计思路是把网页分成三个层次，即：结构层、样式层、行为层。
HTML：结构层
网页的结构或内容层是该页面的基础HTML代码。正如房屋的框架为房屋的其他部分构建了一个坚实
的基础，HTML的坚实基础创建了一个可以在其上创建网站的平台。
结构层用于存储客户想要阅读或查看的所有内容。HTML结构可以包含文本和图像，它包括访问者用
于浏览网站的超链接。这是在符合标准的HTML5中编码的，可以包括文本，图像和多媒体（视频，音频等）。
网站内容的每个方面都应该在结构层中表示。这允许关闭JavaScript的客户或无法查看整个网站的
CSS访问权限的客户（如果不是所有功能）。
CSS：样式层
该层指示结构化HTML文档如何看待网站的访问者，并由CSS（层叠样式表）定义。这些文件包含有
关如何在Web浏览器中显示文档的样式说明。样式层通常包括基于屏幕大小和设备更改站点显示的
媒体查询。
网站的所有视觉样式都应位于外部样式表中。您可以使用多个样式表，但请记住，每个CSS文件都需
要HTTP请求才能获取它，从而影响站点性能。
JavaScript：行为层
行为层使网站具有交互性，允许页面响应用户操作或基于一组条件进行更改。JavaScript是行为层最
常用的语言，但CGI和PHP也经常被使用。
当开发人员引用行为层时，大多数都是指在Web浏览器中直接激活的层。您可以使用此图层直接与
DOM（文档对象模型）进行交互。在内容层中编写有效的HTML对于行为层中的DOM交互非常重
要。在构建行为层时，应该像使用CSS一样使用外部脚本文件来优化速度和性能。
(5)前端复杂化页面定位扩展阅读：
分层的一些好处是：
共享资源：当您编写外部CSS或JavaScript文件时，站点上的任何页面都可以使用该文件。如果
您需要对该文件进行更改，也许更新网站上的某些排版样式，则使用该样式表的每个页面都会得到
更改。没有必要单独编辑网站的每个页面，这对于大型网站来说可能是一项艰苦的任务。
下载速度更快：首次由客户下载脚本或样式表后，Web浏览器会对其进行缓存。由于这些共享
资源现在包含在浏览器的缓存中，因此浏览器中请求的其他页面加载速度更快，从而提高了整体页
面速度和性能。
多人团队：如果您有多个人同时在网站上工作，您可以使用允许文件签入和签出的系统，以确
保每个人都使用最新版本。如果样式和行为与结构文档交织在一起，那就更难了。
搜索引擎优化：一个明确分离风格和结构的网站可能会对搜索引擎有更好的表现，因为它们可以更有效地抓取内容并理解页面而不会陷入视觉风格和行为信息。
辅助功能：外部样式表和脚本文件更易于人们和浏览器访问。屏幕阅读器等软件可以更轻松地
处理结构层中的内容，而无需处理无论如何都无法使用的样式。
向后兼容性：使用单独的开发层设计的站点更可能向后兼容，因为无法使用某些CSS样式或禁
用了JavaScript的浏览器和设备仍然可以查看HTML。然后，您可以使用支持它们的浏览器的功能逐
步增强您的网站。
❻ 测试：进入某个页面显示内容错误，如何定位是前端还是后端问题
朋友您好，进入某个页面显示内容错误，定位是前端问题还是后端问题，其实很简答。将后端的日志等级调低，当页面显示内容错误的时候，可以看一下后端日志有没有报错；其次，如果你是研发人员的话，可以debug或者将页面请求的响应值都打印出来。还有一种方法，就是在页面端，使用一些工具，如打开开发者工具，点击网络，可以看一下请求后台的返回值是否是预期的，如果是预期的值，页面展示不对，那就是前端展示出现了问题，如果是后端响应的值都不对，那可以从后端排查问题。
❼ web前端如何实现一个div固定在某个位置
在前端里面，如何将一个div固定在某个位置，属于css内position定位的内容。position定位属性有五种类型，分别如下：
1.static 定位。html元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
2.fixed 定位。元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
3.relative 定位。相对定位元素的定位是相对其正常位置。
4.absolute 定位。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于整个页面。
5.sticky 定位。粘性定位是基于用户的滚动位置来定位。它依赖于用户的滚动，在position:relative与position:fixed定位之间切换。
❽ 为什么我们的WEB前端变的越来越复杂
1、以前对于前端的定位可能只是“页面仔”，把设计师的设计变成一个实际的网页。不过现在可不是这么简单了，同样是一张设计图，需要在许多千奇百怪的浏览器上面进行兼容，调试。而且因为现在网页的交互已经变得越来越复杂，单纯的网页已经不能够满足于用户。而更加像是一个富客户端。
2、而且随着HTML5跨平台应用的兴起，前端的定位又进一步发展了。因为可以要求前端编写移动端web app应用甚至是跨平台应用。这个时候，前端要学习的东西就更多了。
3、可能这些只是一个表面上看到的东西。因为前端工程师如果定位不好，在一个团队中很容易成为一个中间人。为什么这么说呢，因为团队中会使用一种后端语言，常见的有python,php,ruby现在还有node.js（对不起，我知道node.js不是一种语言，不过你懂就行了），如果你不会这种后端语言，你会变得好像一个局外人，甚至在团队中显得像个外包。因此前端又需要在应用层面上会这些后端的语言，比如说要爬爬数据，你总不能在浏览器上就完成吧？所以前端的范围就更广了。
好吧，从几个方面说了前端为什么那么苦逼。其实前端是一个很好的练武场，你一定会在前端职位上成为一个多面手，学习到最多的东西，因为你跨维度是最大的，你懂设计，懂交互，懂后端语言，懂前端语言，会沟通，会兼容，你都做到了，你已经是个牛人了！欢迎加入前端。
❾ 前端框架如何实现定位
前端bug主要分为3个类别：HTML,CSS,Javascript三类问题
给个最大的区别方式方法：
出现样式的问题基本都是CSS的bug
出现文本的问题基本都是html的bug
出现交互类的问题基本都是Javascript的bug
区分前后台交互：查看网络请求
TMS对应的VM模板，出现的一些截断控制，转换功能都属于前端的问题
标签闭合—表象，页面中出现大范围的混乱，就是少了标签的情况，导致标签未闭合
标签浮出—例如鼠标移动到文本位置，浮出全名的这种浮出形式都属于标签浮出的问题
标签在不同的浏览器的一种解析方式的不同导致的前端bug例如如下结构
页面定点的问题：最明显的前端功能，在于点击某个链接将页面位置定位到对应的位置
页面的跳转，也属于html的问题，大家在出现点击未跳转或者跳转方式不正确的问题，直接可以定位到跳转属性的问题，找到对应的跳转对应的块提供给开发人员即可
兼容型bug
脚本兼容型问题：在出现对应交互的问题就基本可以定位到脚本兼容型bug，例如DIV的显示和层结构。实际可以参考聚划算的几个商品鼠标移动到小图的时候，对应大图展示的功能。
页面样式兼容型问题：直接表象在样式上，都是基于框架的页面展示错误，很容易定位
业务性bug
内容型bug
有产生交互类的问题，大多数都可以定位到是属于javascript产生的问题，该部分大多不会报错
有错误提示类的。页面左下方有出现javascript的错误提示；有弹出错误信息提示的bug；浏览器返回的一些错误弹出框都属于javascript的bug
现在以淘宝的前端人员工作为例进行相关bug定位的剖析
判断前后台问题的区分方法：
FF, 打开错误控制台
a) Html中如果有链接，有相应的情况下，基本可以定位到是属于前端的问题
b) 如果为空，或者有出现error错误信息，我们就可以定位到属于后台开发的问题
一、HTML
最常见的HTML的问题—就是标签的问题了，最常见的排查和解决办法就是查看页面源代码，然后通过检查标签的工具，现在暂时提供idea.exe进行检查，有其他更好的工具再进行推荐。
常见问题类别：
该部分可以看做为一个大的框即是标签<a> 内嵌标题的标签<p>，里面再有这些个内容<ing>,那么在不同的浏览器中，可能ie和FF的解析会产生不同，假设IE解析 为<a><p><ing></ing></a></p>的一种形式，但在FF 下可能解析为
<a><ing></ing></a>
<p></p>
的两行的形式从而导致前端在复古鞋/板鞋这块ing里面的格式产生混乱
结构可看为：
a) 我们可以通过右键，查看元素的工具进行定位到毛点所定位到的位置，如果出现问题这种问题很直观，并且能通过这种方法直接定位到问题
二、CSS，产生样式问题。例如：排版，布局，颜色，背景等
css的bug主要分为：兼容型bug 、业务性bug 和 内容型bug
a) 表现：仅在少数几个浏览器上出现
b) 原因：浏览器的解析不一致
c) 解决：根据实际情况进行前端代码的通用性
d) 类别：
a) 表现：在所有浏览器下都有该问题
b) 原因：对业务不熟悉
c) 解决：根据需求进行修改达到业务要求
该类型的定位，主要在和实现的要求不一致，最直接表现在页面的友好型，用户的可用性的bug，可以定位为该类型
a) 表现： 前端自测正确，但在填入内容后，出现的错误，内容消失等
b) 原因： 扩展性未考虑周全
c) 解决： 进行overflow test
输入内容的长度限制等功能可定位为内容型bug
三、Javascript
最直接的判断方法，刷新页面，出现滞后显示的一些模块基本都为脚本的输出块。该部分的一些问题可以参照兼容型bug中类别的脚本兼容型bug。
❿ 前端开发，页面优化，性能优化有哪些方面
常用的优化有两部分
第一：面向内容的优化
1. 减少 HTTP 请求
2. 减少 DNS 查找
3. 避免重定向
4. 使用 Ajax 缓存
5. 延迟载入组件
6. 预先载入组件
7. 减少 DOM 元素数量
8. 切分组件到多个域
9. 最小化 iframe 的数量
10. 不要出现http 404 错误
第二：面向 Server
1. 缩小 Cookie
2. 针对 Web 组件使用域名无关性的