css提供了三种传统布局的方式，即盒子进行排列顺序的方法
1.标准流
就是标签按照规定好的默认方式排列
（1）块级元素独占一行，从上到下垂直布局，独占一行
常用元素有：div、hr、p、h1~h6、ul、ol、dl、table
（2）行内元素，从左到右水平布局
常用元素有：span、a、i等
（3）行内块元素，从左到右水平布局
2、浮动
作用：让垂直布局的盒子变成水平布局，如一个在左，一个在右
代码：属性名：float
属性值：left 左浮动
right 右浮动
浮动的特点：
（1）浮动元素会脱离标准流（简称：脱标），在标准流中不占位置， 相当于从地面飘到了空中 （2） 浮动的盒子不在保留原有的位置，其他的标准流盒子会移动过来 （3） 如果多个盒子都设置了浮动，则他们会按照属性值一行内显示，并且顶端对齐排列 （4） 浮动元素会受到上面元素边界的影响 （5） 浮动元素会具有行内块元素的特性： 一行可以显示多个 可以设置宽高 注意点： 浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中 3.定位 作用：元素可以自由在一个盒子内移动位置，或者固定在屏幕的某个位置 定位的组成：定位模式+边偏移 边偏移| 属性 | 属性值 | |
| top | 数字+px | 顶端偏移量 |
| bottom | 数字+px | 底部偏移量 |
| left | 数字+px | 左侧偏移量 |
| right | 数字+px | 右侧偏移量 |
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
元素默认的定位方式，无定位的意思 选择器{ position:static; } 静态定位是标准流，不能通过方为属性进行移动 （2）相对定位 元素移动位置时，是相对于它原来的位置来说的，位置还是保留的（不脱标），其他盒子不会占有 选择器{ position：relative; } 特点：需要配合方位属性 相对于自己原来的位置进行移动 在页面还是占位置的（不脱标） 应用于小范围的移动 （3）绝对定位 相对于非静态的父元素进行定位移动的 选择器{ posation:absolute } 特点：配合方位属性 默认相对于浏览器的可视范围内移动 在页面中不占位置，已脱标 绝对定位到底是相对于谁进行偏移？ 祖先元素中没有定位，默认相对于浏览器进行偏移 祖先元素中有定位，相对于最近的有定位的祖先元素进行偏移 子绝父相： 让子元素相对于父元素进行自由移动 子元素：绝对定位（absolute） 父元素：相对定位（relative） 优点：父元素是相对定位，对网页布局影响最小 （4）固定定位 始终相对于浏览器进行定位移动 选择器{ position:fixed; } 特点： 需要配合方位属性 相对于浏览器可视区域移动 在页面中不占位置，已脱标 一般用于让盒子固定在屏幕中的某个位置
标签：浮动,定位,盒子,元素,相对,移动 来源： https://blog.csdn.net/weixin_55802485/article/details/120959257
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。