布局方案的思路整理

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

水平居中 方案

垂直居中 方案

水平居中和垂直居中 方案

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

比如说用到的

display : flex

display:table

display: inline-block

display : table-cell

vertical-align:middle

justify-content: center

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

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

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

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

第二步,实现水平居中

css特性与需求的联系。

时间: 2024-10-21 11:55:48

布局方案的思路整理的相关文章

微信小程序之九宫格布局方案

2018转眼即将逝去了,由于近期在弄一个小程序的项目的原因,今天在这里记录一下小程序之九宫格布局方案,以备后期需要和相关知识温习. 对于整个小程序项目,原生开发小程序的方式这里就不多说了,官方有确切的说明文档以及详细的Api.近期公司做的小程序项目是采用wepy框架实现的,个人觉得这个框架还是很不错的,类似于vue的风格.总之,从构建到最后微信web开发者工具调试和预览,效果还是可以的. 至于具体的小程序wepy框架开发过程,安装工具等这里不做多讲(不是今天这篇文章的重点),本次想借着写这篇博文

淘宝弹性布局方案lib-flexible实践

2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那篇文章的总结,可惜的是因为项目的关系,这两个月来几乎没有机会做移动类项目的工作,所以那些理论一直没有得到真正的实践.这次因为公司有一个app需要做一个推广的下载页面,虽然简单,但也值得一试那篇文章里提到的适配方法,所以本文的内容就是介绍该文中提到的淘宝的做法:<lib-flexible弹性布局方案>

「前端」rem 缩放方案 flexible-js 兼容 375px 方案的思路

本文来自尚妆前端团队南洋 发表于尚妆github博客,欢迎订阅. 移动端H5页面rem缩放方案flexible.js兼容375px方案的思路 参考: 移动端高清.多屏适配方案 viewport-and-flexible.js flexible.js github 一个新的项目复用了一些老页面,老页面是使用375px方案进行移动端适配的,meta[viewport]使用的是<meta name="viewport" content="width=375, user-sca

移动适配请使用比rem等更好的布局方案

??移动端大行其道,rem/em.百分比.响应式方案更是层出不穷,看见周围的伙伴们都在对使用rem和百分比情有独钟,可我却偏不爱,之所以出现如此多的方法,其目的只有一个屏幕适配. ??屏幕适配顾名思义就是一张设计稿还原出的程序要适应于当下市场上各种大小屏幕不一的终端,做到写一次各种终端大小的屏幕都能比例协调的显示.下面我们先来看下大家耳熟能详的几种方案是如何去解决屏幕适配的. rem/em:rem根元素字体大小单位,em元素字体大小单位.使用rem的时候我们需要在css中先为html元素设定fo

快速排序思路整理

引言: 快速排序和归并排序是面试当中常常被问到的两种排序算法,在研究过数据结构所有的排序算法后,个人认为最复杂的当属快速排序.从代码量上来看,快速排序并不多,我之所以认为快排难以掌握是因为快排是一种递归算法,同时终止条件较多.如果你刚刚把快排的思路整理过一遍可能觉得不难,然而一个月之后呢? 面试要求的是临场发挥,如果不是烂熟于心,基本就卡壳了.在面试官眼里,你和那些完全不懂快速排序算法的菜逼是一样的,也许实际上你可能私底下已经理解很多遍了,然而并没卵.所以当下问题就是,如何将快排烂熟于心?我觉得

移动端自适应布局方案尝试

原文地址:移动端自适应布局方案尝试 问题 刚开始接触移动端H5页面的时候最困扰的几个问题是: 6或6p上明明是1px的边框怎么就成了2px或3px辣么粗! 图片,div等如何等比自适应设计图 后来慢慢知道了第一点是由于retina屏幕下设备像素比的问题造成,第二点知道了单位rem. 目的 不想因为使用rem而一一去计算设计稿的尺寸,设计稿750的尺寸的标注可以直接在sass中使用:字体不使用rem缩放,原因是: 显然,我们在iPhone3G和iPhone4的Retina屏下面,希望看到的文本字号

搜索与排名思路整理

学习<集体智慧编程>第4章的思路整理: 本章的主要内容就是建立一个模拟的全文搜索引擎,主要的大步骤为:1.检索网页,2.建立索引,3.对网页进行搜索 4.多种方式对搜索结果进行排名 一.检索网页:主要利用python写了一个爬虫软件,通过爬取一个网站上链接来不断的扩充爬取的内容.主要利用了python的urllib库和BeautifulSoup库.这部分比较简单,核心代码如下: def crawl(self,pages,depth=2): for i in range(depth): newp

手机端页面布局方案

布局方案: 方案一:100%布局(高度固定,宽度自适应)(流式布局) 1.控件弹性 2.图片等比例 3.文字流式 特点:手机越大,显示内容越多 方案二:REM布局(等比缩放布局,整个页面等比例缩放) vw.vh单位:1vw.vh等于当前屏幕宽度.高度(逻辑宽度,window.innerWidth)的1%. 原文地址:https://www.cnblogs.com/Mr-Car/p/10966595.html

16 飞机大战:思路整理、重要代码

思路整理 重要代码 0.重写方法万万检查记得要不要继承父类方法 def __init__(self): super().__init__() 1.创建游戏时钟:用来设置游戏刷新率 # 新建游戏时钟对象 self.clock = pygame.time.Clock() ... ... # 设置游戏刷新率 self.clock.tick(60) #60帧/s 2.精灵组 # 创建xx精灵 self.xx = Xx() #其中Xx是Xx类 # 创建xx精灵组 self.xx_group = pygam