码迷,mamicode.com
首页 > 其他好文 > 详细

定位体系之浮动

时间:2020-06-19 20:46:11      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:foo   sid   evel   并且   查找   初始化   问题   产生   文档   


子绝父相


position: relative;相对位置(常规流)
移动后还是只占原来位置

绝对定位:
position:absolute绝对位置

position:fixed固定位置

绝对定位的包含块:视口
起点是浏览器左上角开始进行位置偏移

注:如果没有给定4个方向的值,元素是在原有位置

特点:
会一直在视口进行显示

适用场景:
1、aside广告(左下)(右下)(左右侧边栏)
2、PC的header固定
3、移动footer的固定

产生问题:
脱离文档流后,原来位置不会继续占用,覆盖下面内容。

比如:
1、导航覆盖兄弟元素内容
2、两个绝对定位的元素相互覆盖

如何解决:
1、给被覆盖元素的上外边距
2、堆叠级别(设置谁在上,谁在下)

堆叠级别:(stack level)
他决定了元素谁显示在前谁显示在后

堆叠级别越高,显示在越前
z-index


绝对位置
如何确定包含块
1、查找最近的包含块当前标签的祖先元素,并且祖先元素的position属性不等于static

2、如果所有祖先元素,position都等于static,则包含块是初始化包含块,起点是视口左侧

常见错误:
如果只给了position的值,却没给4个方位的偏移量,当前元素不会去包含块的内容盒。

当absolute与fixed的包含块相同时,效果有什么区别?
拖动滚动条时,absolute会与内容进行移动,而fixed一直会在页面(视口)显示

当给定的方向值发生冲突时
列1:
left:0并且right:0 则left获胜
列2:
top:0并且bottom:0 则top获胜

使用场景:
两个或多个标签需要重叠展显时
比如
商店打折放到右上角

position:absolute
依次判断元素是否拥有position≠static的祖先元素,如果是,就是该元素的填充盒
依次判断元素是否拥有position=static的祖先元素,如果是,那就是初始化包含块

 

盒模型中的auto值
属性 绝对定位
margin-left:auto 0px
margin-right:auto 0px
margin-bottom:auto 0px
margin-top:auto 0px
width:auto 适应内容宽度
height:auto 适应内容高度


浮动

当元素的float属性取值为left或right时,元素属于浮动定位
默认值:none
取值:none left right
float属性:一开始用来文字环绕,并不是用来布局。

浮动元素的弊端:
子元素浮动,导致父元素高度塌陷
条件是父元素高度为auto
原理:子元素是常规流时会占用实际尺寸;子元素是浮动时不会占用实际尺寸;即子元素高度为0,导致父元素也没有高。

由于子元素浮动导致父元素高度塌陷
解决方式:清除浮动
第一步:给父元素添加伪元素
::after是伪元素
它是当前标签的最后一个子元素
::before是伪元素
它是当前标签的第一个子元素
第二步:对after设置声明
content:“”;
clear:both;
display:block;


AD:广告 AC:空调

 

粘性定位
注:
1、给方位值
2、父元素高度大于粘性定位高度

 

定位体系之浮动

标签:foo   sid   evel   并且   查找   初始化   问题   产生   文档   

原文地址:https://www.cnblogs.com/yangzisong/p/13166242.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!