蓝桥杯Web应用开发-浮动与定位

浮动与定位

浮动布局比较灵活,不易控制,而定位可以控制元素的过分灵活性,给元素一个具体的空间和精确的位置。

浮动

我们使用 float 属性指定元素沿其容器的左侧或右侧放置,浮动布局常见取值如下:

• left(左浮动)

• right(右浮动)

使用格式如下所示:

html 复制代码
float: left|right;

我们来举个例子吧!

新建一个 index.html 文件,在其中写入以下内容。

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>
      section {
        border: 1px solid green;
        width: 400px;
        float: left;
      }
      img {
        width: 120px;
        height: 120px;
      }
      img:first-child {
        float: left;
      }
      img:nth-child(2) {
        float: right;
      }
    </style>
  </head>
  <body>
    <section>
      <img src="https://labfile.oss.aliyuncs.com/courses/10532/lotus1.png" />
      <img src="https://labfile.oss.aliyuncs.com/courses/10532/lotus2.png" />
      <p>
        曲曲折折的荷塘上面,弥望的是田田的叶子。叶子出水很高,像亭亭的舞女的裙。层层的叶子中间,零星地点缀着些白花,有袅娜地开着的,有羞涩地打着朵儿的;正如一粒粒的明珠,又如碧天里的星星,又如刚出浴的美人。微风过处,送来缕缕清香,仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动,像闪电般,霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着,这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水,遮住了,不能见一些颜色;而叶子却更见风致了。
      </p>
    </section>
  </body>
</html>

定位

我们使用 position 属性来对元素的位置进行控制,定位布局可以分为以下四种:

• 静态定位(inherit)

• 相对定位(relative)

• 绝对定位(absolute)

• 固定定位(fixed)

其中,一般的标签元素不加任何定位属性时,默认都属于静态定位,静态定位在页面的最底层属于标准流(普通流),在页面中没有特殊的操作方式和显示效果,在本章节中会重点给同学们讲解其他三种定位方式。

固定定位

fixed 属性值用于固定定位,被固定的元素不会随着滚动条的拖动而改变位置。

使用格式如下:

html 复制代码
position: fixed;

我们来举个例子吧!

新建一个 index1.html 文件,在其中写入以下内容。

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100%;
        margin-left: 15%;
      }
      .ad-l {
        position: fixed;
        top: 100px;
        left: 0;
      }
      .ad-r {
        position: fixed;
        top: 100px;
        right: 0;
      }
    </style>
  </head>
  <body>
    <img src="ad-l.png" class="ad-l" />
    <img src="ad-r.png" class="ad-r" />
    <div class="box">
      <img src="box.png" />
    </div>
  </body>
</html>

相对定位

相对定位是该元素的位置相对于它原始的位置来计算的。position 属性为我们提供了 relative 属性值来设置元素的相对属性。

html 复制代码
position: relative;

我们来举个例子吧!

新建一个 index2.html 文件,在其中写入以下内容。

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100%;
      }
      .ad-l {
        position: relative;

        left: -40px;
      }
      .ad-r {
        position: relative;

        left: 100px;
      }
    </style>
  </head>
  <body>
    <img src="ad-l.png" class="ad-l" />
    <img src="ad-r.png" class="ad-r" />
    <div class="box">
      <img src="box.png" />
    </div>
  </body>
</html>

绝对定位

绝对定位,能把元素精确地放在任意位置。position 属性为我们提供了 absolute 属性值来设置元素的相对属性。

语法格式为:

html 复制代码
position: absolute;

我们来举个例子吧!

新建一个 index3.html 文件,在其中写入以下内容。

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100%;
        margin-left: 180px;
      }
      .ad-l {
        position: absolute;
        left: 50px;
        top: 150px;
      }
      .ad-r {
        position: absolute;
        right: 30px;
        top: 150px;
      }
    </style>
  </head>
  <body>
    <img src="ad-l.png" class="ad-l" />
    <img src="ad-r.png" class="ad-r" />
    <div class="box">
      <img src="box.png" />
    </div>
  </body>
</html>

总结

本节实验给大家介绍了布局相关的属性,浮动和定位。

在浮动中,给大家介绍了左浮动(float:left)和右浮动(float:right)的用法。

在定位中,给大家介绍了四种:

• 静态定位(position:inherit)

• 相对定位(position:relative)

• 绝对定位(position:absolute)

• 固定定位(position:fixed)

相关推荐
web Rookie27 分钟前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
Au_ust35 分钟前
css:基础
前端·css
帅帅哥的兜兜35 分钟前
css基础:底部固定,导航栏浮动在顶部
前端·css·css3
yi碗汤园38 分钟前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称39 分钟前
购物车-多元素组合动画css
前端·css
编程一生1 小时前
回调数据丢了?
运维·服务器·前端
丶21361 小时前
【鉴权】深入了解 Cookie:Web 开发中的客户端存储小数据
前端·安全·web
Missmiaomiao2 小时前
npm install慢
前端·npm·node.js
娃哈哈_3 小时前
基于Testng + Playwright的H5自动化巡检工具
测试开发·测试工具·自动化·html5·可用性测试·testng·playwright
程序员爱技术4 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js