本文共 5927 字，大约阅读时间需要 19 分钟。
笔者为正在学习web前端开发基础的菜鸟，计划先学习祖传三大件：HTML CSS及JS。写博客主要是为了加深记忆，以及把自己所学分享。本博客的内容主要为学习笔记，由于自学，其中我会借鉴网课老师课堂笔记再加入一些自己的见解，同时会分享一些学习过程中遇到的问题和解决方法。
设定元素在文档中的位置。会将标签（元素）转换为块级。
1）static:静态定位 默认值，没有定位，不能设置偏移值(left/top/right/bottom)，占用标准流（文档流）2）relative:相对定位 占用标准流（文档流），它会出现在文档流中它该出现的位置。可以通过设置偏移值改变其位置。它相对于自身所占的位置做偏移。3）absolute:绝对定位 脱离文档流，相对于body做偏移。 绝对定位一般与相对定位结合使用，它相对的父级是relative定义的元素做偏移。relative的元素必须是absolute的父级。4）fixed:固定定位 脱离文档流，相对于浏览器窗口左上角（0，0）做偏移，它与relative设定的对象没有关系，也就是说，它跟父级的定位没有任何关系。一般来做固定导航栏。
当多个元素添加绝对定位，元素将会叠加在一起，使用z-index可以设置元素显示的层次。文档流默认的z-index的值为0。用在static和relative元素上将无效。
1）双飞翼布局 由三列组成，两端固定，中间自适应。 双飞翼布局的优点： （1）兼容性好，兼容所有主流浏览器，包括万恶的IE6。 （2）因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载。2）圣杯布局 由三列组成，两端固定，中间自适应。外观与双飞翼布局一样。 布局时与双飞翼比增加了定位和偏移设置。
PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会。下面做一个小实验来体验一下二者的此处区别。
双飞翼布局:
Title PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会
只需修改一些CSS样式就可以
3）侧边栏固定布局 I）两栏布局 a)左侧固定，右侧自适应 b)左侧自适应，右侧固定 c)左右都固定 II）三栏布局 a)左侧固定，中间自适应，右侧固定 b)左侧自适应，中间和右侧固定 c)左侧和中间固定，右侧自适应
本次内容比较重要，定位包括布局是重中之重。
但是，笔者觉得更重要的是，一个网页的开发策略。先整体再局部，笔者习惯先观察一个网页的布局，先将大体的HTML布局做好，再细化每个模块的CSS样式。自顶向下，从用户阅读顺序出发，做的网页才有人看，才有人喜欢看。当然，每个人开发顺序不同也是再正常不过了，笔者分享出自己的习惯，是为了给一些刚刚入门的同学一些参考，更是为了让各位指正错误，共同进步！这里给大家推荐现在所学的网课，B站的求知讲堂有一款web前端开发的课程，我的学习笔记也是大部分都是老师借鉴老师的，再加上我学习过程中的感悟。因为老师的笔记在我心中太权威，以至于填删字句都要细细斟酌。感谢求知课堂的老师！
下图是利用今日所学做成的网页效果图：
HTML：
day5 
个人消费贷款
适用客户
所有需要申请个人消费贷款的客户
购车、装修、旅游、留学……各种用途任您选择！贷款金额最高可达2000万元！30年超长期限，全方位满足您各种消费需求！把您的房产变成提款机，尽情享用！
期限：授信期限最长可达30年
成数：最高7成
办理流程
距您成功贷款，只有三步！
第一步：提交申请
第二步：银行审批
第三步：提款消费
您需要准备的贷款申请资料
1.身份证、婚姻证明
2.房产证
3.住址证明【至少任选其一】：水、电、气、电话或物管等费用账单
4.收入证明【至少任选其一】：工资证明/银行流水/所得税税单/社保记录/其他收入证明
5.用途证明：提供相应的交易证明材料
如何找到招商银行个人贷款？
1.欢迎致电招商银行客户经理。
2.向就近招商银行网点提出申请。
3.拨打全国统一服务热线95555。
CSS:
*{ padding: 0; margin: 0;}body{ font-size: 14px; background: url("../img/bg.gif") no-repeat center top;}.wrapper{ width: 960px; margin: 20px auto;}.header{ background: url("../img/main_line.jpg") no-repeat center bottom;}li{ list-style: none;}.nav-top{ background: url("../img/main_menu_bg.gif") repeat-x; font-weight: bold;}.nav-top li{ display: inline-block; line-height: 30px; padding: 5px 0 5px 40px;}.nav-top a{ text-decoration: none; color: white;}.nav-top a:hover{ color: aqua; text-decoration: underline;}.nav-sec li{ display: inline-block; line-height: 30px; padding: 5px 0 20px 10px;}.nav-sec a{ text-decoration: none; color: #999999;}.nav-sec a:hover{ text-decoration: underline;}.main{ overflow: hidden; padding: 0 0 0 200px;}.nav-left{ width: 200px; float: left; position: relative; left: -200px; margin-right: 20px;}.nav-left li{ line-height: 20px; background: url("../img/directory_bg_big.gif"); text-align: center; padding: 5px 0;}.nav-left a{ text-decoration: none; color: black;}.content{ width: 100%; float: left; border: red 1px solid; position: relative; top:-512px;}.content h3{ background: url("../img/main_content_bg.jpg") repeat-x; text-indent: 3em; line-height: 35px; padding: 0 0 10px 0;}.content h4,p{ line-height: 18px; text-indent: 2em; padding: 10px 0 10px 0;} 转载地址：http://sqozi.baihongyu.com/