css盒子定位position的属性

最新推荐文章于 2023-07-22 14:52:35 发布
最新推荐文章于 2023-07-22 14:52:35 发布
阅读量1.2k 收藏
点赞数
分类专栏： css 文章标签： css 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sd2131512/article/details/4598691
版权

static:默认的属性,按标准流进行布局.

 

 

relative:相对定位,使用相对定位的盒子的位置根据常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍然在标准流中,它后面的盒子仍以标准流方式对待它.

 

 

absolute:绝对定位,盒子的位置以他包含框为基准进行偏移.绝对定位的框从标准流中脱离.这意味着他们对其后的兄弟盒子定位没有影响,其他盒子就好象这个盒子不存在一样.

 

 

fix:称为固定定位,它和绝对定位类似,只是以浏览器窗口为基准,进行定位.

sd2131512
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html盒子属性定位方式,CSS中的元素定位方法详解
weixin_42097369的博客
06-04 873
1.盒模型盒模型，就是 浏览器为页面中的每个 HTML 元素生成的矩形盒子。这些盒子们都要按照 可见版式模型(visual formatting model)在页面上排布。可见的页面版式主要由三个属性控制： position 属性、 display 属性和 float 属性。其中，position 属性控制页面上元素间的位置关系， display 属性控制元素是堆叠、并排，还是根本不在页面上出现，...
盒子模型、浮动属性及定位属性
thwr1881的博客
04-22 1673
1、什么是盒子模型 进行网页布局的重要属性，一个页面由可以由多个盒子组成。 盒子的组成：内容区域+边框(border)+内边距（padding）+外边距(margin) 2、div标签 div标签是块级标签，在没有设置高度、宽度时，和文本标签p功能类似，也可以自动换行。但和p标签不同的是，div标签可以作为容器包含其他标签，而p标签则不能作为容器使用。 3、盒子模型的属性：用盒子作为页面的布局时会用到的属性 3.1、border边框属性 边框属性 作用 border 边框基本属性 bod
图解CSS中position属性的定位用法
12-13
CSS中的定位模式规定了一个盒子在总体的布局上应该处于什么位置以及对周围的盒子会有什么影响。该模式包括了常规文档流，浮动，和几种类型的 position 定位的元素。其中，CSS position 属性可以取5种值：position: absoluteposition: relativeposition: fixedposition: staticposition: inheritstatic 是 position 默认的属性值。任何应用了 position:static 的元素都处于常规文档流中。它处于什么位置以及它如何影响周边的元素都是由盒模型所决定的。一个 static 定位的元素会忽略
css的定位关于运功的快慢
gkhchongbuweiju的博客
07-31 192
在css中我们可以让模块通过循环的方式运动起来，通过代码模板来让代码运动起来可模块在不同的position下的运动速度是不同的请看下面的例子。
CSS属性 Position的几种定位方式
WangMin@汪末末
09-18 4167
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 在讲几种定位方式之前，我们先来了解一下什么是普通流(normal flow)？ 除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。 position 属性的作用 position 用于定位盒子对象，有时一个布局中几个小对象，不易用css paddin
CSS3------盒模型
m0_59749255的博客
11-25 1557
内边距是用来改变内容位置，由于默认页面的布局方向是从上到下，从左到右的。内边距是用来改变内容位置，由于默认页面的布局方向是从上到下，从左到右的。属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。盒子自身不动，将水平方向上的相邻盒子向右推。盒子自身不动，将垂直方向上的相邻盒子向下推。盒子自身不动，将水平方向上的相邻盒子向右推。盒子自身不动，将水平方向上的相邻盒子向右推。盒子自身不动，将垂直方向上的相邻盒子向下推。盒子自身不动，将垂直方向上的相邻盒子向下推。
CSS—盒子模型+定位（详细解析，附有案例）
最新发布
lerrel1的博客
07-22 2020
盒子模型是CSS中较为重要的核心概念之一，它是使用CSS控制页面元素外观和位置的基础。定位是用来控制元素在浏览器中的位置
CSS之盒子定位
fcc627的博客
04-20 4113
文章目录定位导读1.1 为什么需要定位1.2 定位组成1.3 静态定位1.4 相对定位（==重要==）1.5 绝对定位（==重要==）1.6 子绝父相的由来1.7 固定定位fixed（==重要==）1.8 定位叠放次序 z-index1.8 定位的拓展1.9 定位案例元素的显示与隐藏2.1 display 属性2.2 visibility 属性2.3 overflow 溢出属性2.4 仿土豆网显示隐藏遮罩案例 定位导读 1.1 为什么需要定位 定位可以让盒子自由地在某个盒子内移动位置或固定屏幕中的某个位置
CSS盒子模型及定位属性（position)
Chico_D的博客
06-01 826
CSS盒子模型之定位属性（position) #CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： emmm…把它想象成一幅画可能好理解一点，画框和画。 不同部分的说明： • Margin(外边距) - 清除边框外的区域
CSS属性之定位属性（图文详解）
12-01
CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 position: absolute; <!-- 绝对定位 --> position: relative; <!-- 相对定位 --> position: fixed; <!-- 固定定位 --> 下面逐一介绍...
对CSS中的Position、Float属性的一些深入探讨
12-13
2.Position属性（点我直接跳转） 属性值介绍 用法介绍 一些关于position的小知识 3.Float属性（点我直接跳转） 属性值介绍 用法介绍 与Position之间的兼容问题 HTML布局的基本要点： 如果要掌握、运用好...
CSS中的元素定位方法详解
12-13
可见的页面版式主要由三个属性控制： position 属性、 display 属性和 float 属性。其中，position 属性控制页面上元素间的位置关系， display 属性控制元素是堆叠、并排，还是根本不在页面上出现， float 属性提供...
css盒子模型和定位属性
qq_36838562的博客
05-12 553
css盒子模型与定位属性
CSS定位position总结（超详细哦！）
热门推荐
weixin_52625590的博客
08-01 3万+
开始学习css页面布局时，先接触到的有 **标准流 或 浮动**，但是经过后续的学习发现有些场景很难通过标准流 或 浮动来快速实现。 例如： **场景1**： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。 **场景2**：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。 这个时候我们就需要学习新的布局方法了——`定位（position）`...............
html如何给盒子设置位置,CSS盒子定位
weixin_35094438的博客
06-04 1万+
又到周末了，又结束了一周的课程了，表示昨前天开始老师布置家庭作业开始写页面了，前天的还好，12点之前搞定，昨天的熬到2点，表示大神不要笑哈，毕竟能力有限，第二天看了老师的讲解，才发现做了非常多的无用功，好了，闲聊就到这里吧，下面我分享下这周老师讲到的一些内容，以下都是自己的理解哈，仅供参考：CSS盒子定位：什么是盒子定位呢，顾名思义，就是元素盒子(以下主要以块级盒讲解)在页面中的位置，定位就是确定...
position定位、盒子模型、js基础
weixin_45575912的博客
03-14 418
1.css定位——position ​ position的定位需要配合方向值一起使用（top、left、right、bottom）,上左优先。 定位方式 功能 relative 该方法不脱离文档流，相对于元素原本本身位置进行定位，文档流位置不动。 absolute 完全脱离文档流，相对于浏览器进行定位。当父级元素没有设置position.relative，子元素相对于浏览器定位，因为是绝对定位，所以把元素位置放在文档某一个位置，跟随文档的滚动而滚动；当父级元素设置position.re
盒子模型&position定位
codeAB
07-02 3312
有时候深深的感觉语文这门课程其实很有用， 至少以前学的时候没有感觉到 直到现在阅读大量的别人的资料文章的时候或者是看一些题目....... 总之：认真阅读小心品味 当然，前面的孤言自语和本文无关，只是笔者在有段时间内误解一个与本文有关的知识点源于阅读的不小心， 笔者在写本篇文章之前阅读了大量的资料，试图以一种简单易懂的方式把布局的精髓展现给读者； 盒子模型：
【css盒子定位】position属性
weixin_52915467的博客
12-03 528
今天是满满干货,话不多说上知识 定位 定位（position）的基本思想很简单，它允许用户定义元素框相对于其正常位置应该出现的位置，这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素生成一个块级框，而不论该元素是什么类型。position属性可以选择4种不同类型的定位模式。 position : static | relative | absolute | fixed 其中参数哈尼如下： static：静态设定为默认值。为特殊定位，对象遵循HTML定位规则。 relati
两列布局：左边定宽，右边自适应（撑满）
sd2131512的专栏
01-31 5605
    ]]>  方法一：浮动实现#id1 { background-color: #000; width:100px; float:left; height:200px;} #id2 { background-color: #0f0; height:200px;}   方法二：绝对定位实现#id1 { backg
html css中的盒子属性
04-05
HTML和CSS中有一些盒子属性，这些属性用于定义和控制HTML元素的盒子模型。以下是一些常见的盒子属性： 1. width和height：定义元素的宽度和高度。 2. margin：定义元素的外边距，用于在元素周围创建空白区域。 3....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值