干货 | CSS中的四种定位有什么区别？-低调大师

干货 | CSS中的四种定位有什么区别？

2020-07-23 541

我们都知道，前端开发里面的CSS中常用的定位方式有

普通定位，相对定位，绝对定位、固定定位定位这四种。

但是很多零基础的前端小白都不知道这4种定位方式都有什么作用和区别，在使用的时候都很不灵活，要知道，想做好网页布局，这4个定位方式都是精髓呀，学好定位布局，前端开发轻轻松松！

那么今天我们就来讲解一下CSS中这4种定位的作用和区别！帮助大家搞清楚这4种布局的妙用！

一、普通定位(Static)

　　在我们的开发过程中，除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。这个就不过多描述了。

二 . 相对定位（relative）

　　在我们前端开发中，relative相对定位一直被看作普通文档流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。

结果

三 . 绝对定位（absolute）

在前端开发中，相对于已定位的最近的父类元素，如果没有已定位的最近的父类元素，那么它的位置就相对于最初的包含块（如body）。绝对定位的框可以从它的包含块向上、右、下、左移动。

结果

四 .固定定位（fixed）

　　相对于浏览器窗口，其余的特点类似于绝对定位。fixed元素就是固定在浏览器某个位置的元素，绝对定位是固定在页面的，如果滚动滚动条的话绝对定位的元素也会滚上去，fixed元素不会。

最后

这几种定位方式各有千秋，很多小白就经常问老李了，我们写页面的时候，这4种布局方式应该用哪个呢？（这问题一听就很小白了）

最后给大家说一下吧，在我们现在专业的前端开发工作中，用的最多的不是绝对定位，也不是相对定位，而是绝对定位和相对定位的结合使用。（小白：WTF????合体？？？）

并不是合体出现什么新的定位方法啦。而是我们去前端开发中的一种布局书写规范：

父相子绝（即父元素使用相对定位，子元素使用绝对定位，一起结合实现布局。）

这种布局规范是现阶段前端开发公认的布局方法，也能避免很多错误的出现。如果你还不知道怎么使用“父相子绝”，那就快关注我吧！跟着老李从小白变成前端大神！

喜欢就点一下「好看」呗~

本文分享自微信公众号 - 前端研究所（WEBqdyjs）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

微信关注我们

原文链接：https://my.oschina.net/LiJiaJing/blog/4423190

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

一文入门DNS？从访问GitHub开始

前言大家都是做开发的，都有GitHub的账号，在日常使用中肯定会遇到这种情况，在不修改任何配置的情况下，有时可以正常访问GitHub，有时又直接未响应，来一起捋捋到底是为啥。 GitHub访问的千层套路以我家里的电脑为例，在不修改任何配置，不启用什么代理工具的情况下，访问GitHub会得到以下结果： 😂😂😂 虽然很戳心，但好歹能展示一部分。从网上搜了一堆乱七八糟的攻略，知道了可以通过修改电脑的Hosts文件达到正常访问的能力，于是胡搜了一通，步骤：百度经验效果如下：访问效果依然很感人，最近活动数据不显示，整个界面加载都快接近2分钟了，有什么办法没有咧~ 站长工具 PING PING PING 都是搞开发的，都会用F12看看网络或者资源请求的地址是什么，以上面耗时最慢的地址为例，域名为：github.githubassets.com 打开站长工具的PING功能，地址为：http://ping.chinaz.com/github.githubassets.com 结果如下：我发现 185.199.108.154 这个IP地址速度快的一批，于是立马更换 Hosts中该域名...

2020-07-23

640

老孟导读：此文讲解3个酷炫的3D动画效果。下面是要实现的效果： Flutter 中3D效果是通过 Transform 组件实现的，没有变换效果的实现： classTransformDemoextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text('3D变换Demo'),),body:Container(alignment:Alignment.center,color:Colors.white,child:Text('3D变换Demo'),),);}} 通过 GestureDetector 组件添加滑动事件监听： @overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text('3D变换Demo'),),body:GestureDetector(onPanUpdate:(details){print('$details');},child...

2020-07-23

779

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。