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

九路 等级 511 0 0

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

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

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

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

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

一、普通定位(Static)

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

二 . 相对定位(relative)

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

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

结果

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

三 . 绝对定位(absolute)

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

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

结果

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

四 .固定定位(fixed)

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

最后

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

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

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

父相子绝(即父元素使用相对定位,子元素使用绝对定位,一起结合实现布局。)

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

收藏
评论区

相关推荐

干货 | CSS中的四种定位有什么区别?
我们都知道,前端开发里面的CSS中常用的定位方式有 普通定位,相对定位,绝对定位、固定定位定位这四种。 但是很多零基础的前端小白都不知道这4种定位方式都有什
《css大法》之使用伪元素实现超实用的图标库(附源码
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形。 预备知识 伪元素 伪元素是一个附
《前端实战总结》之使用纯css实现网站换肤和焦点图切换动画
今天我们来继续复盘一些工作中常用的css技巧和知识,以便我们可以更加优雅的用css实现富有动感的网站. 你将收获 网站换肤设计方案介绍 :target伪类介绍和用法以及如何使用css实现网站换肤 transition动画以及如何用纯css实现焦点图动画 效果展示 1.网站换肤 (https://imghelloworld.ossc
巧用css圆角实现有点意思的加载动画
作为一名前端工程师, 需要对css技巧有充分的研究和了解, 接下来笔者将会带大家一起掌握如何用css的圆角属性来实现有点意思的加载动画. 如果想学习更多css实用技巧, 可以参考笔者以下的文章: <div style"display:flex; flexwrap:wrap; alignitems: center;" <a href"https:/
CSS Modules 解决 react 项目 css 样式互相影响的问题
CSS Modules 解决 react 项目 css 样式互相影响的问题 CSS Modules 解决 react 项目 css 样式互相影响的问题 (http
css之元素居中
行内元素居中 文本垂直居中 单行文本垂直居中 设置lineheight与盒子高度一样就行 这里有一个误区,我经常在设置单行文本居中的时候,会习惯性的设置height属性与linheight属性一样,其实完全没必要,只设置lineheight就行,这时候盒子的高度由lineheight撑起来,与height完全相同。 多行文本垂直居中 1. ve
30个前端开发人员必备的顶级工具
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。 (https://imghelloworld.osscnbeijing.aliyuncs.com/2e7966318084a45d05a0926cbd749a02.png) 目录 CSS代码生成器 CSS3 Generator
有关CSS预编译、管理工具和网络安全的相关面试题
我经常会听到一些想入行前端的人问,前端开发需要学习哪些技术?其实,除了核心的HTML、CSS、JavaScript技术外,像CSS预编译、前端框架,如Vue,React、Node、Angular;代码管理工具,如git,代码编辑器,sublime text,还有测试,网络安全等相关技术也是需要会一些。当然要求可能不会那么高,但至少要懂一些。所有今天准备了一些
Vue进阶(幺柒陆):CSS预编译语言Sass、Scss、Less和Stylus
什么是CSS预处理器CSS预处理器定义了一种新的语言,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
你可能不知道的10个CSS新功能(2021版)
多年来,CSS已经超越了背景颜色、边框、文本样式、边距和盒模型。现代CSS能够提供一系列的功能,而在过去,您需要JavaScript或变通方法来实现这些功能。 为了庆祝它在2021年取得的成就,在这篇文章中,我们想看看一些你可能不知道的令人惊叹的CSS新特性。我们将强调web设计人员和开发人员可以用现代CSS做的很酷的事情,讨论用例,浏览器支持,并给你一个
如何提高CSS性能
结合现代网站的复杂性和浏览器处理 CSS 的方式,即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分,所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验,这也需要优化你的CSS。本篇文章将涵盖CSS会导致哪些性能问题,以及如何制作不妨碍人们使用的CSS的最佳实践。 目录 CSS是如何工作的?
几个有点意思的 CSS 技巧
如果你是一名前端开发人员或者想成为一名开发人员,那么,我今天与你分享的9个CSS技巧,你需要知道一下。现在,我们开始吧。1、学习盒子模型你在学习 CSS 时,应该避免使用Bootstrap或TailwindCSS等框架,这些工具非常适合构建漂亮的网站,但如果你还不能正确的了解 CSS,则建议不要使用这些框架中的任何一个。因为如果你使用了这些工具,你将无法学习
小白怎么成为一个黑客?按照这个路线来!
大家好,我是周杰伦。接下来我会写系列的文章,给大家整理下网络安全的详细的学习步骤和学习资源推荐。今天的主题是——Web安全。Web安全是网络渗透中很重要的一个组成部分,今天跟大家聊一下,如何在三个月内从零基础掌握Web安全。 第一个月第一周:HTML+CSS,学会网页基本格式,学会编写基本网页,表单,学会用浏览器F12检查元素,查看源码 推荐学习地址: H
javascript实践教程-01-javascript介绍
本节目标1. 了解javascript是什么。2. 了解javascript能干什么。 内容摘要本篇介绍了javascript是什么,为什么要用javascript,ECMAScript标准是什么等。阅读时间大约510分钟。 javascript是什么?javascript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HT