css中的定位有哪些？差别在哪？
发布时间：2022-01-20 16:10:39 所属栏目：语言 来源：互联网
导读：css中的定位有哪些？ 在CSS中，定位的方式有普通定位，相对定位，绝对定位、固定定位定位这四种，对新手来说，可能对这四种定位方式的区别不是很了解，对此这篇文章就给大家分享一下css中的四种定位及它们的区别，感兴趣的朋友就继续往下看吧。 一、普通定位
|
css中的定位有哪些？ 在CSS中，定位的方式有普通定位，相对定位，绝对定位、固定定位定位这四种，对新手来说，可能对这四种定位方式的区别不是很了解，对此这篇文章就给大家分享一下css中的四种定位及它们的区别，感兴趣的朋友就继续往下看吧。 一、普通定位(Static) 在我们的开发过程中，除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。这个就不过多描述了。 二 . 相对定位（relative） 在我们前端开发中，relative相对定位一直被看作普通文档流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。 结果 三 . 绝对定位（absolute） 在前端开发中，相对于已定位的最近的父类元素，如果没有已定位的最近的父类元素，那么它的位置就相对于最初的包含块（如body）。绝对定位的框可以从它的包含块向上、右、下、左移动。 结果 四 .固定定位（fixed） 相对于浏览器窗口，其余的特点类似于绝对定位。fixed元素就是固定在浏览器某个位置的元素，绝对定位是固定在页面的，如果滚动滚动条的话绝对定位的元素也会滚上去，fixed元素不会。 最后 这几种定位方式各有千秋，很多小白就经常问老李了，我们写页面的时候，这4种布局方式应该用哪个呢？（这问题一听就很小白了） 最后给大家说一下吧，在我们现在专业的前端开发工作中，用的最多的不是绝对定位，也不是相对定位，而是绝对定位和相对定位的结合使用。（小白：WTF????合体？？？） 并不是合体出现什么新的定位方法啦。而是我们去前端开发中的一种布局书写规范： 父相子绝（即父元素使用相对定位，子元素使用绝对定位，一起结合实现布局。） 这种布局规范是现阶段前端开发公认的布局方法，也能避免很多错误的出现。 （编辑：泉州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
