九宫格的布局你能够想到哪些办法实现？它们各自的优缺点是什么？

原创 于 2019-05-16 10:33:51 发布 · 2.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端开发 #布局 #html5 #css3 #应用

本文深入探讨了九宫格布局的实现，包括使用div+css布局、ul,li布局以及CSS的百分比、rem、vw单位，flex和float布局。分析了各种方法的优缺点，如div+css的浏览器兼容性问题，ul,li的默认边距，以及自适应高度的挑战。此外，还讨论了如何去除li和a标签的默认间距，并对比了flex和float布局的区别。" 123421427,12660776,Java实现九九乘法表的四种方法,"['Java', '算法', '编程技巧']

这里是修真院前端小课堂，本篇分析的主题是

【九宫格的布局你能够想到哪些办法实现？它们各自的优缺点是什么？】

每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【九宫格的布局你能够想到哪些办法实现？它们各自的优缺点是什么？】

 

1.背景介绍

要做九宫格，首先得明白什么是盒子模型。盒子模型是html+css中最核心的基础知识，理解了这个重要的概念才能更

好的排版。 我们可以把所有HTML元素都可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

 

2.知识剖析

盒子的基本要素

content-内容

padding-内边距(填充）

border-边框

margin-外边距

一个盒子实际

所占有的宽度（或高度）是由"内容+内边距+边框+外边距"组成的

图中最内部的框content是元素的实际内容，也就是元素框。当元素为块级元素或内联块级元素时， 可以设置width，

height属性来设定内容区的宽高。而内联非替换元素设置width,height属性无效，其宽度随元素的内容而变化。 当默认情况下，

块级元素宽度自动填满其父元素宽度。

Padding属性定义了元素边框与元素内容之间的空

最低0.47元/天 解锁文章
博客
IT行业都有哪些职位，初学者如何选择才能够快速进入这个行业？
05-14 2万+
【本人性格不好，被惹到了必然句句带脏字，所以评论中如果有不开眼的，请慎重。另外，这篇回答从头到尾都是我自己的个人偏见，绝对不客观，也绝对不会为本答案负责。所以，有自己正常思维的请不要再看下去了。】互联网行业的薪资水准相对较高，刚入行一个月，半年，或者一年超过其他行业薪资很正常。那么，互联网行业究竟有哪些职位呢，又分别适合哪些传统行业转型？1.产品2.UI3.CSS...
博客
草船云舍AMA分享第八期：深度洞察--AI 重塑工作与创业的无限可能
03-11 1012
以自媒体爆款内容生成为例，只需在扣子中输入抖音链接，利用其 link leader 插件就能自动提取文案，接着接入大模型（如 deep seek、kimi 等）进行改写，再通过配置生图、生视频的节点，就能生成视频和封面，实现一键式自动化操作。如今，作为 AI 公司的创始人，她站在行业前沿，以实战经验为基石，分享 AI 应用的宝贵经验。以扣子（COZE）为例，它是字节出品的工具，具有很多字节相关的 API，对抖音的支持非常友好，能直接提取抖音链接里的视频文案，还拥有多样的发布渠道，如豆包、飞书、微信等。
博客
草船云舍AMA分享第七期：投流干货大揭秘-从 0 到 1 学会科学营销
03-10 1346
在投流过程中，要不断学习、实践和优化，结合自身产品和目标客户，制定适合的投流策略。信息流素材竞争激烈，同行相互抄袭，素材生命周期短，最短 2 小时，最长 3 个月，中位数 1 - 2 天。投放短视频素材时，长视频优于短视频，因为长视频能更精准定向人群，提高完播率，吸引真正有购买意向的用户，虽然长视频可能跑量慢，但只要跑动就能赚钱。未来，草船云舍将继续举办更多类似的 AMA 活动，邀请更多优秀的创业者与项目团队，与社区成员们共同探讨行业热点话题，分享前沿技术与创新应用，推动各行业的共同发展与进步。
博客
草船云舍AMA分享第六期：互联网跨界餐饮，困境中蹚出创业之路
03-07 1365
未来，草船云舍将继续举办更多类似的 AMA 活动，邀请更多优秀的创业者与项目团队，与社区成员们共同探讨行业热点话题，分享前沿技术与创新应用，推动各行业的共同发展与进步。再者，重视私域运营，通过加微信、建群等方式，将客户纳入私域流量池，在群内发布产品出锅时间、优惠活动等信息，增强与客户的互动，提高客户粘性。毛总对卤力鸭的未来充满信心，他希望通过充分的市场调研，深入了解市场。卤力鸭的创业历程充满艰辛，从失业后的迷茫，到品牌创立、经营过程中的重重困难，毛总夫妇凭借着坚定的信念和不懈的努力一一克服。
博客
草船云舍AMA分享第五期：探索啤酒世界奇妙之旅
03-05 683
在 2 月 13 日的草船云直播间，一场关于精酿啤酒的精彩分享会火热展开，啤酒文化爱好者阎波（阎总）作为嘉宾，与主持人杨焱一同带领观众走进精酿啤酒的世界，深度探讨了精酿啤酒的知识、文化、市场现状等内容，为观众带来了一场知识与趣味兼具的直播盛宴。活动旨在搭建一个创业者与核心用户、种子用户直接交流的平台，邀请各领域的创业者，尤其是初创团队，分享他们的项目理念、设计思路及目标。草船云舍希望通过AMA系列活动，让用户能够直接向项目创始人提问，增进创业者与用户的深度互动与了解。
博客
草船云舍AMA分享第四期：解锁山海经 AI 手办的奇妙世界
02-26 872
例如，手办的 AI 具备不同声线和人设，能与孩子共同成长，且操作简单，开机即用。线下，通过参加漫展、庙会等活动进行销售和推广，未来还计划采用加盟直营的方式，在儿童聚集的商场、社区等地开设店铺，展示和销售产品。它不仅是一款手办，更是科技与文化融合的创新产品，为儿童陪伴和成长带来了新的可能，让这个充满魅力的 AI 手办陪伴孩子快乐成长。未来，草船云舍将继续举办更多类似的 AMA 活动，邀请更多优秀的创业者与项目团队，与社区成员们共同探讨行业热点话题，分享前沿技术与创新应用，推动各行业的共同发展与进步。
博客
草船云舍AMA分享第三期：用现代学科的角度看传统八字命理
02-26 1257
未来，草船云舍将继续举办更多类似的 AMA 活动，邀请更多优秀的创业者与项目团队，与社区成员们共同探讨行业热点话题，分享前沿技术与创新应用，推动各行业的共同发展与进步。草船云舍邀请 大喵 命理学家冯英杰老师，用现代学科的角度解读传统八字命理，为大家深入讲解命理学的基本原理和实际应用，带领我们走进一个充满智慧与启迪的世界。冯老师解释了命与运的区别，以及大运对人生的影响，并指出命好和运好的人生会相对顺遂，而命不好但运好的人生也能取得中上等的成就。一个高水平的命理师能够准确地分析八字，并提供具体的建议。
博客
草船云舍AMA分享第二期：摹图 AI 的创新之旅与未来展望
02-26 1112
通过郭总的精彩分享，社区成员们对摹图 AI 有了更深入的了解，也对 AI 技术在电商等行业的应用与发展有了更清晰的认识。同时，摹图AI 还提供了丰富的模板与姿势选择，确保用户能够生成高质量的图片。未来，草船云社将继续举办更多类似的 AMA 活动，邀请更多优秀的创业者与项目团队，与社区成员们共同探讨行业热点话题，分享前沿技术与创新应用，推动各行业的共同发展与进步。在这次活动中，郭总不仅详细介绍了摹图AI 的产品功能、应用领域，还分享了团队的发展历程、未来规划以及 AI 技术在电商等行业的创新应用。
博客
草船云舍分享会第一期：楚笺数字名片的探索与创新
02-11 1009
从传统的纸质名片到如今的数字名片，再到未来可能实现的AI名片，这一演变不仅反映了技术的进步，也体现了人们对社交和商务交流需求的不断深化。本次分享使用“草船云”微信视频号语音直播，主讲人北京葡萄藤CEO李亚冲通过2个小时的时间，从自有数字名片“楚笺名片”展开，就”从纸质名片到AI名片” 这一话题展开探讨，既聊到了数字名片的现状，也勾画了数字名片未来的发展方向，并就商业运营模式，区块链、大模型、知识图谱的应用进行了分享。希望通过这个活动，邀请更多的创业者和项目老板来分享他们的项目，促进交流与合作。
博客
什么是无人教学
04-13 958
欢迎来到IT修真院，来了解这种极具开创性和颠覆性的无人教学模式。在无人教学的模式中，并没有老师的角色，而是用一套智能教学的系统来代替“老师授课，学生听课”的方式，是的，我们通过任务分配的方式，让学员在完成任务的过程中主动学习。把被动听课，改成主动学习，仅仅是一个开始，要完善这种学习模式，还需要完善以下的教学体系：1 界定技能边界，确保能达到正式工作的要求2 分解任务，保证所有的任务都来自真实项目3 明确验收标准，来确定任务能否通关4 提供操作步骤，引导学员按步骤完成学习...
博客
Vue 骚技巧，策略模式实现动态表单验证
07-23 1244
策略模式（Strategy Pattern）又称政策模式，其定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换。封装的策略算法一般是独立的，策略模式根据输入来调整采用哪个算法。关键是策略的实现和使用分离。注意：本文可能用到一些编码技巧比如 IIFE（Immediately Invoked Function Expression, 立即调用函数表达式），ES6 的语法 let/const、箭头函数、rest 参数，短路运算符 等，如果还没接触过可以点击链接稍加学习 ~1...
博客
由浅入深，66条JavaScript面试知识点
07-22 1573
钱昱多年前端工作经验 《JavaScript 设计模式精讲》 作者，主要分享前端方面技术博客公众号：前端下午茶HTML&CSS： 浏览器内核 盒模型、flex布局、两/三栏布局、水平/垂直居中； BFC、清除浮动； css3动画、H5新特性。 JavaScript： 继承、原型链、this指向、设计模式、call, apply, bind,； new实现、防抖节流、let, var, const 区别、暂时性死区、eve...
博客
进击的 JAMStack
07-21 836
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站什么是JAMStack概念JAMStack中的JAM其实是三个词的缩写，它们分别是JavaScript, APIs以及Markdown。而Stack用中文的说法就是技术栈（Tech Stack），也就是我们在构建应用的时候具体使用到的技术的集合。举个例子，国外现在比.
博客
Vue.js 组件复用和扩展之道
07-20 1059
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站软件编程有一个重要的原则是 D.R.Y（Don't Repeat Yourself），讲的是尽量复用代码和逻辑，减少重复。组件扩展可以避免重复代码，更易于快速开发和维护。那么，扩展 Vue 组件的最佳方法是什么？Vue 提供了不少 API 和模式来支持组件复用和扩展，你.
博客
深入理解Java的接口和抽象类
07-17 734
作者简介：工会10年后端工作经验，主要记录分享：java学习方法、学习心得等。内容包含Java技术、前后端、数据库、编程感悟等干货。公众号：java工会对于面向对象编程来说，抽象是它的一大特征之一。在Java中，可以通过两种形式来体现OOP的抽象：接口和抽象类。这两者有太多相似的地方，又有太多不同的地方。很多人在初学的时候会以为它们可以随意互换使用，但是实际则不然。今天我们就一起来学习一下Java中的接口和抽象类。一、抽象类　 在了解抽象类之前，先来了解一下抽象方法。抽象方法..
博客
一篇文章了解并发数据结构
07-16 823
作者简介：工会10年后端工作经验，主要记录分享：java学习方法、学习心得等。内容包含Java技术、前后端、数据库、编程感悟等干货。公众号：java工会CopyOnWriteArrayList的内部实现与Vector不同。它是当对象进行写操作时，复制该对象；若进行的是读操作，则直接返回结果，操作过程中不进行同步。CopyOnWriteArrayList很好地利用了对象的不变性，在没有对对象进行写操作前，由于对象未发生改变，因此不必加锁。而在试图改变对象时，总是先获取对象的一个副本，然后对副本.
博客
Java 8 最佳技巧
07-15 703
作者简介：工会10年后端工作经验，主要记录分享：java学习方法、学习心得等。内容包含Java技术、前后端、数据库、编程感悟等干货。公众号：java工会在过去的几年中，我一直使用Java 8 进行了很多的编码工作，用于开发新应用和迁移遗留应用，我觉得是时候写一些有用的”最佳实践”。我个人不喜欢”最佳实践”这个术语，因为它意味着“一刀切”的解决方案，当然编码工作是不会这样的–这是因为我们开发人员会想出适合我们的方案。但我发现我对Java8特别的喜欢，它让我的生活更轻松一点，所以我想就此话..
博客
Java多线程编程基础三（原子性，可见性和有序性）
07-14 716
作者简介：华哥10年+后端开发工作经验，主要分享：关于java体系的知识，如：java基础知识/数据结算/算法，Spring/MyBatis/Netty源码分析，高并发/高性能/分布式/微服务架构的原理，JVM性能优化等。公众号：java杂记在并发编程中，我们通常会遇到以下三个问题：原子性问题，可见性问题，有序性问题。一、原子性即一个操作或者多个操作，要么全部执行并且执行的过程不会被任何因素打断，要么就都不执行。原子性就像数据库里面的事务一样，他们是一个团队，同生共死。...
博客
史上最全的 JavaScript 模块化方案和工具
07-13 801
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站模块化是大型前端项目的必备要素。JavaScript 从诞生至今，出现过各种各样的模块化方案，让我们一起来盘点下吧。IIFE 模块默认情况下，在浏览器宿主环境里定义的变量都是全局变量，如果页面引用了多个这样的 JavaScript 文件，很容易造成命名冲突。/.
博客
10 个很实用的 JavaScript 技巧
07-09 836
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站编程语言通常暗藏着各种技巧，熟练使用这些技巧可以提高开发效率。JavaScript 就是一门技巧性很强的语言，掌握常见的语法技巧不但可以加深对语言特性的理解，还可以简化代码，提高编码效率。本文分享 10 个常用的技巧，希望能成为你的开发工具箱的一部分。1argument.
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值