干货 | CSS中的四种定位有什么区别?
我们都知道,前端开发里面的CSS中常用的定位方式有
普通定位,相对定位,绝对定位、固定定位定位这四种。
但是很多零基础的前端小白都不知道这4种定位方式都有什么作用和区别,在使用的时候都很不灵活,要知道,想做好网页布局,这4个定位方式都是精髓呀,学好定位布局,前端开发轻轻松松!
那么今天我们就来讲解一下CSS中这4种定位的作用和区别!帮助大家搞清楚这4种布局的妙用!
在我们的开发过程中,除非专门指定,否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。这个就不过多描述了。
在我们前端开发中,relative相对定位一直被看作普通文档流定位模型的一部分,定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。
结果
在前端开发中,相对于已定位的最近的父类元素,如果没有已定位的最近的父类元素,那么它的位置就相对于最初的包含块(如body)。绝对定位的框可以从它的包含块向上、右、下、左移动。
结果
相对于浏览器窗口,其余的特点类似于绝对定位。fixed元素就是固定在浏览器某个位置的元素,绝对定位是固定在页面的,如果滚动滚动条的话绝对定位的元素也会滚上去,fixed元素不会。
最后
这几种定位方式各有千秋,很多小白就经常问老李了,我们写页面的时候,这4种布局方式应该用哪个呢?(这问题一听就很小白了)
最后给大家说一下吧,在我们现在专业的前端开发工作中,用的最多的不是绝对定位,也不是相对定位,而是绝对定位和相对定位的结合使用。(小白:WTF????合体???)
并不是合体出现什么新的定位方法啦。而是我们去前端开发中的一种布局书写规范:
父相子绝(即父元素使用相对定位,子元素使用绝对定位,一起结合实现布局。)
这种布局规范是现阶段前端开发公认的布局方法,也能避免很多错误的出现。如果你还不知道怎么使用“父相子绝”,那就快关注我吧!跟着老李从小白变成前端大神!
喜欢就点一下「好看」呗~
本文分享自微信公众号 - 前端研究所(WEBqdyjs)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道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中该域名...
- 下一篇
Flutter 实现酷炫的3D效果
老孟导读:此文讲解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...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7设置SWAP分区,小内存服务器的救世主
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Red5直播服务器,属于Java语言的直播服务器
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS8编译安装MySQL8.0.19
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装