CSS-粘连布局-实现以及变形实战

最新推荐文章于 2022-11-30 15:45:08 发布
最新推荐文章于 2022-11-30 15:45:08 发布
阅读量2k 收藏 7
点赞数 15
分类专栏： css 文章标签： 前端 css 布局 html 列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39903567/article/details/115556127
版权
本文详细介绍了CSS粘连布局的概念及其特点，包括如何简单实现粘连布局，以及在实战中如何简化DOM结构避免冗余。通过示例展示了在内容不足和充足时，footer如何保持在底部或跟随滚动。同时，文章提到了在实现过程中需要注意的盒模型问题，确保布局的正确显示。
摘要由CSDN通过智能技术生成

文章目录

一、粘连布局

特点：

  • 有一块内容<main>，当<main>的高康足够长的时候，紧跟在<main>后面的元素<footer>会跟在<main>元素的后面滚动。

  • 当<main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer>元素能够“粘连”在屏幕的底部

如图：图片来源https://blog.csdn.net/VhWfR2u02Q/article/details/84076421

在这里插入图片描述

在这里插入图片描述

二、简单实现

DOM结构：

<body>
    <div class="wrap">
        <div class="main">
            <div class="content">
最低0.47元/天 解锁文章
LYFlied
关注
专栏目录
浅谈css sticker-footer 布局
09-24
然而，随着CSS3的引入，特别是Flexbox和Grid布局的出现，实现Sticker-Footer布局变得更加简洁和灵活。 1. **基础CSS Sticker-Footer布局**： 在HTML结构中，我们可以创建一个包含内容和页脚的主容器，例如`...
css特效——融合粘滞（炫酷的分享按钮）
朝阳39的博客
11-03 394
完整范例代码和效果见 https://demo.cssworld.cn/new/11/1-6.php 实现原理 SVG滤镜 使用方法 在页面任意位置放入下面这段SVG代码 <svg width="0" height="0" style="position:absolute;"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="1.
25.css经典布局—粘连（css sticky footer）布局
weixin_47254130的博客
06-30 426
1.什么是粘连布局（css sticky footer） 1.当main的高度足够长的时候，紧跟在<\main>后面的元素<\footer>会跟在其后面; 2.当<\main>元素比较短的时候（比如小于屏幕的高度），我们期望这个<\footer>元素能够“粘连”在屏幕的底部。 3.三个组成部分：wrap容器,main内容,footer脚部 方法一：footer 上用负的 margin-top 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padd
CSS实现滚动高度自动变小的粘滞效果
最新发布
maxue20161025的博客
11-30 364
可以看到默认页面的 header 头部元素高度挺高的，随着滚动的进行，头部固定定位了，同时高度也变小了，减小对页面高度的占用。
用CSS如何实现两个球相交的粘粘动画效果
web前端开发
10-19 422
来源 | https://juejin.im/post/6844903843294085134这是一个纯粹利用CSS所做出来的效果，这个效果说穿了就是一个图像处理的原理，做法跟Photo...
css经典布局系列四——粘连（css sticky footer）布局
weixin_34186931的博客
04-21 594
什么是粘连布局（css sticky footer） 当main的高度足够长的时候，紧跟在<\main>后面的元素<\footer>会跟在其后面; 当<\main>元素比较短的时候（比如小于屏幕的高度），我们期望这个<\footer>元素能够“粘连”在屏幕的底部。 三个组成部分：wrap容器,main内容,footer脚部 方法一：...
css-adv:htmlcss 布局实现技巧练习
06-30
css-adv 前端能力提升练习html/css布局实现技巧练习css 练习布局命名由css-前缀开头图片hover，1px公用边不对称的全宽背景平铺两列的经典布局（实现其中一列自适应？再优先加载？两列等高？）简单的tab切换，要压住...
HTML-CSS-DIV网页设计与布局第章-网页布局与设计技巧.pptx
11-17
"HTML-CSS-DIV网页设计与布局第章-网页布局与设计技巧" 本章节主要介绍了网页布局和设计技巧，涵盖了网页布局的定义、网页大小的设计、网页栏目划分、表格布局和CSS布局等方面的知识点。 网页布局的定义 网页布局...
CSS-浏览器兼容实战.pdf
08-27
《CSS-浏览器兼容实战》一书深入探讨了CSS在不同浏览器中的兼容性问题及其解决方案。CSS，即层叠样式表，是用于控制HTML或XML文档样式的计算机语言。在网页设计中，CSS起着至关重要的作用，尤其在实现响应式布局和...
tailwindcss-rtl:在tailwindcss框架上启用双向支持
04-23
tailwindcss-rtl介绍符号语言的国际化不仅需要翻译文本，还需要水平地反映布局。 可以通过在布局body标签中添加dir="rtl"来完成，但这可能还不够，您需要为RTL创建其他样式。 使用tailwindcss-rtl插件，您将能够以...
CSS2.1利用定位、浮动实现圣杯布局、双飞翼布局、黏连布局、伪等高布局等
05-02
适合前端新手小白的布局方面小技巧，内容主要为利用元素定位和浮动方面的知识实现圣杯布局、双飞翼布局、黏连布局、伪等高布局等，解决浮动元素高度失效和相邻垂直外边距重叠问题，同时还解决ie6下fixed失效问题。
用html和css实现导航栏粘滞效果
qq_44938644的博客
07-21 1302
用html和css实现导航栏粘滞效果，无需使用javascript
CSS实现两个球相交的粘粘效果
weixin_42364397的博客
05-29 496
实现效果 这个效果就是外层添加对比度，小球添加高斯模糊，形成的效果。 实现的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini...
CSS浮动-5.4实战案例-三列布局-使用双飞翼布局---不理解为啥？？太难了
qq_44280574的博客
08-31 320
1.如何实现一个三列布局 【网页中常用的布局方式，中间是网页的内容主体，两侧是两个边栏，放置一些导航呀，广告呀，新闻呀等等】 实现一个左中右布局 左右两侧宽度固定 中间内容宽度能够自适应 圣杯布局略掌握一个就好~ 2.双飞翼布局！！！ 【很厉害，专门用于解决上边那种布局难题的。 也是大厂面试中经常考察的知识点。】 第一步：使用float属性让左中右三列浮动 第二步：使用负margin属性让左右两列与中间列处于同一水平线上 第三步：在中间列增加一个div内容元素，设置margin值为左右两列的宽度 最后，别忘
前端常见经典布局一：粘连布局
sinat_33255495的博客
11-30 717
什么是粘连布局（css sticky footer） 当main的高度足够长的时候，紧跟在后面的元素会跟在其后面;示例如下： 当元素比较短的时候（比如小于屏幕的高度），我们期望这个元素能够“粘连”在屏幕的底部。 示例如下： 这种情况我们称为粘连布局。 粘连布局的布局方法 粘连布局由三个组成部分：wrap容器,main内容,footer脚部 <div id="main"> <div class="main"> main<br>
【css】父子元素之间顶部粘连
当白的技术小窝 ( git : https://github.com/canwhite )
10-10 587
垂直方向设置margin-top:100px; 并没有出现想要的效果，依然是顶着左上角 实际上这是因为当父元素没有设置padding值以及border值时，出现了一个bug：“父元素的上方与子元素的上方完全重合在了一起，无法分开”。所以才会导致上述这种父元素和子元素同时向下的情况。 两种最简单的解决方法： 方法一：给父元素添加padding-t...
粘连 Footer 的 5 种方法 | CSS-Tricks
强子的专栏
06-20 5148
本文转载自：http://www.zcfy.cc/article/491文中对于“吸附”布局的实现非常巧妙，当我第一次看到那个效果图，第一时间也没有想到好的实现方法。一个简短的历史，如果你愿意那样说的话。粘连 footer 的目的是让它“支撑”在浏览器窗口的底部。但不总是在底部，如果有足够的内容将页面撑开，footer 可以被撑到网页下方去。但是，如果页面的内容很短，粘连 footer 仍然会出现
JS、CSS解决标签颜色在黑色和白色背景颜色重叠问题/标签栏随背景切换变化而变化
gg1229505432的博客
07-09 1468
如图，当标签在红框区域颜色可以正常显示，但到红框下面的一些区域则和白色背景颜色相重叠。则不显示。 我们可以改变标签栏的样式，让其在白色背景时变成黑色。 如图下所示 点击右侧 演示网页 即可演示网页 其中用到了JS和html中的onmouseover=“function()”事件。 在颜色变化的标签div中打一个id="nav_content"， 在颜色和标签颜色重叠的div（如图中的蓝色区域）中写一个onmouseover=“function()”事件， 当鼠标移动到蓝色区域时...
div从块级元素变成行级元素
热门推荐
ke1ying的博客
10-22 1万+
加上display:inline-block
CSS-DIV布局：传统与现代的碰撞
"学习CSS-DIV布局，理解传统布局与现代布局的差异，掌握Web标准的构成和重要性，以及如何通过CSS2.0实现表现与内容的分离。" 在学习CSS-DIV布局的过程中，首先要理解的是传统布局与CSS布局的区别。传统布局通常指的...
评论 19
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值