html&CSS-----定位

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

目录

前言

定位

 分类和取值

定位的取值

 1.相对定位

 2.绝对位置

元素居中操作

3.固定定位


前言

        今天我们来学习html&CSS中的元素的定位,通过元素的定位我们可以去更好的将盒子放到我们想要的位置,下面就一起来看看吧!

定位

定位position属性,可以让我们将元素从文档流中取出,然后使用方位词属性(left top right bottom)精准的控制它的位置。

不同的定位值可以使元素拥有不同的表现形式,例如放在另外一个元素上面或者固定在浏览器的显示区某个位置

 分类和取值

在html&CSS中定位分为4大类,分别是静态定位、相对定位、绝对定位和固定定位。而我们平时默认的都是静态定位,因此我们可以去通过position属性去改变定位的类型。

定位的取值
描述
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
fixed 生成固定定位的元素,相对于浏览器窗口进行定位。
relative 生成相对定位的元素,相对于其正常位置进行定位。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

静态定位实际上是默认的样式,元素保持原来的性质去排列放置,所以就不去做详细的说明了。下面我会一一介绍相对定位、绝对定位和固定定位。 

 1.相对定位

relative

相对定位能让元素保持原文本流位置的同时,可以通过方位属性进行相对于原位置的偏移。

(定位元素才有的方位属性: top | bottom | left | right,值一般使用px单位或%值。)

  • 特点

    不会脱离文档流

    不影响元素本身的任何特性

    如果不加方位词偏移那么没有任何影响

示例:

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<!-- 这里的body是父类元素,把其中的字体间隔设为0可以删除掉元素本身固有的间隔 -->
<body style="font-size: 0;">
    <!-- 相对定位的特点 -->
    <div class="box"> </div>
    <div class="boo"></div>
</body>
</html>

CSS代码:

/* 相对定位 */
.box{
    position: relative;
    left: 100px;
    background-color: red;
    height: 200px;
    display: inline-block;
    width: 200px;
}
.boo{
    background-color: blueviolet;
    height: 200px;
    display: inline-block;
    width: 200px;
}

效果:html&CSS-----定位,html和css框架,css,前端

 这里的红色把紫色的部分给覆盖掉了,因为红色的盒子设置了相对位置类型然后左移100个像素,所以会把原来紫色的部分给覆盖了。

以下是原来默认位置样式(静态位置)的效果(对比上图):html&CSS-----定位,html和css框架,css,前端

 2.绝对位置

absolute

绝对定位能让元素脱离文档流(原地起飞...),使用方位属性相对于最近的有定位的父级元素进行偏移;

注意!方位属性初始值不是0,而是auto。

方位属性left和top 优先级比 right和bottom高,比如一个元素既拥有left也拥有right,最终位置以left为准。

  • 特点

    脱离文档流

    元素宽高默认值为0

    找不到最近的定位父级则相对于body标签

    一般配合相对定位使用(参照物)

    会将元素转换成块元素

    设置了绝对定位,没有设置层级;html后写居上

    margin:auto 暂时失效

 基点(起始点/坐标原点)

绝对定位的基点是会往父元素找,如果父元素是相对定位(relative )就以此为基点,如果不是的话就继续往上找,直到html元素为止。

 绝对定位的元素跟浮动元素是有点相似的,但绝对定位是完全脱离文档流。

应用场景 

1.元素不会占据页面空间

2.元素需要移动到指定位置

使用示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>    
    /* 绝对定位 */
    .fuc{
        position: absolute;
        left: 100px;
        background-color: red;
        height: 200px;
        display: inline-block;
        width: 200px;
    }
    .hhh{
        background-color: blueviolet;
        height: 200px;
        display: inline-block;
        width: 200px;
    }
    </style>
</head>
<body style>
    <!-- 绝对定位 -->
    <div class="fuc" ></div>
    <div class="hhh"></div>
</body>
</html>

效果:html&CSS-----定位,html和css框架,css,前端

 这里红色的盒子浮起来了,所以紫色的盒子是在最左边的,然后红色的盒子相对于基点右移了100个像素点,所以会覆盖掉紫色盒子的右半部分。

元素居中操作

 元素居中是绝对定位最常见的操作,下面看代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>    
    /* 元素居中 */
    .leimu{
        position: absolute;
        /* 宽度和高度必须自己设置,绝对定位是默认为0的 */
        height: 100px;
        width: 100px;
        /* 这里是把盒子的起点定位为父元素盒子的中心位置,但并没有实现盒子居中 */
        left: 50%;
        top: 50%;
        background-color: blueviolet;
        /* 这里要设置margin左和上分别左移盒子宽度的一半和上移高度的一半 */
        margin-left: -50px;
        margin-top: -50px;
    }  
    </style>
</head>
<body>
    <div style="height: 300px;width: 300px;border: 2px solid red;position: relative;">
        <div class="leimu"></div>
    </div>
</body>
</html>

3.固定定位

fixed

固定定位能让元素脱离文档流,使用方位属性相对于浏览器可视区进行偏移;

  • 特点

    脱离文档流

    元素宽高默认值为0

    margin:auto失效

固定定位的基点(起始点)就是当前视口的起始点,换句话说就是当前页面的大小,默认视口大小=body 大小=html大小

应用场景

位置固定,不会随着页面滚动而滚动

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>    
    /* 元素居中 */
    .leimu{
        position: fixed;
        background-color: aquamarine;
        height: 100px;
        width: 100px;
        left: 1300px;
        top: 200px;
    }  
    </style>
</head>
<body style="margin: 0;">
    <div style="height: 8000px;background-color: rebeccapurple;">
        <div class="leimu"></div>
    </div>
</body>
</html>

 效果:

1690381934359

 

好了以上就是今天的全部内容了,我们下一期再见!

分享一张壁纸:

html&CSS-----定位,html和css框架,css,前端 文章来源地址https://www.toymoban.com/news/detail-608281.html

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

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

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

相关文章

  • HTML--CSS--浮动布局及定位布局

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

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

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

    2024年02月02日
    浏览(48)
  • 【前端|CSS系列第3篇】CSS盒模型、浮动及定位

    在前端开发中,CSS是一项重要的技术,用于控制网页的样式和布局。在本系列的第三篇文章中,我们将学习CSS的盒模型、浮动以及定位,这些概念和技术在页面布局中起着至关重要的作用。通过本文的学习,希望能够帮助大家更好地理解和运用这些关键概念。 CSS盒模型是用来

    2024年02月11日
    浏览(52)
  • 前端学习笔记:CSS中浮动的原理,定位

    这是本人学习的总结,主要学习资料如下 马士兵教育 float设计的初衷是为了有文字环绕图片的效果,比如下图。 所以有浮动效果的元素一定不会遮挡其他元素的文字。比如有两个 div ,两个 div 都有文字,正常文字在 div 左上角。 我们设置一个浮动一个不浮动,我们会看到浮

    2024年02月03日
    浏览(52)
  • 前端基础HTML、CSS--6(CSS-3)

    1.CSS的三大特性 CSS有三个非常重要的三个特性:层叠性、继承性、优先级。 1.1层叠性 相同选择器给设置相同的样式 ,此时一个样式就会 覆盖(层叠) 另一个冲突的样式。层叠性主要解决样式冲突的问题。 层叠性原则: ·样式冲突,遵循的是 就近原则 ,哪个样式离结构近

    2023年04月08日
    浏览(46)
  • 【Web前端开发基础】CSS的定位和装饰

    能够说出 定位 的常见应用场景 能够说出 不同定位方式 的特点 能够使用 子绝父相 完成元素水平垂直案例 能够写出三种常见的 光标类型 (cursor) 能够使用 圆角边框 属性完成 正圆 和 胶囊按钮 效果 能够说出 display 和 visibility 让 元素本身隐藏 的区别 2.1 定位 目标:能够说

    2024年01月23日
    浏览(42)
  • CSS笔记(黑马程序员pink老师前端)定位

    定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置,并且可以压住其他盒子。 定位 = 定位模式 + 边偏移 定位模式 说明 static 静态定位,按标准流特性摆放,没有边偏移,很少用 relative 相对定位,相对自身原有位置移动,原有位置继续占有(不脱标) absolute 绝

    2024年02月09日
    浏览(52)
  • web前端——HTML+CSS

    HTML CSS CSS进阶 CSS盒子模型 定位装饰 CSS精灵图 目录 基础认识  HTML  一、HTML概念 二、HTML页面固定结构  三、HTML标签的结构   四、标签学习 1、排版标签 1)标题标签  2)段落标签  3)换行标签 4)水平线标签  2、文本格式化标签  3、媒体标签 1)图片标签 2)路径  3)音

    2024年01月16日
    浏览(53)
  • 前端(HTML + CSS + JS)

    HTML是超文本标记语言,超文本是指文本、声音、图片、视频、表格、链接等等。标记表示由许许多多的标签组成。HTML页面是运行到浏览器上的。 (1)HTML 文件基本结构 html 标签是整个 html 文件的根标签(最顶层标签) head 标签中写页面的属性 body 标签中写的是页面上显示的内

    2024年02月05日
    浏览(46)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包