定位方式4+1

position定位

静态定位(文档流定位):是元素的默认定位方式

格式:position:static

元素显示特点: 块级元素从上到下排列,行内或行内块元素从左向右排列,元素不易实现层叠效果

如何控制元素的位置: 通过外边距.

相对定位

格式:position:relative

元素显示特点: 元素不脱离文档流(元素不管显示到什么位置 仍然占着原来的位置)

如何控制元素的位置: 通过top/left/right/bottom控制元素的显示位置,坐标相对于初始位置

应用场景: 当需要移动某个元素,但移动该元素时不影响其它元素的显示效果,这时使用相对定位,如果做位置微调使用相对定位

绝对定位

格式: position:absolute

元素显示特点: 元素脱离文档流(当元素设置为绝对定位时会让出自己所占的位置)

如何控制元素的位置: 通过top/left/right/bottom控制元素位置,坐标相对于窗口(默认)或某一个上级元素(添加相对定位)

应用场景:如果移动到的位置是某个上级元素的角落使用绝对定位,如果需要往页面中添加一个元素而且不希望影响现有的显示效果(也就是不在文档流里面)使用绝对定位

固定定位

格式: position:fixed;

元素显示特点: 元素脱离文档流

如何控制位置: 通过top/left/rigth/bottom控制元素位置,坐标相对于窗口.

应用场景: 需要将元素固定在窗口的某个位置,并且不随着内容位置改变而改变

####浮动定位

格式: float:left/right;

显示特点: 元素脱离文档流,元素从当前行向左或向右浮动,当撞到上级元素边缘或其它浮动元素时停止

如何控制元素位置: 通过外边距

如果元素的所有子元素全部浮动,则元素自动识别的高度为0,通过给元素添加overflow:hidden解决.

应用场景: 当需要将纵向排列的元素改成横向排列时使用浮动定位

###行内元素的对齐方式vertical-align

top 顶部对齐

bottom 底部对齐

middle 中间对齐

baseline 基线对齐(默认)

####布局练习步骤:

给big设置宽度1000 并通过外边距0 auto居中

第一行里的div设置宽高一个左边浮动 一个右边浮动

第一行和第二行div都设置overflow:hidde

第二行里面的div设置宽高,一个左边浮动,剩下3个

右边浮动

练习

1.相对定位

显示效果:

2.绝对路径

显示效果:

3.绝对定位练习

测试绝对定位

测试结果:

4.定位练习

用户名不能为空!

测试效果:

5.固定定位

显示效果:

滚动页面时红色框中内容不动

6.浮动定位

显示效果:

7.学子商城练习

电脑,办公/1F

电脑整机

• 笔记本
• 游戏机
• 台式机
• 一体机
• 服务器
• 联想

电脑配件

• CPU
• SSD硬盘
• 显示器
• 显卡
• 组装电脑
• 机箱

外设/游戏

• 键盘
• 鼠标
• U盘
• 移动硬盘
• 游戏设备
• 智能单车

显示效果:

8.行内对齐方式

显示效果:

9.布局练习

显示效果:

5G游戏 web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。