css3浮动定位

简介: css3浮动定位


前言

在网页设计的舞台上,我们常常需要元素自由灵活地漂浮在页面上,为用户呈现更富有动感的视觉体验。CSS3的浮动定位技术,就像一场舞蹈,可以让元素轻盈地在页面上舞动。本文将带你进入这个富有创意的领域,解锁浮动定位的神奇之处。

浮动float的基本概念

最本质的功能:用来实现并排

浮动的使用

要浮动,并排的盒子都要设置浮动

父盒子要有足够的宽度,否则子盒子会掉下去

浮动的顺序贴靠特性

子盒子会按照顺序进行贴靠,如果没有足够空间,则会寻找再前一个兄弟元素

浮动的元素一定能设置宽高

浮动的元素不再区分块级元素、行内元素,已经脱离了标准文档流,一律能够设置宽度和高度,即使它是span或者a标签等

使用浮动实现网页布局

注意事项

  • 垂直显示的盒子,不要设置浮动,只有并排显示的盒子才要设置浮动!
  • 大盒子带着小盒子跑,一个大盒子中,又是一个小天地,内部可以继续使用浮动
  • div是免费的,不要节约盒子

BFC规范和浏览器差异

BFC (Box Formatting Context,块级格式化上下文) 是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然

  • 一个盒子不设置height,当内容子元素都浮动时,无法撑起自身
  • 这个盒子没有形成BFC

如何创建BFC

  • 方法1: float的值不是none
  • 方法2: position的值不是static或者relative
  • 方法3: display的值是inline-block、flex或者inline-flex
  • 方法4: overflow:hidden (表示溢出隐藏,溢出盒子边框的内容将会被隐藏),这个是非常好用的让盒子形成BFC的方法

BFC的其他作用

  • BFC可以取消盒子margin塌陷
  • BFC可以阻止元素被浮动元素覆盖

浏览器差异

  • IE6、7浏览器使用haslayout机制,和BFC规范略有差异比如IE浏览器可以使用zoom:1属性“让盒子拥有layout’
  • 如果要制作兼容到IE6、7的网页时,尽量让网页布局变得简单,内部有浮动的盒子要设置height属性,规范编程,不要“玩杂技”

清除浮动

  • 方法一:让内部有浮动的父盒子形成BFC,它就能关闭住内部的浮动。此时最好的方法就是overflow:hidden属性
  • 方法二:给后面的父盒子设置clear:both属性clear表示清除浮动对自己的影响,both表示左右浮动都清除
  • 方法三:使用::after伪元素给盒子添加最后一个子元素,并且给::after设置clear:both
  • 方法四:在两个父盒子之间“隔墙”,隔一个携带clear:both的盒子

相对定位 relative

相对定位:盒子可以相对自己原来的位置进行位置调整,称为相对定位

位置描述词:

  • left 向右移动
  • right 向左移动
  • top 向下移动
  • bottom 向上移动

相对定位的性质:相对定位的元素,会在“老家留坑”本质上仍然是在原来的位置,只不过渲染在新的地方而已,渲染的图形可以比喻成“影子”,不会对页面其他元素产生任何影响

相对定位的用途:

  • 相对定位用来微调元素位置
  • 相对定位的元素,可以当做绝对定位的参考盒子

绝对定位 absolute

绝对定位:盒子可以在浏览器中以坐标进行位置精准描述拥有自己的绝对位置

位置描述词:

  • left 向右移动
  • right 向左移动
  • top 向下移动
  • bottom 向上移动

绝对定位脱离标准文档流

  • 绝对定位的元素脱离标准文档流,将释放自己的位置,对其他元素不会产生任何千扰,而是对它们进行压盖
  • 脱离标准文档流的方法:浮动、绝对定位、固定定位

绝对定位的参考盒子

  • 绝对定位的盒子并不是永远以浏览器作为基准点
  • 绝对定位的盒子会以自己祖先元素中,离自己最近的拥有定位属性的盒子,当做基准点。这个盒子通常是相对定位的,所以这个性质也叫做“子绝父相”

绝对定位的盒子垂直居中

绝对定位的盒子垂直居中是一个非常实用的技术

position:absolute;
top:50%;
margin-top:  -自己高度一半

堆叠顺序z-index属性

z-index属性是一个没有单位的正整数,数值大的能够压住数值小的

绝对定位的用途

  • 绝对定位用来制作“压盖”、“遮罩”效果
  • 绝对定位用来结合CSS精灵使用
  • 绝对定位可以结合js实现动画

固定定位 fixed

不管页面如何卷动,它永远固定在那里

position:fixed;
top:100px;
left:100px;

注意事项:

  • 固定定位只能以页面为参考点,没有子固父相这个性质
  • 固定定位脱离标准文档流

固定定位的常用用途

返回顶部

固定定位(position: fixed;)常常用于创建返回顶部按钮,这样用户可以轻松返回网页顶部。以下是一个简单的 HTML 和 CSS 示例,演示如何创建一个返回顶部按钮:

HTML 结构:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Scroll to Top Example</title>
</head>
<body>
    <div class="content">
        <!-- 页面内容 -->
        <h1>Scroll down to see the button</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>
    <!-- 返回顶部按钮 -->
    <div class="scroll-to-top">
        <a href="#" id="scrollToTopButton">&#9650; Top</a>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 样式(styles.css):

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}
.content {
    height: 1000px; /* 为了演示滚动效果而设置的高度 */
    padding: 20px;
}
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007bff;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}
#scrollToTopButton {
    text-decoration: none;
    color: #fff;
}

JavaScript 脚本(script.js):

document.addEventListener("DOMContentLoaded", function () {
    // 获取返回顶部按钮
    var scrollToTopButton = document.getElementById("scrollToTopButton");
    // 添加点击事件监听器
    scrollToTopButton.addEventListener("click", function (event) {
        event.preventDefault(); // 阻止默认行为
        // 平滑滚动到页面顶部
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    });
    // 监听页面滚动事件
    window.addEventListener("scroll", function () {
        // 如果页面滚动超过一定高度,显示返回顶部按钮;否则隐藏
        if (window.scrollY > 200) {
            scrollToTopButton.style.display = "block";
        } else {
            scrollToTopButton.style.display = "none";
        }
    });
});

这个示例中,.scroll-to-top 类定义了返回顶部按钮的样式,其中 position: fixed; 使按钮在页面滚动时保持固定在右下角。JavaScript 部分监听页面滚动事件,当滚动高度超过一定值时显示按钮,否则隐藏。点击按钮时,通过 JavaScript 使用平滑滚动效果返回页面顶部。

楼层导航

固定定位 (position: fixed;) 也常被用于创建楼层导航,使用户能够方便地导航到页面的不同部分。以下是一个简单的 HTML 和 CSS 示例,演示如何创建一个楼层导航:

HTML 结构:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Floor Navigation Example</title>
</head>
<body>
    <div id="section1" class="section">
        <h2>Section 1</h2>
        <p>This is the content of Section 1.</p>
    </div>
    <div id="section2" class="section">
        <h2>Section 2</h2>
        <p>This is the content of Section 2.</p>
    </div>
    <div id="section3" class="section">
        <h2>Section 3</h2>
        <p>This is the content of Section 3.</p>
    </div>
    <!-- 楼层导航 -->
    <div class="floor-navigation">
        <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
        </ul>
    </div>
</body>
</html>

CSS 样式(styles.css):

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}
.section {
    height: 500px;
    padding: 20px;
}
.floor-navigation {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background-color: #007bff;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
}
.floor-navigation ul {
    list-style: none;
    padding: 0;
}
.floor-navigation li {
    margin-bottom: 10px;
}
.floor-navigation a {
    text-decoration: none;
    color: #fff;
    display: block;
    padding: 5px;
    border-radius: 3px;
}
.floor-navigation a:hover {
    background-color: #0056b3;
}

在这个示例中,.floor-navigation 类定义了楼层导航的样式,其中 position: fixed; 使其固定在页面的右侧。导航链接通过锚点 href 属性与各个部分的 ID 相关联,点击链接时页面会平滑滚动到相应的部分。楼层导航的位置通过 topright 属性进行调整,使其在页面右侧居中显示,并通过 transform 属性进行垂直居中。:hover 伪类用于提供链接的悬停样式。

结语

浮动定位不仅仅是页面布局的一种方式,更是一门艺术。通过本文的学习,你将更加熟练地运用CSS3中的浮动定位,为你的网页注入更多生机和灵活性。让我们一同跳入这场浮动的舞蹈,创造出引人入胜的用户体验。

目录
相关文章
|
4月前
|
前端开发
【前端|CSS系列第3篇】CSS盒模型、浮动及定位
【前端|CSS系列第3篇】CSS盒模型、浮动及定位
|
2月前
|
Web App开发 前端开发 JavaScript
探索CSS中的粘性定位:解锁网页布局的新可能
这篇文章详细解释了CSS中的sticky定位方式,并讲解了它的工作原理。
|
3月前
|
前端开发
【CSS】<Cascading Style Sheets>元素浮动&元素定位
【1月更文挑战第17天】【CSS】<Cascading Style Sheets>元素浮动&元素定位
|
3月前
|
前端开发 容器
CSS:浮动
CSS:浮动
38 0
|
3月前
|
前端开发
CSS float(浮动)
CSS float(浮动)
31 2
|
4月前
|
前端开发 测试技术 Python
软件测试/测试开发|Python selenium CSS定位方法详解
软件测试/测试开发|Python selenium CSS定位方法详解
30 0
|
4月前
|
前端开发
今天来总结一下CSS中有哪些定位
今天来总结一下CSS中有哪些定位
|
4月前
|
人工智能 前端开发
CSS基本知识—浮动
CSS基本知识—浮动
|
5月前
|
前端开发
CSS实现鼠标悬停图片向上浮动,放大,翻转
CSS实现鼠标悬停图片向上浮动,放大,翻转
118 0
|
5月前
|
前端开发
CSS布局讲解-float浮动布局使用
CSS布局讲解-float浮动布局使用