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

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

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

块与块之间的间距需要固定由谁来负责。例如第一个块和第二个块之间的间距,就需要第二个块的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. 需要准确将页面上的元素分块

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362047.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

最简洁的js鼠标拖曳效果【原】

请原谅我是一个标题档&#xff0c;不过还是很简洁的&#xff0c;因为只是初步的实现的拖曳效果<!DOCTYPE html><html><head><meta http-equiv"Content-Type"content"text/html; charsetutf-8"/><meta http-equiv"Content-…

safari 音频播放问题

问题描述&#xff1a; 点击播放音频按钮发现并没有声音&#xff08;并不是自动播放&#xff0c;是有用户行为的&#xff09;。 import React, { useEffect, useState, useRef } from reactfunction comp() {let [paused, setPaused] useState(true)let audioDom useRef(null…

canvas绘制经典折线图(一)

最终效果图如下&#xff1a; 实现步骤如下&#xff1a;注-引用了jQuery HTML代码 <!doctype html><html lang"en"><head><meta charset"UTF-8"><meta name"Generator" content"EditPlus"><meta nam…

如何从Java EE无状态应用程序连接到MongoDB

在本文中&#xff0c;我将介绍如何从无状态Java EE应用程序连接到MongoDB&#xff0c;以利用与MongoDB Java驱动程序提供的数据库的内置连接池。 如果您开发的REST API对MongoDB执行操作&#xff0c;则可能是这种情况。 获取Java MongoDb驱动程序 要将Java连接到MongoDB&#…

开发流程补全

在开发过程中我意识到一个问题 具体问题就是我没有一个可靠的机制来防止自己犯错 现在的流程是 开发 调试 -> 测试同学 -> 上线 这里测试的时间会有点长&#xff0c;因为bug会有点多&#xff0c;然后需要修改bug&#xff0c;然后测试验证 改bug时间 理解测试bug描述…

Linux 锁机制

本文讨论了 Linux 内核中可用的大量同步或锁定机制。这些机制为 2.6 版内核的许多可用方法提供了应用程序接口&#xff08;API&#xff09; 。但是在深入学习 API 之前&#xff0c;首先需要明白将要解决的问题。 当存在并发特性时&#xff0c;必须使用同步方法。当在同一时间段…

CSS中越界问题经典解决方案

8.CSS相关知识 (1)如何解决父元素的第一个子元素的margin-top越界问题 1)为父元素加border-top: 1px;——有副作用 2)为父元素指定padding-top: 1px;——有副作用 3)为父元素指定overflow:hidden;——有副作用 4)为父元素添加前置内容生成——推荐使用 .parent:before { conten…

用可编写脚本的终结点遍历REST应用程序

我喜欢JDK附带ScriptEngine的事实。 当您要评估服务器环境中已经部署的应用程序并进行故障排除时&#xff0c;它非常灵活。 将此REST端点添加到Java EE应用程序中&#xff0c;它将使您可以立即访问该应用程序的内部状态。 package myrestapp;import java.io.StringReader; imp…

win7笔记本为手机共享wifi

1、cmd netsh wlan set hostednetwork modeallow ssidyourname keyyourpassword 开启win7的虚拟wifi&#xff0c;让电脑变成无线路由器 这时&#xff0c;网络连接中会多出一个网卡为“Microsoft Virtual WiFi Miniport Adapter”的无线连接2。如果没有&#xff0c;需要更新无线…

createjs中shape的属性regX和regY

官方文档说regX和regY是图形与注册点的距离。 那么注册点是什么呢&#xff1f; 我理解注册点就是图形的x/y对应的点图形动效的原点就是注册点 如果修改图形的regX和regY值图形在画布上的位置是会被改变的&#xff0c;但是注册点其实并没有被改变。因为图形的x/y值并没有被改…

CSS3里的display

默认值&#xff1a;inline 适用于&#xff1a;所有元素 继承性&#xff1a;无 动画性&#xff1a;否 none&#xff1a;隐藏对象。与visibility属性的hidden值不同&#xff0c;其不为被隐藏的对象保留其物理空间inline&#xff1a;指定对象为内联元素。block&#xff1a;指定…

H3C 单区域OSPF配置示例二

转载于:https://www.cnblogs.com/fanweisheng/p/11163688.html

身份反模式:联邦筒仓和意大利面条身份

分析公司Quocirca的最新研究证实&#xff0c;现在许多企业的外部用户比内部用户更多&#xff1a;在欧洲&#xff0c;有58&#xff05;的企业直接与其他企业和/或消费者的用户进行交易&#xff1b; 仅在英国&#xff0c;这一数字就达到了65&#xff05;。 如果您回顾历史&#x…

OpenSSL命令

Openssl Windows下编译过程1、下载openssl源代码以及相应的vc工程2、下载perl工具&#xff0c;如&#xff1a;ActivePerl-5.8.8.820-MSWin32-x86-274739.msi3、安装ActivePerl4、打开控制台程序&#xff0c;在openssl解压后的目录下执行Perl Configure VC-WIN32命令&#xff0c…

修改webpack的publicPath为动态设置以适配公司活动平台

背景&#xff1a; 我们需要将React开发的应用部署到一个活动搭建平台上&#xff0c;这意味我们只需要上传源码&#xff0c;没有搭建服务器的环节&#xff0c;没有配置Nginx的环节。具体步骤就是在该平台新建一个活动&#xff0c;然后将自己的源码传到这个活动下&#xff0c;然…

多个气泡向上冒出!

这里展示白色半透明气泡如下图&#xff1a;实际是动态 思路&#xff1a;HTML里只需要一个CANVAS元素&#xff0c;Javascript里操作canvas 1、给canvas里绘制背景图片 2、在绘制半径为0-10px的圆形&#xff0c;x坐标屏幕水平随机&#xff0c;y所标竖直大于屏幕高度。 圆形背景…

注入域对象而不是基础结构组件

依赖注入是Java&#xff08;以及许多其他编程语言&#xff09;中广泛使用的软件设计模式&#xff0c;用于实现控制反转 。 它提高了可重用性&#xff0c;可测试性&#xff0c;可维护性&#xff0c;并有助于构建松耦合的组件。 如今&#xff0c;依赖注入是将Java对象连接在一起的…

分享25个优秀的网站底部设计案例

相对于网站头部来说&#xff0c;关注网站底部设计的人很少。我们平常也能碰到有些网站的底部设计得很漂亮&#xff0c;给网站的呈现来一个完美的结尾。这篇文章收集了25个优秀的网站底部设计案例&#xff0c;一起欣赏。 me & oli La Bubbly Poogan’s Porch GiftRocket Lin…

wbepack中output.filename和output.chunkFilename

对于webpack配置中filename和chunkFilename在使用中有些不懂的地方&#xff0c;研究之后记录如下。 filename: string | function 此选项决定了每个输出 bundle 的名称。这些 bundle 将写入到 output.path 选项指定的目录下。 对于单个入口起点&#xff0c;filename 会是一个…

页面添加锚点后如何点击不改变URL?

直接奔主题&#xff0c;前端简单地锚点实现方法大家都会&#xff0c;无非就是在把 a 标签的 href 写成想要跳到的元素的id &#xff0c;比如点击 <a href"#box"></a> 页面就会自动滚动到 <div id"box"></div> 元素的位置。 那么这…