网站源码带数据,如何做好品牌网站建设方案,wordpress 放大镜,搜索引擎提交入口css3浮动定位 前言浮动float的基本概念浮动的使用浮动的顺序贴靠特性浮动的元素一定能设置宽高 使用浮动实现网页布局BFC规范和浏览器差异如何创建BFCBFC的其他作用浏览器差异 清除浮动相对定位 relative绝对定位 absolute绝对定位脱离标准文档流绝对定位的参考盒子绝对定位的盒… css3浮动定位 前言浮动float的基本概念浮动的使用浮动的顺序贴靠特性浮动的元素一定能设置宽高 使用浮动实现网页布局BFC规范和浏览器差异如何创建BFCBFC的其他作用浏览器差异 清除浮动相对定位 relative绝对定位 absolute绝对定位脱离标准文档流绝对定位的参考盒子绝对定位的盒子垂直居中堆叠顺序z-index属性绝对定位的用途 固定定位 fixed固定定位的常用用途返回顶部楼层导航 结语 前言
在网页设计的舞台上我们常常需要元素自由灵活地漂浮在页面上为用户呈现更富有动感的视觉体验。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 向上移动
绝对定位脱离标准文档流
绝对定位的元素脱离标准文档流将释放自己的位置对其他元素不会产生任何千扰而是对它们进行压盖脱离标准文档流的方法:浮动、绝对定位、固定定位
绝对定位的参考盒子
绝对定位的盒子并不是永远以浏览器作为基准点绝对定位的盒子会以自己祖先元素中离自己最近的拥有定位属性的盒子当做基准点。这个盒子通常是相对定位的所以这个性质也叫做“子绝父相”
绝对定位的盒子垂直居中
绝对定位的盒子垂直居中是一个非常实用的技术
positionabsolute;
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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0link relstylesheet hrefstyles.csstitleScroll to Top Example/title
/head
bodydiv classcontent!-- 页面内容 --h1Scroll down to see the button/h1pLorem ipsum dolor sit amet, consectetur adipiscing elit.../p/div!-- 返回顶部按钮 --div classscroll-to-topa href# idscrollToTopButton#9650; Top/a/divscript srcscript.js/script
/body
/htmlCSS 样式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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0link relstylesheet hrefstyles.csstitleFloor Navigation Example/title
/head
bodydiv idsection1 classsectionh2Section 1/h2pThis is the content of Section 1./p/divdiv idsection2 classsectionh2Section 2/h2pThis is the content of Section 2./p/divdiv idsection3 classsectionh2Section 3/h2pThis is the content of Section 3./p/div!-- 楼层导航 --div classfloor-navigationullia href#section1Section 1/a/lilia href#section2Section 2/a/lilia href#section3Section 3/a/li/ul/div/body
/htmlCSS 样式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 相关联点击链接时页面会平滑滚动到相应的部分。楼层导航的位置通过 top 和 right 属性进行调整使其在页面右侧居中显示并通过 transform 属性进行垂直居中。:hover 伪类用于提供链接的悬停样式。
结语
浮动定位不仅仅是页面布局的一种方式更是一门艺术。通过本文的学习你将更加熟练地运用CSS3中的浮动定位为你的网页注入更多生机和灵活性。让我们一同跳入这场浮动的舞蹈创造出引人入胜的用户体验。
