ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前端布局之标准流、浮动、定位

2022-07-24 10:31:30  阅读:243  来源: 互联网

标签:浮动 定位 位置 盒子 前端 元素 参考点


浮动,很多布局标准流无法实现,需要用浮动脱标来完成。典型应用:让多个块元素一行显示。

  • 设置浮动(float)的元素:脱标(脱离标准流变成行内块元素),浮动到指定位置。原来占有的位置不保留。
  • 一般是在标准流父盒子里摆浮动子盒子(类似table方式摆盒子,达到布局要求),此时父盒子宽高不会被子盒子撑开,还是原始大小。
  • 如果一个子元素浮动了,尽量其他盒子也浮动,这样保证这些子元素一行显示
  • 清除浮动,两个标准流的父盒子div1(内含两个浮动子盒子)、div2,div1无高度,div2有高度,div2会叠在两个子盒子下面,div2文字不会被遮挡。在二者中间加<div style='clear: both;'></div>解决(隔墙法)。此时div1宽高自动随子盒子(电商产品显示div,高度由n多商品子盒子决定)。不加标签办法:在div1加overflow: hidden;
<style>
	.box {
            float:right;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
</style>
<div id='div1'>
	<div class='box'>111</div>
	<div class='box'>222 </div>
</div> 
<div style='clear: both;'></div> 
<div id='div2' style='height:100px'>底部</div> 

定位,有些布局,标准流和浮动无法快速实现,此时需要定位来实现。

  • 定位是让盒子自由的在某个盒子内移动位置和定在某个位置,并且可以压住其他盒子。
  • 定位 = 定位模式 + 边偏移
  • 边偏移:top、bottom、left、right 4个。如top:12px,元素相对于其父元素上边线距离12px。
  • 定位模式:static 静态定位、relative相对/absolute绝对/fixed固定/inherit继承/sticky粘性
  • relative,不脱标,保留原来位置。移动参考点是自己原来位置(自恋型)。
  • absolute,移动参考点是相对于祖先元素来说(拼爹型)。无祖先元素或祖先无定位,则以浏览器为准定位。祖先有定位则以最近一级有定位祖先为参考点移动位置。自动转成行内块元素。
  • fixed,元素固定于在浏览器可视区的位置。是一种特殊绝对定位。浏览器可视窗口(祖先元素)为参考点移动位置。自动转成行内块元素。
  • z-index,定位叠放次序。值越大越靠上(z轴)。值相等则后写居上。仅定位的盒子才有z-index。绝对和固定定位会压住下面标准流所有内容。

  • 布局原则:标准流管上下,浮动管左右,自由定位用定位。

标签:浮动,定位,位置,盒子,前端,元素,参考点
来源: https://www.cnblogs.com/anjun-xy/p/16514004.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有