css-定位position 理论

这篇具有很好参考价值的文章主要介绍了css-定位position 理论。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.1网页常见布局方式

1.标准流

        1.块级元素独占一行直布局

         2.行内元素/行内块元素一行显示多个 ------>水平布局

2.浮动

          1. 可以让原本垂直布局的 块级元素变成水平布局

3.定位

        1. 可以让元素自由的摆放在网页的任意位置

        2. 一般用于 盒子之间的层叠情况

1.2使用定位的步骤

1.设置定位方式

属性名: position

        position 规定元素的定位方式(类型)

        static 默认值,没有定位(写和不写一样)

        fixed 固定定位,会让元素生成 固定定位的元素

固定定位元素 永远是根据 浏览器的显示窗口 作为 定位位置的参考起点的

        特点: 1、固定定位会使元素脱离文档流

                    2、元素在成为固定定位后,在没有规定固定宽度的情况下,宽高由内容撑开

                    3、固定定位会使元素产生块级框,不论任何类型的元素

                使用了固定定位后就都可以设置宽高了 固定定位元素 通过 left/right/top/bottom属性 指定元素具体定位的位置

left/right/top/bottom 指定定位元素具体定位的位置

        属性值:length(数值+单位) %

        (固定定位:根据浏览器显示窗口的宽[ left、right ]和高[ top、bottom ]计算的百分比值)

常见属性值:

定位方式 属性值
静态定位 static
相对定位 relative
绝对定位 absolute
固定定位 fixoed

        设置偏移值 偏移值设置分为两个方向,水平和垂直方向各选一使用即可

        选取的原则一般是就近原则 《离哪边近用哪个)

方向 属性名 属性值 含义
水平 left 数字+px 距离左边的距离
水平 right 数字+px 距离右边的距离
垂直 top 数字+px 距离上边的距离
垂直 bottom 数字+px 距离下边的距离
1.3相对定位

        介绍:自恋型定位,相对于自己之前的位置进行移动

        代码: position:relative;

特点:

        1.需要配合方位属性实现移动

        2.相对于自己原来位置进行移动

        3.在页面中占位置一没有脱标

应用场景:

        1.配合绝对定位组CP(子绝父相)

        2.用于小范围的移动

知识小结

        相对定位position的属性值是什么?relative

        相对定位是否需要配合方位属性实现移动?  需要配合方位属性实现移动

        相对定位的元素相对于谁进行移动?相对于自己原来位置进行移动

        相对定位的元素在网页中是否占位置? 在页面中占位置一没有脱标

1.4绝对定位

        介绍:拼爹型定位,相对于非静态定位的父元素进行定位移动

        代码: position:absolute;

        特点:

                1.需要配合方位属性实现移动

                2.默认相对于浏览器可视区域进行移动

                3.在页面中不占位置一已经脱标

        应用场景:

                1.配合绝对定位组CP(子绝父相)     

        绝对定位: 先找已经定位的父级,如果有这样的父级就以这个父级为参照物进行定位有父级,但父级没有定位,以浏览器窗口为参照为进行定位

        绝对定位元素是根据 离其(自身)最近并且有定位设置(static定位除外)的父元素 作为 定位位置的参考起点的
            最终绝对定位元素 根据谁 作为 定位位置的参考起点,就将谁叫做 绝对定位的元素的 包含块
         绝对定位元素 会查找 离其最近并且有定位设置的父元素 作为 包含块 使用
        但是如果 向上找到html标签,都没有父元素有定位设置,则中 将 html标签 视为 包含块
        一般情况如果希望 绝对定位元素 根据父元素定位偏移,就会给父元素 设置定位position:relative;
        特点:
            1、绝对定位会使元素脱离文档流
            2、元素在成为绝对定位后,在没有规定固定宽高的情况下,宽高由内容撑开
            3、绝对定位会使元素产生块级框,不论任何类型的元素使用了绝对定位后就都可以设置宽高了
        绝对定位元素 通过 left/right/top/bottom属性 指定元素具体定位的位置

绝对定位和相对定位的区别?

        绝对定位使元素的位置与文档流无关,因此不占据空间。绝对定位将元素从原来位置拿走,后面的元素就会占据绝对定位元素的位置。

        相对定位与绝对定位相反,它移动后原本所占的空间仍保留。可理解为它进行定位后,之前的位置后面的元素不可占据。文章来源地址https://www.toymoban.com/news/detail-692466.html

到了这里,关于css-定位position 理论的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【CSS 08】display 控制布局 块级元素 行内元素 隐藏元素 结合JS 最大宽度 浏览器窗口 定位 position z-index 堆叠

    说在前面 CSS基础教程系列已经结束,接下来就是中级教程,让我们跟上脚步,继续努力吧! 并且最近临近期末考试,后面十天休刊… display display 属性是用于控制布局的最重要的 CSS 属性 display 属性规定是否/如何显示元素 隐藏元素 - display:none 还是 visibility:hidden 通过将 disp

    2024年02月08日
    浏览(59)
  • html&CSS-----定位

    目录 前言 定位  分类和取值 定位的取值  1.相对定位  2.绝对位置 元素居中操作 3.固定定位         今天我们来学习htmlCSS中的元素的定位,通过元素的定位我们可以去更好的将盒子放到我们想要的位置,下面就一起来看看吧! 定位 position 属性,可以让我们将元素从文档流

    2024年02月15日
    浏览(38)
  • HTML--CSS--浮动布局及定位布局

    块元素独占一行 行内元素在有多个的时候,就是从左到右排在一行 块元素包括: div , p , hr 行内元素: span , i , img float 属性: left 向左 right 向右 作用我目前看起来就是浮动元素的宽度是由内容决定的,而不是占满 效果: 但是需要注意,如果给定的宽度不够,效果会偏差:

    2024年01月19日
    浏览(59)
  • [HTML]Web前端开发技术10(HTML5、CSS3、JavaScript )CSS+DIV页面布局,固定定位,相对定位relative,绝对定位absolute,层定位的应用——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 课后练习 网页标题:固定定位 网页标题:相对定位relative 网页标题:绝对定位absolute 网页标题:层定

    2024年02月02日
    浏览(59)
  • 编程笔记 html5&css&js 035 HTML 地理定位

    地理定位有很多事情有关,购物时要知道你在哪吧,驾车时就更是了,所有浏览器还提供了定位的功能,可以在网页中使用。 HTML5 Geolocation(地理定位)用于定位用户的位置。 HTML5 Geolocation API 用于获得用户的地理位置。 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则

    2024年02月02日
    浏览(49)
  • [HTML]Web前端开发技术7(HTML5、CSS3、JavaScript )CSS的定位机制——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS的定位机制 文档流定位 元素类型   浮动定位 float的用处 float的特点 clear属性 层定位 position属性

    2024年02月05日
    浏览(72)
  • 元素定位position

    static:静态定位(默认)。依据文档流定位。 relative:相对定位。以自身为基准,设置坐标(left、top、right、bottom),不脱离文档流。 absolute:绝对定位。以父元素为基准,设置坐标(left、top、right、bottom),脱离文档流。 fixed:固定定位。以浏览器窗口为基准,设置坐标(

    2024年02月05日
    浏览(34)
  • 5-web前端 定位position

    1、相对定位 position: relative  特点:  不脱标,占用自己原来位置      显示模式特点保持不变      设置边偏移则相对自己原来位置移动 拓展:很少单独使用相对定位,一般是与其他定位方式配合使用    参考自身原位置 2、绝对定位 position: absolute 使用场景:子级

    2024年02月08日
    浏览(33)
  • HTML5+CSS3学习笔记(九)前端页面六大布局(文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局)

    本系列更多文章,可以查看专栏 HTML+CSS学习笔记 块级元素自上至下垂直排列,行内元素自左至右水平排列 块级元素独占一行,行内元素不会另起一行 默认情况下,height和width决定内容区的大小;内容区、内边距和边框构成可见区域的大小;外边距决定元素的位置 更多内容可

    2024年02月02日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包