position 再谈

absolute

本身具有脱离文档流,不占有文档的位置, 在原来的上方, 定位后会输入top等值会离开原来的位置,以文档的左上角点位.

与浮动的区别是: 浮动文字会环绕,而absolute底下的文字会上移被覆盖, 1块下面是文字,

header 是个块; 底下有文字

aside section footer

absolute 在页面任意定位, 而浮动这回上移的左上角.

先后问题,在HTML页面的前后顺序排列与css的顺序无关, z-index可以决定他们的先后.

跟随性:会跟着文档走,但是下方文字会上移, 如果加的top letf定位就会以窗口移动

fixed

脱离文档流, 随着滚动条变动而变动.以窗口的左上角,与absolute(文档)不同, 同absolute一样,没定位时,跟随文档,定位及以窗口移动.

relative

不脱离文档流,在自己原来的基础上发生偏离(如body 或其他块元素等).,也有top等值来移动定位. 而不是同absolute和fixed的窗口或文档的左上角移动 . 用padding 会挤占, 用定位会有位移有层的效果,就像脱离文档流一样,只是位置还站着, 其他元素不会移动,发生覆盖.

就是不会像absolute和fixed一样 ,文字上移站他的位置. 不同的的是relative的定位是以他的父元素位移,而不是窗口.

实际使用

现在父元素设置一个参考点 (relative), 在用absolute设置成脱离文档流的具有绝对定位. 但实际上可以不用relative这一步, 只用absolute的跟随性,就可完成区域的绝对定位.

header设置成立absolute,宽度和高度要重新设置,因为浮动了, 如果上一层有没有浮动, 第二层浮动后 ,下面的文字会在二层快位置左边浮动.

border-box (padding和border会撑大快的宽度,即使浮动后 ,左边的aside是20,右边的section是80,section会下移动,宽度不够了, 这是用border-bor自动减)

content-box 是默认值 border-box是不用于总长度,自动减

border-box 让 border 和 padding 不在额外增加元素大小

aside {

       width: 200px;height: 500px;background-color: purple;padding: 10px;border: 5px solid red;box-sizing: border-box;float: left;} // border 主要是让边框 内填充  外边距 自动跟总宽度一起计算,自动减去.

//完整形式
-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

box-sizing: border-box;

这个就是在右下角出现一个可以放大缩小的东西.

aside {

resize: both;

    overflow:auto;
}

转载于:https://www.cnblogs.com/ningjie/p/9597235.html

position 再谈相关推荐

【徒手写机器学习算法】再谈数据源:从普通图片到Cifar-10(使用C++)
[徒手写机器学习算法]再谈数据源:从普通图片到Cifar-10(使用C++) 在本系列的第一篇文章里,关于机器学习的数据源的问题被一笔带过(使用csv格式的数据),这一篇文章我会给出关于图片数据制作的 ...
再谈JSON -json定义及数据类型
再谈json 近期在项目中使用到了highcharts ,highstock做了一些统计分析.使用jQuery ajax那就不得不使用json, 可是在使用过程中也出现了非常多的疑惑,比方说,什么情况 ...
C++_动态绑定,再谈const，new，delete
C++_动态绑定,再谈const,new,delete
再谈HTTP2性能提升之背后原理—HTTP2历史解剖
即使千辛万苦,还是把网站升级到http2了,遇坑如<phpcms v9站http升级到https加http2遇到到坑>. 因为理论相比于 HTTP 1.x ,在同时兼容 HTTP/1.1 ...
再谈工作的主动性和有效提问
主动性是一个非常奇怪的词,每个人对这个词的理解都不一样.可能一个管理者对员工说,你要提高主动性,但是员工会非常苦恼,甚至崩溃:我都天天加班了,你居然还在谈提高主动性? 结合很多应届生在实际工作中遇到的 ...
再谈符号间干扰（一）
在对话通信原理系列相关博文中,有这么一篇博文:通信系统之信道,这篇博文里面已经讲过符号间干扰(ISI),发生符号间干扰的原因在于信号带宽大于相干带宽,同一个意思的表达为:发送符号的周期小于最大时延扩展 ...
我的WCF之旅 (11): 再谈WCF的双向通讯-基于Http的双向通讯 V.S. 基于TCP的双向通讯...
在一个基于面向服务的分布式环境中,借助一个标准的.平台无关的Communication Infrastructure,各个Service通过SOAP Message实现相互之间的交互.这个交互的过程实 ...
“云计算”三部曲之二：与“云”共舞——再谈云计算
引言:去年,我曾在一篇名为<未来计算在"云-端">的文章中指出,纯"云计算"并不是启动计算未来的"万能钥匙","云+端 ...
依图又斩获10冠！AI芯片拿下创新技术大奖，朱珑再谈智能密度
乾明李根发自厦门量子位报道 | 公众号 QbitAI 依图的AI芯片究竟怎么样? 今天国内规格最高的技术评选给出参考. 8月9日,由工信部.公安部及网信办三部委指导主办的"中国人 ...

position 再谈

position 再谈相关推荐

最新文章

热门文章