400-650-7353
您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】CSS定位如何使用

【Web前端基础知识】CSS定位如何使用

  • 发布: Web前端培训
  • 来源:Web前端干货资料
  • 2020-04-08 15:26:40
  • 阅读()
  • 分享
  • 手机端入口

3)绝对定位(absolute)

不占有位置,可以放在父级盒子的任意一个地方。

元素自动转为行内块,宽度和高度跟内容有关。

HTML

CSS

子绝父相/子绝父绝(挺重要)

子级是绝对定位,那么离他最近的父级一定要给一个相对定位(必要时给绝对定位),不然子级会以浏览器当前页面进行定位,有可能你会看不到它。

4) 固定定位(fixed)

固定定位脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置,跟父级没有关系。

完全脱标,滚动条滚动不会影响它在浏览器窗口中的位置。

元素自动转为行内块,宽度和高度跟内容有关。

HTML

CSS

浏览器

(2)边偏移

top顶端偏移量,定义元素相对于其父元素上边线的距离

bottom底部偏移量,定义元素相对于其父元素下边线的距离

left左侧偏移量,定义元素相对于其父元素左边线的距离

right右侧偏移量,定义元素相对于其父元素右边线的距离

 

文章“【Web前端基础知识】CSS定位如何使用”已帮助

>>本文地址:https://www.ujiuye.com/zhuanye/2020/48593.html

THE END  

声明:本站稿件版权均属中公教育优就业所有,未经许可不得擅自转载。

1 您的年龄

2 您的学历

3 您更想做哪个方向的工作?

获取测试结果
  • 大前端大前端
  • 大数据大数据
  • 互联网营销互联网营销
  • JavaJava
  • Linux云计算Linux
  • Python+人工智能Python
  • 嵌入式物联网嵌入式
  • 全域电商运营全域电商运营
  • 软件测试软件测试
  • 室内设计室内设计
  • 平面设计平面设计
  • 电商设计电商设计
  • 网页设计网页设计
  • 全链路UI/UE设计UI设计
  • VR/AR游戏开发VR/AR
  • 网络安全网络安全
  • 新媒体与短视频运营新媒体
  • 直播带货直播带货
  • 智能机器人软件开发智能机器人
 

快速通道fast track

近期开班时间TIME