1.3 CSS 定位布局

笔者为正在学习web前端开发基础的菜鸟，计划先学习祖传三大件：HTML CSS及JS。写博客主要是为了加深记忆，以及把自己所学分享。本博客的内容主要为学习笔记，由于自学，其中我会借鉴网课老师课堂笔记再加入一些自己的见解，同时会分享一些学习过程中遇到的问题和解决方法。

正文

1.定位（position)

设定元素在文档中的位置。会将标签（元素）转换为块级。

2.定位分类（属性值）

1）static:静态定位默认值，没有定位，不能设置偏移值(left/top/right/bottom)，占用标准流（文档流）
2）relative:相对定位占用标准流（文档流），它会出现在文档流中它该出现的位置。可以通过设置偏移值改变其位置。它相对于自身所占的位置做偏移。
3）absolute:绝对定位脱离文档流，相对于body做偏移。绝对定位一般与相对定位结合使用，它相对的父级是relative定义的元素做偏移。relative的元素必须是absolute的父级。
4）fixed:固定定位脱离文档流，相对于浏览器窗口左上角（0，0）做偏移，它与relative设定的对象没有关系，也就是说，它跟父级的定位没有任何关系。一般来做固定导航栏。

3.z-index

当多个元素添加绝对定位，元素将会叠加在一起，使用z-index可以设置元素显示的层次。
文档流默认的z-index的值为0。
用在static和relative元素上将无效。

4.网站开发策略：先整体再局部，至顶向下，逐步细化。

1）双飞翼布局由三列组成，两端固定，中间自适应。双飞翼布局的优点：（1）兼容性好，兼容所有主流浏览器，包括万恶的IE6。（2）因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载。
2）圣杯布局由三列组成，两端固定，中间自适应。外观与双飞翼布局一样。布局时与双飞翼比增加了定位和偏移设置。

PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会。下面做一个小实验来体验一下二者的此处区别。

小实验

 双飞翼布局:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{padding: 0;margin: 0;}.container{overflow: hidden;margin: 200px 0;}.cosume{float: left;height: 300px;}.center{width: 100%;background-color: red;}.left,.right{width: 300px;}.left{background-color: #00fff7;margin-left: -100%;}.right{background-color: pink;margin-left: -300px;}</style>
</head>
<body><div class="container"><div class="center cosume"> PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会  </div><div class="left cosume"> PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会</div><div class="right cosume"> PS：这里需要特别注意，双飞翼布局会将中间栏的两侧遮盖住，而圣杯布局则不会</div></div>
</div>
</body>
</html>

圣杯布局：

只需修改一些CSS样式就可以

<style>*{padding: 0;margin: 0;}.container{overflow: hidden;margin: 200px 0;padding: 0 300px;}.cosume{float: left;height: 300px;}.center{width: 100%;background-color: red;}.left,.right{width: 300px;position: relative;}.left{background-color: #00fff7;margin-left: -100%;left: -300px;}.right{background-color: pink;margin-left: -300px;right: -300px;}</style>

3）侧边栏固定布局I）两栏布局a)左侧固定，右侧自适应b)左侧自适应，右侧固定c)左右都固定II）三栏布局a)左侧固定，中间自适应，右侧固定b)左侧自适应，中间和右侧固定c)左侧和中间固定，右侧自适应

总结

本次内容比较重要，定位包括布局是重中之重。
但是，笔者觉得更重要的是，一个网页的开发策略。先整体再局部，笔者习惯先观察一个网页的布局，先将大体的HTML布局做好，再细化每个模块的CSS样式。自顶向下，从用户阅读顺序出发，做的网页才有人看，才有人喜欢看。当然，每个人开发顺序不同也是再正常不过了，笔者分享出自己的习惯，是为了给一些刚刚入门的同学一些参考，更是为了让各位指正错误，共同进步！

这里给大家推荐现在所学的网课，B站的求知讲堂有一款web前端开发的课程，我的学习笔记也是大部分都是老师借鉴老师的，再加上我学习过程中的感悟。因为老师的笔记在我心中太权威，以至于填删字句都要细细斟酌。感谢求知课堂的老师！

下图是利用今日所学做成的网页效果图：

源码：

HTML：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>day5</title><link rel="stylesheet" href="../css/day5.css">
</head>
<body><!--总体--><div class="wrapper"><!--1.header--><div class="header"><!--(1)logo--><a href="#"><img src="../img/logo.jpg" alter="logo"></a><!--(2)上导航栏--><div class="nav-top"><ul><li><a href="">主页</a></li><li><a href="">个人业务</a></li><li><a href="">公司业务</a></li><li><a href="">小企业</a></li><li><a href="">信用卡</a></li><li><a href="">i理财</a></li><li><a href="">商旅预定</a></li><li><a href="">今日招行</a></li></ul></div><!--(3)二级导航栏--><div class="nav-sec"><ul><li><a href="">金葵花理财</a></li><li><a href="">私人银行</a></li><li><a href="">出国金融</a></li><li><a href="">个人贷款</a></li><li><a href="">空中银行</a></li><li><a href="">一卡通</a></li><li><a href="">财富账户</a></li><li><a href="">伙伴一生</a></li><li><a href="">电子银行</a></li><li><a href="">居家生活</a></li><li><a href="">储蓄业务</a></li><li><a href="">投资理财</a></li><li><a href="">网上个人银行</a></li></ul></div></div><!--2.main--><div class="main"><!--(1)左侧导航栏--><div class="nav-left"><ul><li><a href="">生意贷</a></li><li><a href="">生意一卡通</a></li><li><a href="">特色创新功能</a></li><li><a href="">一手住房贷款</a></li><li><a href="">二手住房贷款</a></li><li><a href="">购房专享装修贷款</a></li><li><a href="">购房专享车位贷款</a></li><li><a href="">个人消费贷款</a></li><li><a href="">信用贷款</a></li><li><a href="">金葵花客户尊享贷款</a></li><li><a href="">金卡客户专享贷款</a></li><li><a href="">工资贷款</a></li><li><a href="">个人汽车贷款</a></li><li><a href="">商业用房贷款</a></li><li><a href="">个人留学贷款</a></li><li><a href="">全国个贷中心</a></li><li><a href="">按揭贷款月供计算器</a></li></ul></div><!--(2)文档区--><div class="content"><h3>个人消费贷款</h3><h4>适用客户</h4><p>所有需要申请个人消费贷款的客户</p><p>购车、装修、旅游、留学……各种用途任您选择！贷款金额最高可达2000万元！30年超长期限，全方位满足您各种消费需求！把您的房产变成提款机，尽情享用！</p><p>期限：授信期限最长可达30年</p><p>成数：最高7成</p><h4>办理流程</h4><p>距您成功贷款，只有三步！</p><p>第一步：提交申请</p><p>第二步：银行审批</p><p>第三步：提款消费</p><h4>您需要准备的贷款申请资料</h4><p>1.身份证、婚姻证明</p><p>2.房产证</p><p>3.住址证明【至少任选其一】：水、电、气、电话或物管等费用账单</p><p>4.收入证明【至少任选其一】：工资证明/银行流水/所得税税单/社保记录/其他收入证明</p><p>5.用途证明：提供相应的交易证明材料</p><h4>如何找到招商银行个人贷款？</h4><p>1.欢迎致电招商银行客户经理。</p><p>2.向就近招商银行网点提出申请。</p><p>3.拨打全国统一服务热线95555。</p></div></div><!--3.footer--><div class="nav-top"><ul><li><a href="">安全说明</a></li><li><a href="">网站声明</a></li><li><a href="">隐私保密条款</a></li><li><a href="">网站地图</a></li><li><a href="">友情链接</a></li><li><a href="">加入收藏夹</a></li><li><a href="">人才招聘</a></li><li><a href="">手机一网通</a></li></ul></div></div>
</body>
</html>

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;
}

学习笔记~1.3 CSS 定位布局相关推荐

「学习笔记」黑马面面布局开发
「学习笔记」黑马面面布局开发黑马面面布局开发一.目的 1.1 技术方案 1.2 代码规范 1.2 目录规范二.流程开发 2.1 蓝湖/摹客协作平台 2.2 适配方案 2.3 初始化文件 2.4 ...
前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs) 一. HTML 1. 盒子模型是什么:每个元素被表示为一个矩形的盒子,有四个部分组成:内容(content ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
AD学习笔记（四）PCB布局分析
文章目录 AD学习笔记第四讲 PCB布局分析一.PCB导入以及常见报错解决方法二.常见绿色报错的消除三.PCB板框的评估及叠层设计四.快捷键设置及推荐五.PCB布局注意事项 AD学习笔记 ...
Android学习笔记---09_深入了解各种布局技术
Android学习笔记---09_深入了解各种布局技术 09_深入了解各种布局技术
一、CSS定位布局[相对定位、绝对定位、固定定位]
一.CSS定位布局选项说明 static 默认形为,属于文档流 relative 相对定位 absolute 绝对定位 fixed 固定定位 1.relative 解释:元素在原来的位置开始移动( ...
VisionMaster 学习笔记（USB 孔定位）
海康VisionMaster 学习笔记(USB 孔定位) 这个例子是获得图像中 USB 孔的中心的坐标.图像如下: 首先,先加入一个'本地图像'模块,把我们的标准图像加载进去.具体如何加载图片可以参考 ...
前端学习笔记36-水平方向的布局
前端学习笔记36-水平方向的布局上一节中的margin-right是没用的,为什么呢? 子元素的七个水平布局设置: margin-left border-left padding-left widt ...
Halcon 学习笔记五：几何定位+仿射变换+测量
Halcon 学习笔记五:几何定位+仿射变换+测量定位流程例子一例子二(药片的定位) 例子三(充电宝定位) 例子四(车牌定位) 其他定位流程 blob分析模板匹配 (仿射变换成标准的形状) ...

学习笔记~1.3 CSS 定位布局