前端3 浮动布局,固定定位,绝对定位,相对定位

Posted 2021-02-04 robert-zhou

浮动布局:
让块级标签在父级的宽度限制下同行显示,一行显示不下,自动换行
注意:要达到一行显示个数固定,一定要固定父级的宽度

语法:
子级:{float:left|right}

问题:子级不再撑开父级高度(不完全脱离文档流)
脱离文档流:层次结构会上移,覆盖有位置重叠且没脱离文档流的标签
不完全:浮动布局后,可以重新让子级撑开父级高度
清浮动:让不完全脱离文档流的子级重新撑开父级的高度,这种做法就叫做清浮动
语法:
父级:after{
content:"";
display:block;
clear:both;}

浮动后,如果不清浮动,由于父级未有设置宽度,而子级不再撑开父级,父级的兄弟标签就会上移被覆盖

定位布局:
固定定位:
盒子相对于屏幕完成位置布局,不会随着屏幕内容的滚动而滚动(相对于屏幕窗口是静止的)且和页面内容发生
重叠时,该布局下的内容显示层次更高(覆盖其他内容)

语法:
position:fixed;

1.参考系为页面窗口
2.一旦设置定位属性,top,bottom,left,right四个方位
(是定位属性盒子特有的)均可以参与布局
3.上下取上,左右取左
4.固定定位会完全脱离文档流(永远不会撑开父级高度,布局中一定父级一定要自己设置高度)
5.完全脱离文档流的盒子显示层次高于不脱离文档流的盒子
两个完全脱离文档流盒子的显示层次以z-index(脱离文档流盒子特有的)改变显示层次的顺序(值大者覆盖值小者)

绝对定位:
兄弟标签之间不相互影响,都参与父级的显示区域来完成布局
position:absolute
绝对定位总结:
你设定的父级如果没有定位,会将html页面作为参考
1.参考系为最近的定位父级(父级一般采用相对定位relative来辅助子级绝对定位)
2.其他同固定定位

相对定位:
父级使用相对定位可以选择自己的布局,然后多个子级选择绝对定位,互不影响的布局
核心用处 父相子绝
position:relative
1.参考系为自身原有位置
2.一旦设置定位属性,top|bottom|left|right四个方位均可以参加布局
3.top= -bottom | left = -right
4.相对定位,不脱离文档流:不会影响自身布局,自身布局采用的还是原来的布局
注:相对定位 定位方位只会改变显示图层
不会改变盒子的原有位置,原有位置不变就不会影响兄弟盒子

过渡动画
持续时间
transition(过渡)-duration(持续)
transition-duration:3s
延迟时间:默认0
transition-delay:1s
过渡属性:默认all
transition-property:all
过渡曲线:默认ease(灵活)
ease ease-in ease-out ease-in-out linear(匀速)
cubic-bezier(0.83,1.46,0,-1.29);
贝塞尔曲线

简写:持续时间,延迟时间,过渡属性,运动的贝塞尔曲线
transition: 2s 1s all cubic-bezier(0.83,1.46,0,-1.29);

transition: .3s linear