布局方案的思路整理

简介: 之前根据网易前端微专业的课程,写了博客 水平居中 方案 垂直居中 方案 水平居中和垂直居中 方案   在最后,老师总结了『解决方案』提出的思路 比如说用到的 display : flex display:table display: inline-block display : table-cell vertical-align:middle justify-content: center 这样的一些属性 和 值,他的特性是什么? ① 一定要对这些特性非常掌握。

之前根据网易前端微专业的课程,写了博客

水平居中 方案

垂直居中 方案

水平居中和垂直居中 方案

 

在最后,老师总结了『解决方案』提出的思路

比如说用到的

display : flex

display:table

display: inline-block

display : table-cell

vertical-align:middle

justify-content: center

这样的一些属性 和 值,他的特性是什么?

① 一定要对这些特性非常掌握。

② 然后,对『问题』进行分解。比如一开始讲到要『水平居中』,那么当时的需求是“里面的元素宽度是不一定的,外面的元素宽度也不一定”,那么我们就可以把这个需求拆分出来,把这个问题拆分成两个,

第一步,实现里面的元素宽度跟着内容走

第二步,实现水平居中

css特性与需求的联系。

开始做,坚持做,重复做
相关文章
|
2月前
|
前端开发 JavaScript API
如何实现两栏布局?这篇文章告诉你所有的细节!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
9月前
|
缓存 运维 算法
三十一、 套路篇:磁盘 I/O 性能优化的几个思路
三十一、 套路篇:磁盘 I/O 性能优化的几个思路
251 0
三十一、 套路篇:磁盘 I/O 性能优化的几个思路
|
10月前
|
算法
面试题思路分享以及延伸问题探讨三
让我们紧接上文 单链表面试题分享二 ,这篇文章只给大家分享三道题.它们分别是:1.环形链表初阶 力扣141题-----2.环形链表进阶 力扣142题----- 3.复制带随机指针的链表 力扣138题 .值得注意的是这三道题的技巧性很强,是属于能想到方法实现起来很简单,想不到方法实现起来很复杂甚至不能实现的题.这里我提供给大家的思想和方法可能是我们之前出来没有遇见过也不好想到的方法,证明了这个地方我们已经开始上难度了,开始真正的在"玩"链表了.
|
前端开发
第32/90步《前端篇》第8章 重构记分板、背景、页面和游戏对象 第23课
今天学习《前端篇》第8章 重构记分板、背景、页面和游戏对象 第23课 创建游戏背景对象和游戏对象,这节课我们尝试创建游戏背景对象和游戏对象。
45 0
|
前端开发
第34/90步《前端篇》第8章 重构记分板、背景、页面和游戏对象 第25课
今天学习《前端篇》第8章 重构记分板、背景、页面和游戏对象 第25课 重构游戏对象,这节课我们继续模块化重构,将页面类拆分到单独的文件中,清除一些不再需要的变量等,让游戏代码的结构更加合理。
49 0
|
前端开发
第31/90步《前端篇》第8章 重构记分板、背景、页面和游戏对象 第22课
今天学习《前端篇》第8章 重构记分板、背景、页面和游戏对象 第22课 创建记分板模块,这节课我们将实现记分板对象的模块化。目前,游戏中还没有记分板对象,在屏幕下方只有两个分数,一个是用户的,一个是系统的,这节课将仿照挡板的设计方法创建一个记分板基类,然后再派生出两个子类,即用户记分板与系统记分板。
57 0
|
前端开发
第33/90步《前端篇》第8章 重构记分板、背景、页面和游戏对象 第24课
今天学习《前端篇》第8章 重构记分板、背景、页面和游戏对象 第24课 创建页面对象,这节课开始创建游戏页面。
51 0
|
移动开发 前端开发 JavaScript
利用前端技术写爱心页面的一些思路
作为前端开发者,我们常常不仅需要构建漂亮的、高效的网站,还需要为用户提供更多的情感体验。其中一种情感表达方式就是利用前端技术实现爱心特效。下面我将分享几种实现方式。
181 0
|
前端开发
前端学习案例3-三栏布局1 原
前端学习案例3-三栏布局1 原
49 0
前端学习案例3-三栏布局1 原
|
数据采集 消息中间件 监控
最终整体回顾总结(流程-ppt)|学习笔记
快速学习最终整体回顾总结(流程-ppt)
77 0
最终整体回顾总结(流程-ppt)|学习笔记