关于页面布局间距使用的经验之谈

在页面布局的时候遇到一个问题在此记录。

有如下布局需求。页面上大多数都是这样的，一块一块从上到下排列。

块与块之间的间距需要固定由谁来负责。例如第一个块和第二个块之间的间距，就需要第二个块的margin-top完成，文字和第二个块之间的间距由文字的margin-top来完成。这样做的好处是，如果这些块少了一个也不会破坏页面布局。如果，不固定，这个间距一会由上面的margin-bottom，一会由下面的margin-top实现，那么布局就相对不稳定。如果一个元素某些情况不可见，并且自己实现了上下间距，那么元素不可见的时候相邻上下两个元素就会挨在一起，显然这是有问题的。

当然不一定非要固定为margin-top，margin-bottom也可以。

还有一个问题，当固定间距为margin-top的时候，有可能并不能完全满足需求。例如上面的第一行文字和最后一行文字和按钮的关系在某种情况下就很微妙。

我希望第一行文字消失的时候按钮和上面块的间距保持为第一行文字和上面块的间距。并且，第二行字消失的时候按钮和下面距离保持为第二行字和下面块的距离。

如果第一行文字和上面块的间距由自己的margin-top实现，按钮和第一行文字的间距是按钮的margin-top，那么如果第一行文字消失按钮就会挨着上面的块显然不对。这时候就需要一个整体的概念来反转这种关系。在外面包一层父元素，两行文字和按钮是一个整体，父元素的margin-top作为外部块的间距，然后第一行文字和按钮之间的间距用文字的margin-bottom来负责。这样即使第一行文字消失了，也不会影响按钮的展示。

下面的文字还是按照margin-top来完成即可，这样下面的文字消失了也会影响按钮的布局，下面文字和下面块的间距交给下面块去处理吧。

所以总结起来就是：

1. 布局的间距是谁负责的要有规律

2. 需要准确将页面上的元素分块

关于页面布局间距使用的经验之谈相关推荐

LaTex关于页面布局的使用（1）--- 段间距、行间距、边注、脚注、对齐
记录关于LaTex关于页面布局中的一些基础知识 1.在进入页面布局的时候需要引入相应的包 \usepackage[T1]{fontenc} %解决ff1等copy问题 \usepackage{sets ...
Android 页面布局xd,Adobe XD强大的布局系列工具助你事半功倍
数字设计有多种形式-从移动端.桌面网站到显示屏应用程序.智能助手.车载娱乐系统(例如CarPlay和Android Auto)等等.为当今的应用程序打造数字体验意味着需要针对各种屏幕尺寸.布局和交互类 ...
学习笔记之数据可视化（二）—— 页面布局（下）
续上一章 2.7 地图区域(.map) 2.7.1 实现步骤: 2.8 用户统计模块 2.8.1 布局: 2.8.2 柱状图 2.9 订单模块 2.9.1 订单区域布局 2.9.2 订单区域(orde ...
学习笔记之数据可视化（二）——页面布局（中）
续上一章 2.6 监控区域布局 2.6.1 布局结构解析: 2.6.2 样式描述: 2.6.3 HTML结构及CSS样式代码 2.6.3 ### 监控区域-效果 2.6.7 点位区域(point) 2 ...
学习笔记之数据可视化（二）——页面布局（上）
~续上一章 2. 项目页面布局 2.1 基础布局 2.1.1 PC端屏幕宽度适配设置 2.1.2 主体容器viewport背景图片 2.1.3 HTML结构 2.1.4 css样式代码 2.2 边框图 ...
负值之美：负margin在页面布局中的应用
本文转载自:http://www.topcss.org/?p=94,有修改. 负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这 ...
jsp+左间距_交互规范：栅格系统让页面元素间距更统一
栅格系统在页面排版布局.尺寸设定方面给了设计者直观的参考,它让页面设计变得有规律,从而减少了设计决策成本:提高了页面布局的一致性跟复用性.本文主要围绕什么是栅格系统,如何搭建栅格系统,栅格系统的应用 ...
CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
CSS几种常见的页面布局方式介绍
问题:CSS几种常见的页面布局方式介绍? CSS常见的有以下7种,必须要掌握的是前3种: flex弹性盒子(弹性布局): rem布局(一般都是flex+rem使用的比较多): 响应式布局(响应式布局的 ...

关于页面布局间距使用的经验之谈

关于页面布局间距使用的经验之谈相关推荐

最新文章

热门文章