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

于 2019-05-16 10:33:51 发布
阅读量2.1k 收藏
点赞数
分类专栏： IT级别 IT工程师 前端零基础 2年以下的初级程序员和0基础的门外汉 修真院前端小课堂 文章标签： 前端开发 布局 html5 css3 应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jnshu_it/article/details/77449124
版权
本文深入探讨了九宫格布局的实现，包括使用div+css布局、ul,li布局以及CSS的百分比、rem、vw单位，flex和float布局。分析了各种方法的优缺点，如div+css的浏览器兼容性问题，ul,li的默认边距，以及自适应高度的挑战。此外，还讨论了如何去除li和a标签的默认间距，并对比了flex和float布局的区别。" 123421427,12660776,Java实现九九乘法表的四种方法,"['Java', '算法', '编程技巧']
摘要由CSDN通过智能技术生成

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

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

每篇分享文从

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

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

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

 

1.背景介绍

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

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

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

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

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

 

2.知识剖析

盒子的基本要素

content-内容

padding-内边距(填充）

border-边框

margin-外边距

一个盒子实际

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

图中最内部的框content是元素的实际内容

最低0.47元/天 解锁文章
IT修真院
关注
专栏目录
博客
IT行业都有哪些职位，初学者如何选择才能够快速进入这个行业？
05-14 2万+
【本人性格不好，被惹到了必然句句带脏字，所以评论中如果有不开眼的，请慎重。另外，这篇回答从头到尾都是我自己的个人偏见，绝对不客观，也绝对不会为本答案负责。所以，有自己正常思维的请不要再看下去了。】互联网行业的薪资水准相对较高，刚入行一个月，半年，或者一年超过其他行业薪资很正常。那么，互联网行业究竟有哪些职位呢，又分别适合哪些传统行业转型？1.产品2.UI3.CSS...
博客
什么是无人教学
04-13 700
欢迎来到IT修真院，来了解这种极具开创性和颠覆性的无人教学模式。在无人教学的模式中，并没有老师的角色，而是用一套智能教学的系统来代替“老师授课，学生听课”的方式，是的，我们通过任务分配的方式，让学员在完成任务的过程中主动学习。把被动听课，改成主动学习，仅仅是一个开始，要完善这种学习模式，还需要完善以下的教学体系：1 界定技能边界，确保能达到正式工作的要求2 分解任务，保证所有的任务都来自真实项目3 明确验收标准，来确定任务能否通关4 提供操作步骤，引导学员按步骤完成学习...
博客
Vue 骚技巧，策略模式实现动态表单验证
07-23 1012
策略模式（Strategy Pattern）又称政策模式，其定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换。封装的策略算法一般是独立的，策略模式根据输入来调整采用哪个算法。关键是策略的实现和使用分离。注意：本文可能用到一些编码技巧比如 IIFE（Immediately Invoked Function Expression, 立即调用函数表达式），ES6 的语法 let/const、箭头函数、rest 参数，短路运算符 等，如果还没接触过可以点击链接稍加学习 ~1...
博客
由浅入深，66条JavaScript面试知识点
07-22 1361
钱昱多年前端工作经验 《JavaScript 设计模式精讲》 作者，主要分享前端方面技术博客公众号：前端下午茶HTML&CSS： 浏览器内核 盒模型、flex布局、两/三栏布局、水平/垂直居中； BFC、清除浮动； css3动画、H5新特性。 JavaScript： 继承、原型链、this指向、设计模式、call, apply, bind,； new实现、防抖节流、let, var, const 区别、暂时性死区、eve...
博客
进击的 JAMStack
07-21 696
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站什么是JAMStack概念JAMStack中的JAM其实是三个词的缩写，它们分别是JavaScript, APIs以及Markdown。而Stack用中文的说法就是技术栈（Tech Stack），也就是我们在构建应用的时候具体使用到的技术的集合。举个例子，国外现在比.
博客
Vue.js 组件复用和扩展之道
07-20 820
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站软件编程有一个重要的原则是 D.R.Y（Don't Repeat Yourself），讲的是尽量复用代码和逻辑，减少重复。组件扩展可以避免重复代码，更易于快速开发和维护。那么，扩展 Vue 组件的最佳方法是什么？Vue 提供了不少 API 和模式来支持组件复用和扩展，你.
博客
深入理解Java的接口和抽象类
07-17 592
作者简介：工会10年后端工作经验，主要记录分享：java学习方法、学习心得等。内容包含Java技术、前后端、数据库、编程感悟等干货。公众号：java工会对于面向对象编程来说，抽象是它的一大特征之一。在Java中，可以通过两种形式来体现OOP的抽象：接口和抽象类。这两者有太多相似的地方，又有太多不同的地方。很多人在初学的时候会以为它们可以随意互换使用，但是实际则不然。今天我们就一起来学习一下Java中的接口和抽象类。一、抽象类　 在了解抽象类之前，先来了解一下抽象方法。抽象方法..
博客
一篇文章了解并发数据结构
07-16 704
作者简介：工会10年后端工作经验，主要记录分享：java学习方法、学习心得等。内容包含Java技术、前后端、数据库、编程感悟等干货。公众号：java工会CopyOnWriteArrayList的内部实现与Vector不同。它是当对象进行写操作时，复制该对象；若进行的是读操作，则直接返回结果，操作过程中不进行同步。CopyOnWriteArrayList很好地利用了对象的不变性，在没有对对象进行写操作前，由于对象未发生改变，因此不必加锁。而在试图改变对象时，总是先获取对象的一个副本，然后对副本.
博客
Java 8 最佳技巧
07-15 565
作者简介：工会10年后端工作经验，主要记录分享：java学习方法、学习心得等。内容包含Java技术、前后端、数据库、编程感悟等干货。公众号：java工会在过去的几年中，我一直使用Java 8 进行了很多的编码工作，用于开发新应用和迁移遗留应用，我觉得是时候写一些有用的”最佳实践”。我个人不喜欢”最佳实践”这个术语，因为它意味着“一刀切”的解决方案，当然编码工作是不会这样的–这是因为我们开发人员会想出适合我们的方案。但我发现我对Java8特别的喜欢，它让我的生活更轻松一点，所以我想就此话..
博客
Java多线程编程基础三（原子性，可见性和有序性）
07-14 578
作者简介：华哥10年+后端开发工作经验，主要分享：关于java体系的知识，如：java基础知识/数据结算/算法，Spring/MyBatis/Netty源码分析，高并发/高性能/分布式/微服务架构的原理，JVM性能优化等。公众号：java杂记在并发编程中，我们通常会遇到以下三个问题：原子性问题，可见性问题，有序性问题。一、原子性即一个操作或者多个操作，要么全部执行并且执行的过程不会被任何因素打断，要么就都不执行。原子性就像数据库里面的事务一样，他们是一个团队，同生共死。...
博客
史上最全的 JavaScript 模块化方案和工具
07-13 666
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站模块化是大型前端项目的必备要素。JavaScript 从诞生至今，出现过各种各样的模块化方案，让我们一起来盘点下吧。IIFE 模块默认情况下，在浏览器宿主环境里定义的变量都是全局变量，如果页面引用了多个这样的 JavaScript 文件，很容易造成命名冲突。/.
博客
10 个很实用的 JavaScript 技巧
07-09 613
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站编程语言通常暗藏着各种技巧，熟练使用这些技巧可以提高开发效率。JavaScript 就是一门技巧性很强的语言，掌握常见的语法技巧不但可以加深对语言特性的理解，还可以简化代码，提高编码效率。本文分享 10 个常用的技巧，希望能成为你的开发工具箱的一部分。1argument.
博客
五分钟了解浏览器工作原理
07-08 791
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站Web 浏览器无疑是用户访问互联网最常见的入口。浏览器凭借其免安装和跨平台等优势，逐渐取代了很多传统的富客户端。Web 浏览器通过向 URL 发送网络请求来访问 Web 服务器资源，并以交互性的方式展示这些内容。基本操作包括获取、处理、显示和存储。常见的浏览器包括..
博客
前端必备基础知识：window.location 详解
06-19 3088
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站前端开发人员对window.location对象应该不陌生，通过它不但可以获取当前页面的地址信息，还可以修改某些属性，实现页面跳转和刷新等。我们以一个常见的 URL 为例，看看window.location包含哪些属性和方法。window.location.hre..
博客
ES6 箭头函数大起底：熟知这几个特点让你少踩很多坑
06-18 600
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站我们都知道，在 JavaScript 里定义函数有多种方式。最常见的是用function关键字：//函数声明functionsayHi(someone){return`Hello,${someone}!`;}//函数表达式consts...
博客
Java原子类实现原理分析
06-11 552
作者简介：华哥10年+后端开发工作经验，主要分享：关于java体系的知识，如：java基础知识/数据结算/算法，Spring/MyBatis/Netty源码分析，高并发/高性能/分布式/微服务架构的原理，JVM性能优化等。公众号：java杂记在谈谈java中的volatile一文中，我们提到过并发包中的原子类可以解决类似num++这样的复合类操作的原子性问题，相比锁机制，使用原子类更精巧轻量，性能开销更小，本章就一起来分析下原子类的实现机理。悲观的解决方案（阻塞同步）我们知道，num+
博客
详解Spring Retry实现原理
06-09 863
作者简介：华哥10年+后端开发工作经验，主要分享：关于java体系的知识，如：java基础知识/数据结算/算法，Spring/MyBatis/Netty源码分析，高并发/高性能/分布式/微服务架构的原理，JVM性能优化等。公众号：java杂记本文通过一个简单的例子演示Spring Retry的实现原理，例子中定义的注解只包含重试次数属性，实际上Spring Retry中注解可设置属性要多的多，单纯为了讲解原理，所以弄简单点，关于Spring Retry可查阅相关文档、博客。注解定义
博客
五分钟了解CDN
06-05 585
作者简介：华哥10年+后端开发工作经验，主要分享：关于java体系的知识，如：java基础知识/数据结算/算法，Spring/MyBatis/Netty源码分析，高并发/高性能/分布式/微服务架构的原理，JVM性能优化等。公众号：java杂记一、什么是CDN？CDN全称Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础.
博客
HTML5基本布局
06-04 633
作者简介：杨老师10年前端工作经验，主要分享：前端、UI设计、平面等。公众号：web前端开发HTML4HTML5<!DOCTYPE html><htmlang = "en"><head><meta charset = "utf-8"><title>HTML5 Demo</title><body><header><h1></h1><h2&gt.
博客
HTML5的22小技巧
06-03 527
作者简介：杨老师10年前端工作经验，主要分享：前端、UI设计、平面等。公众号：web前端开发1. 新的文档类型（Doctype）<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>上面这个既麻烦又难记的XHTML文档类型你还在使用吗？ 如果还是这样的话，现在该切换到新的HTML5文档类型.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值