HTML基础学习—

定位：是一种布局手段，而且它是一种高级的布局手段，

可以将页面中的任何元素放在页面中的任意位置

通过position属性进行设置，

可选值：

static 默认值不开启定位

以下四种都属于开启定位

relative 开启相对定位

absolute 开启绝对定位

fixed 开启固定定位

sticky 开启粘滞定位

掌握定位：如何开启、开启后的特点

相对定位

使用position：relative；开启

特点：

1、开启了相对定位，如果不配合偏移量使用，元素不会发生任何变化

2、相对定位，是相对于元素原来在文档流中的位置定位

3、开启了相对定位后，元素的层级会变高，也就是会盖住其他的元素

4、开启了相对定位后，元素的性质不会发生变化，

也就是块还是块，行内还是行内

偏移量相对于定位位置挪动的大小的值

left 相对于定位位置左侧的偏移量

right 相对于定位位置右侧的偏移量

top 相对于定位位置上侧的偏移量

bottom 相对于定位位置下侧的偏移量

一般情况下，设置偏移量，

水平方向，left或right调动一个值

垂直方向，top或bottom调动一个值

绝对定位：

开启绝对定位

position：absolute；

开启后特点

1、开启了绝对定位，如果不配合偏移量使用，元素的位置没有发生变化

2、开启了绝对定位后，元素会脱离文档流，下面的元素就会跑上去

3、开启了绝对定位，元素脱离文档流，元素的性质就会发生变化

不再区分块还是行内还是行内块，也就是块元素不会独占一行了，行内元素可以设置宽高等等

4、绝对定位的原点，是相对于其包含块来确定的

一般情况下，如果设置子元素为绝对定位，

我们会同时设置其父元素相对定位，以便设置偏移量，这种情况叫“子绝父相”，

但最终还是要根据如何方便设置子元素偏移量为准。

5、开启了绝对定位，元素会提升一个等级

固定定位

如何开启

position：fixed；

开启后的特点

1、开启固定定位后，元素会脱离文档流，元素的性质会发生改变

2、开启固定定位后，元素会固定在页面中，不会随着滚动条滚动而滚动

3、开启固定定位后，也需要配合偏移量，来改变元素在页面中位置

4、固定定位的原点是html根标签,也就是浏览器视口

常用的场景

1、固定的侧边导航

2、固定的广告

3、固定的顶部、底部导航

粘滞定位

如何开启

position: sticky;

开启之后的特点

1、开启粘滞定位，元素不会脱离文档流，也就是元素性质也不会发生改变

2、开启粘滞定位后，元素位置不发生改变，需要配合偏移量使用

一般情况下，是配合top值使用

在没有到达top值之前，元素是随着滚动条滚动而滚动，

当到达top值之后，元素就不会随着滚动条滚动而滚动了

3、粘滞定位是后来增加的定位方式，注意它的兼容性，一般兼容到ie9以上

4、粘滞定位的原点也是浏览器视口，也就是html根标签

主要的应用场景

1、侧边导航

2、广告

3、顶部导航，底部导航

粘滞定位（一般用于页面导航的吸顶效果)

-当元素的position属性设置为sticky时，则开启了元素的粘滞定位

（1）以浏览器为参照物（体现固定定位特点）；

（2）占有原来位置（体现相对定位特点）；

　　（3）粘滞定位可以在元素到达某个位置时，将其固定

(4)没有达到top值之前正常显示，达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动

在定位情况，元素的水平方向，增加了两个值，从原来的7个值变为9个值

但依然遵循过度约束的原则，即水平方向9个值相加必须要等于其父元素内容区的宽度

如果不等于的话，浏览器就会进行约束调整：

left margin-left border-left padding-left width

padding-right border-right margin-right right

0 0 0 0 100 0 0 0 0 =400

如何调整：

1、如果9个值中没有auto，调整的就是right

2、如果有auto，9个值当中，有left margin width right 4个值可以设置auto

1个auto

left margin width right 中设一个auto，其他的值为固定值

浏览器就调整这个auto

2个auto

left margin 调整的就是left

left width 调整的就是left

left right 调整的就是right

margin width 调整的就是width

margin right 调整的就是right

width right 调整的就是right

3个auto

left margin width 调整的就是left

left margin right 调整的就是right

margin width right 调整的就是right

4个auto

left margin width right 调整的就是right

总结：

1、如果9个值当中，没有auto，调整的就是right

2、如果9个值当中，有auto，调整的顺序

right>left>width>margin

3、在绝对定位的情况，如果right，left，top，bottom，width为固定值

margin为auto，元素就会水平垂直居中

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>当当图书榜</title><style>* {margin: 0px;padding: 0px;list-style: none;text-decoration: none;}.clearfix::after {content: '';display: block;clear: both;}.c {width: 1000px;height: 100px;margin: 0 auto;}.c1 {width: 1000px;height: 100px;position: relative;}.c1>img:nth-of-type(1) {width: 100px;height: 50px;position: absolute;left: 0;top: 0;}.c1>img:nth-of-type(2) {width: 30px;height: 25px;position: absolute;right: 200px;bottom: 25px;}.c2 {width: 280px;height: 25px;position: absolute;right: 0;bottom: 0;}.c2>li {width: 70px;line-height: 25px;float: left;}.c2>li>a {color: rgb(0, 155, 116);}.c3 {width: 986px;height: 50px;}.c3>li {width: 58px;line-height: 50px;float: left;background-color: rgb(254, 105, 21);}.c3>li>a {color: rgb(254, 255, 255);}.e1 {width: 1000px;height: 500px;position: relative;}.e4 {width: 100px;height: 20px;position: absolute;}.e3 {width: 500px;height: 250px;}.e3>img {width: 250px;height: 400px;}.e6 {width: 250px;height: 400px;position: absolute;left: 260px;top: 0;margin: 30px 0px;}.z1 {width: 500px;height: 400px;position: absolute;right: 0;top: 0;}.e {width: 1000px;height: 400px;border: 2px solid green;position: relative;}.z2 {width: 20px;height: 10px;position: relative;top: 0;right: 0;}.z4 {width: 300px;height: 200px;margin: -70px 100px;}.qq {width: 900px;height: 100px;margin: 0px auto;}.qq>span {color: rgb(175, 174, 174);}h4 {color: rgb(26, 102, 179);}.rr {color: rgb(142, 17, 43);}.tt {color: rgb(134, 173, 165);}</style>
</head><body><div class="c"><div class="c1 clearfix"><img src="./图片素材/logo.jpg" alt="logo"><img src="./图片素材/icon_count.png" alt="3折"><ul class="c2 "><li><a href="https://www.baidu.com/">尾品汇</a></li><li><a href="https://www.baidu.com/">当当优品</a></li><li><a href="https://www.baidu.com/">数字馆</a></li><li><a href="https://www.baidu.com/">都看阅器</a></li></ul></div><ul class="c3"><li><a href="https://www.baidu.com/">首页</a></li><li><a href="https://www.baidu.com/">图书 </a></li><li><a href="https://www.baidu.com/">音像 </a></li><li><a href="https://www.baidu.com/">童装</a></li><li><a href="https://www.baidu.com/">服装 </a></li><li><a href="https://www.baidu.com/">鞋靴 </a></li><li><a href="https://www.baidu.com/">运动</a></li><li><a href="https://www.baidu.com/">箱包</a></li><li><a href="https://www.baidu.com/">美妆 </a></li><li><a href="https://www.baidu.com/">珠宝 </a></li><li><a href="https://www.baidu.com/">家居 </a></li><li><a href="https://www.baidu.com/">食品</a></li><li><a href="https://www.baidu.com/">酒</a></li><li><a href="https://www.baidu.com/">手机</a></li><li><a href="https://www.baidu.com/">数码</a></li><li><a href="https://www.baidu.com/">电脑 </a></li><li><a href="https://www.baidu.com/">家电</a></li></ul><div class="c4"><img src="./图片素材/banner.png" alt="banner"></div><div class="e"><div class="e1 "><div class="e2 "><img src="./图片素材/bg_bang.gif" alt="bg"></div><div class="e3 clearfix"><div class="e4 clearfix"><img src="./图片素材/bookNo1.gif" alt="no1"></div><div class="e5"><img src="./图片素材/book-01.jpg" alt="book01"><div class="e6"><h4>偷影子的人</h4><ul><li>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</li><li>出版社：湖南文艺出版社</li><li>当当价： <span class="rr">￥ 17.90</span> </li><li>不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他</li></ul></div></div></div></div><div class="z1"><div class="z2"><img src="./图片素材/bookNo2.gif" alt="no2"></div><div class="z3"><img src="./图片素材/book-02.jpg" alt="bo0k2"></div><div class="z4"><h4>看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘 </h4><ul><li>作 者：柴静 著</li><li>出版社：广西师范大学出版社</li><li> <span class="rr"> ￥ 29.40 </span> <span class="tt"> 7.4折 </span></li></ul></div><div class="z2"><img src="./图片素材/bookNo3.gif" alt="no3"></div><div class="z3"><img src="./图片素材/book-03.jpg" alt="bo0k3"></div><div class="z4"><h4>改变孩子先改变自己 </h4><ul><li>作 者：贾容韬 贾毅 著</li><li>出版社：作家出版社</li><li> <span class="rr"> ￥ 22.20</span><span class="tt"> 7.4折</span></li></ul></div></div></div><div class="qq"><span>Copyright (C)当当网 2004-2017.All Riohts Reserved</span><img src="./图片素材/validate.gif" alt="va"><span>京ICP证041189号出版物经营许可证 新出发京批字第直0673号</span></div></div>
</body></html>

HTML基础学习——定位相关推荐

CSS基础学习——定位
目录 1. 定位 1.1 为什么需要定位 1.2 定位组成 1.2.1 定位模式 1.2.2 边偏移 1.3 静态定位 static(了解) 1.4 相对定位 relative(重要) 1.5 绝对定 ...
python零基础实例-零基础学习Python开发练习100题实例（1）
零基础学习Python开发练习100题实例(1) 2018-02-25 09:37:59 2864浏览 1.题目:有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? 程序 ...
html5代码_干货篇！零基础学习HTML5要用到的6款开发工具
HTML5不是一种编程语言,而是一种标记语言,是程序员开发网页必用的一种开发工具.目前来说HTML5技术是非常火爆的,而且有专家预估在未来的10年HTML技术都不会过时.HTML5前景好,来学HTML ...
零基础学习hadoop到上手工作线路指导（中级篇）
2019独角兽企业重金招聘Python工程师标准>>> 此篇是在零基础学习hadoop到上手工作线路指导(初级篇)的基础,一个继续总结. 五一假期:在写点内容,也算是总结.上面我们会 ...
Scala学习(一)--Scala基础学习
Scala基础学习摘要: 在篇主要内容:如何把Scala当做工业级的便携计算器使用,如何用Scala处理数字以及其他算术操作.在这个过程中,我们将介绍一系列重要的Scala概念和惯用法.同时你还将学 ...
列表怎么有限的初始化为零_《零基础学习Android开发》第五课类与面向对象编程1-1...
视频:<零基础学习Android开发>第五课类与面向对象编程1-1 类的定义.成员变量.构造方法.成员方法一.从数据与逻辑相互关系审视代码通过前面的课程,我们不断接触Java语言的知 ...
java学习_Python基础学习教程：从0学爬虫？让爬虫满足你的好奇心
Python基础学习教程:从0学爬虫?让爬虫满足你的好奇心有必要学爬虫吗? 我想,这已经是一个不需要讨论的问题了. 爬虫,"有用"也"有趣"! 这个数据为王的 ...
python入门经典100题-零基础学习Python开发练习100题实例（1）
零基础学习Python开发练习100题实例(1) 2018-02-25 09:37:59 2854浏览 1.题目:有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? 程序 ...
[转载] Python Web开发—进阶提升 490集超强Python视频教程真正零基础学习Python视频教程
参考链接: 在Python中创建代理Web服务器 2 Python Web开发-进阶提升 490集超强Python视频教程真正零基础学习Python视频教程 [课程简介] 这是一门Python We ...

HTML基础学习——定位

HTML基础学习——定位相关推荐

最新文章

热门文章