前端静态页面小米官网实现--人生第一个项目--心得 1，第一就是位置的判断，Position 分为两个其中，relat

小米官网实现--人生第一个项目--心得

1，第一就是位置的判断，Position 分为两个

其中，relative 元素的位置发生偏移后，其原始位置仍然保留在页面中，对其他元素造成影响

应用场景：父容器设置relative,为子元素absolute定位提供参考点

2，微调位置，轻微调整元素相对于原位置的偏移，比如按钮的调整，图标的对齐

其中，absolute元素脱离文档流，不会占据空间，不影响其他元素的布局，通过TOP,LEFT,RIGHT,BOTTOM属性，相对于最近的定位祖先进行定位

应用场景：精确布局，用来精确定位某些元素，比如弹窗，工具提示，悬浮按钮

2，与子容器配合实现居中，配合position,relative 的父容器，实现子元素的居中

3,就是无序列表的标签

通常用于创建一组，没有顺序或者优先级关系的项目列表

例如代码

表示这个div就是黑色导航栏主要容器

通过css,我们通常设置背景颜色是黑色，同时控制他的宽度，高度和定位

这个是内部容器

外部容器wrap

wrap是用于限制导航栏内容宽度的容器

常用方法是设置一个固定高度，将内容居中