当前位置: 首页 > Web前端 > HTML5

定位布局分析

时间:2023-04-05 18:17:10 HTML5

定位布局分析为什么需要定位?1.浮动可以让多个会计框无间隙并排显示,常用于水平排列框。2、定位让盒子在某个盒子内自由移动或固定在某个位置,并可以压住其他盒子。定位方式:1.position:relative(相对定位),是根据自己的offset来定位的,引用对象是自己,会继续保留原来的位置,不会脱离外面的文档流。2.position:absolute(绝对定位),根据父元素是否有定位来定位,如果祖先元素没有定位,则根据浏览器(document文档)定位,如果祖先元素有定位(relative,absolute,fixed)是基于就近原则引用的,不保留原位置,文档流与外界隔离。3、父子关系原则:绝对定位,没有位置,可以放在父盒子的任意位置,不会影响其他兄弟盒子。parent需要添加定位限制子box在parentbox中显示,相对定位最合适,parentbox不会脱标。4.position:fixed(固定定位),以浏览器可见窗口为参考点移动元素,与父元素无关,不随滚动条滚动,固定位置不占据原位置.固定定位的技巧:固定在核心一侧:先将元素移动到浏览器的一半,然后设置合适的边距值。定位方式是否为标签外。相对定位。否(占位)。相对于自己的位置移动。绝对定位。是(不占位置)。使用定位固定父级定位。sticky定位是(占用的位置)浏览器可视区域static静态定位没有默认######注意!1.定位可以通过z-index改变层级2.定位也可以用来水平居中块级框:1.给parent设置position-relative相对定位,然后给自己的框设置position绝对定位,value顶部:0;左:0;右:0;底部:0;保证金:自动;可以居中。2.parent相对定位,child绝对定位,取值top:50%;左:50%;然后将适当的边距值设置为中心。3、内联元素定位后,将具有内联块元素的特性,可以直接设置宽高。4.设置定位后,盒子水平居中。保证金:0自动;无效的。您可以通过设置值top:0来使用边距值;左:0;右:0;底部:0;。