CSS 中的定位

beanlam 发布于2019-08-23 18:23 / 2624人阅读

摘要：块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。元素框从文档流完全删除，并相对于其包含块定位。中的文档流标准文档流文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。

1 CSS 中的定位 1.1 了解定位（positioning） 定位的基本思想：

它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

浮动提出的时间

CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础

CSS 定位机制（3种）

关于CSS的定位机制，相比会有小伙伴不太清楚，平常也没有留意过，那么CSS有三种基本的定位机制

普通流

浮动

绝对定位

CSS position 属性之属性值的含义

属性值	含义	描述
Static	元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。	默认值。没有定位，元素出现在正常的流中
Relative	元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。	生成相对定位的元素，相对于其正常位置进行定位。
Absolute	元素框从文档流完全删除，并相对于其包含块定位。	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed	元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身	生成绝对定位的元素，相对于浏览器窗口进行定位。
inherit		规定应该从父元素继承 position 属性的值。

1.2 CSS中的文档流 标准文档流

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

GPU云服务器云服务器中的绝对定位相对定位-绝对定位人脸定位图片定位

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105145.html

细说css中的position属性

摘要：块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。相对定位，相对于自己的初始位置，不脱离文档流。有过css开发经验的同学，对于position这个属性一定不会陌生，然而这个熟悉的属性确是面试题中的常客，也就说明了该属性在css的世界是有一定的江湖地位的，那么我们就来详细的说说position这个属性。在w3school中是这样解释posi...

ssshooter 2019-08-30 14:07 评论0 收藏0
CSS > CSS3 中的层叠上下文初探

摘要：但该盒不建立新的层叠上下文，除非是根元素。以上是基于的层叠上下文介绍。同级情况下，按照二者在源代码中的顺序，居后的又重新占领高地了。现在我们看以下源代码这个时候，以视口为包含块进行定位和大小计算，将会铺满整个屏幕。前言：关于层叠上下文，笔者还没有去阅读更详细的 W3C 规范来了解更本质的原理（表打我，等我校招拿到 offer 了我就读好伐 T_T）。一直听说 CSS3 里的层叠上下文...

pcChao 2019-08-28 18:18 评论0 收藏0
CSS学习摘要-定位

摘要：学习摘要定位学习摘要定位注全文摘自定位定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。使用上述四个属性来精确指定要将定位元素移动到的位置。CSS学习摘要-定位注：全文摘自MDN-CSS定位定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一...

beanlam 2019-04-23 13:39 评论0 收藏0
HTML与CSS中的定位个人分享

摘要：定位默认值几乎不用了解就可以绝对定位不为元素预留空间脱离文档流如果当前元素的父级元素是元素的话是相对于当前页面的定位如果当前元素的父级不是元素的话父级元素没有开启定位则是相对于页面的定位如果当前元素的父级不是元素的话父级元素开启定位定位 static - 默认值 (几乎不用,了解就可以) absolute - 绝对定位,不为元素预留空间,脱离文档流: 如果当前元素的父级元素是元素...

SillyMonkey 2019-08-29 16:30 评论0 收藏0
HTML与CSS中的定位个人分享

摘要：定位默认值几乎不用了解就可以绝对定位不为元素预留空间脱离文档流如果当前元素的父级元素是元素的话是相对于当前页面的定位如果当前元素的父级不是元素的话父级元素没有开启定位则是相对于页面的定位如果当前元素的父级不是元素的话父级元素开启定位定位 static - 默认值 (几乎不用,了解就可以) absolute - 绝对定位,不为元素预留空间,脱离文档流: 如果当前元素的父级元素是元素...

sihai 2019-08-02 16:31 评论0 收藏0