em与rem的差异，  margin垂直布局与水平布局的差异

最新推荐文章于 2022-10-23 17:21:38 发布
最新推荐文章于 2022-10-23 17:21:38 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： html/js/css 文章标签： HTML margin em
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013013856/article/details/88062563
版权
本文探讨了HTML中em和rem两个长度单位的区别，em是相对于当前元素的字体大小，而rem则是相对于根元素html的字体大小。此外，还详细分析了margin在垂直布局与水平布局中的差异，包括相邻div间间距的计算方式，并提供了页面布局的效果说明。
摘要由CSDN通过智能技术生成

1、HTML长度单位之em与rem   

em与rem都是相对长度单位：

     em是相对于当前元素的字体大小font-size的长度;

<div style="font-size:12px">
    <div style="font-size:36px;margin:3em">
        此处的margin:3em 具体的长度换算出的结果就是 108px = 36px * 3;
    </div>
</div>

1

     rem是相对于页面根元素html标记的font-size的长度；

<html style="font-size:12px">
    <div styl
最低0.47元/天 解锁文章
贪婪熊
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解rem 适配布局
12-13
当今手机种类繁多 且不说iphone系列，安卓手机的种类已经数不胜数了，所以不可能每一款手机都要写一套布局样式，这也是不可能做到的，但是对于越来越精益求精的前端来说 ，当然要找到一个合理的解决方案。rem 就是用来自适应布局的。 适配要达到的效果，如下图（简单的示范一下） 两个div不论在大屏还是小屏上都是占据屏幕的一半 虽然上面这种简单的使用百分比可以实现但是，百分比无法实现字体的自适应，百分比转换成相应的尺寸还是很难的。接下来就说说这次我们的主角 rem （我们一般只适配宽度） rem 原理解析 首先rem是一个相对于根元素fontSize大小的相对单位，也就是说 1rem 等于 htm
轻松运用rem布局 以及rem与em区别
lanseguhui的博客
12-12 302
rem 布局的定义： css(相对单位，是相对于网站根元素的font-size来计算大小，比如说html的font-size:100px,那么设置的0.1rem就是10px,如果没有设html的字体大小，就是依据浏览器的默认字体大小，一般默认是16px，用户可以自行设置，所以在使用rem布局的时候，第一步就是给html设置font-size) 使用场景，一般呢 rem布局是用来适配手机和ipa...
用rem时height和margin有时候没有被缩放到当前比例
weixin_30952535的博客
09-21 285
用rem时height和margin有时候没有被缩放到当前比例？？？？ 因为受最小字体的影响： chorome浏览器的最小字号默认是12px,你把html的字号设为625%,或者font-size=100px;就没问题了， 使用的时候用：rem值=原本想设置的像素值/100 或者加上下面这个来设置： window.onload=function () { ...
页面适配之pt、px、em、rem用法和特点
热门推荐
小小喵的博客
08-10 1万+
因为自己也经常做移动端的开发工作，现总结一份页面适配的笔记。 1. pt 点（Points），绝对长度单位。 印刷业上常使用的单位，磅的意思，一般用于页面打印排版。 不知道经常做设计的同学知不知道zeplin这个网站，它用的像素单位都是pt。 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px 用法： div { font-...
响应式布局--设置rem自适应
weixin_30901729的博客
12-18 184
//designWidth:设计稿的实际宽度值，需要根据实际设置 //maxWidth:制作稿的最大宽度值，需要根据实际设置 //这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750) ;(function(designWidth, maxWidth) { var doc = document, ...
flex布局margin-right失效
weixin_44679078的博客
04-18 6068
在写一个商品列表时候遇到的 想要的效果：一个大div里面放小div，大的div左右设置margin，然后里面的小div两边贴边排列。 遇到的问题：大div右边margin不显示，而且大的div大小就是铺满屏幕的大小 原因：大的div设置了width是100% 解决方法：把大div的width去掉后正常显示 .goodslist { display: flex; justify-co...
vue中使用rem布局代码详解
12-13
1、npm i amfe-flexible 2、import ‘amfe-flexible‘ 然后再，安装postcss-px2rem...rem布局由于其根据屏幕宽度的改变修改相应的rem与px的转换比例，这样非常适合移动端的项目。 在不同的分辨率下，都会有较好的显示
自适应布局rem
01-07
自适应布局rem //百分比布局只能实现宽度自适应 高度无法自适应 //高度也自适应 使用一个新的单位rem rem ： root element 根元素 参照根元素的字体大小，是相对单位 默认html元素文字大小是16px 所以 1rem == 16px ...
如何利用vw+rem进行移动端布局
11-20
你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹 简单介绍下rem布局方案 rem是css中的长度单位，1rem=根元素html的font-size值。当页面中所有...
rem布局原理解析
12-14
rem是现在主流的移动端自适应布局方案，本文主要介绍了rem布局的原理和通用方案 原理 首先说一下，我们想要达到的自适应效果是什么。很简单：元素、字体大小能随着屏幕大小（一般相对于宽度来说）变化而变化，在大...
Qt——布局
zhangchuan7758的博客
01-20 1万+
Qt布局介绍：水平布局、垂直布局、栅格布局、表单布局、堆栈布局
typora 主题 背景图片 透明代码块
mqnu0的博客
08-15 1158
个性主题
深入学习下 CSS 间距相关的知识
前端达人
10-23 1146
https://ishadeed.com/article/spacing-in-css/如果两个或更多元素接近，则用户将假设它们以某种方式属于彼此。当对多个元素进行分组设计时，用户可以通过它们之间的空间量来决定它们之间的关系。如果没有间距，用户将很难分清页面上哪些项目内容相关，哪些项目内容不相关。因此，在本文中，我将分享关于 CSS 中的间距、实现该间距的不同方法以及何时使用填充或边距的所有信息。...
在html中设置外边距,CSS外边距设置属性margin用法
weixin_33364098的博客
06-04 2694
本文向大家描述一下CSS外边距属性margin的用法，设置外边距的最简单的方法就是使用margin属性，这个属性接受任何长度单位、百分数值甚至负值，相信本文介绍一定会让你有所收获。CSS外边距围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用margin属性，这个属性接受任何长度单位、百分数值甚至负值。CSS margin属性设置外边距的最简...
正确理解CSS中的margin合并
{{ Coding enjoy }}
03-13 3076
前言 最近在学习很多开发过程中容易忽悠但是又很重要的知识点，很多时候用的少不代表它不重要，这里将它们写出来以记录，如果有写的不好的地方请指正。 概念 margin合并是指块级元素的上外边距与下外边距有时会合并为单个外边距，有两点需要理解。 1. 在块级元素中，不包括浮动和绝对定位元素 2. 只发生在和当前文档流方向的相垂直的方向上 场景 一、相邻兄弟元素margin合并 ...
前端 css中1rem、1em、1vh、1px各自代表的含义
qq_40596488的博客
10-15 5616
1rem、1em、1vh、1px各自代表的含义 rem rem是全部的长度都相对于根元素 元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。 em 子元素字体大小的em是相对于父元素字体大小 元素的width/height/padding/margin用em的话是相对于该元素的font-size vw/vh 全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适
android水平布局和垂直布局,Flutter布局篇（1）--水平和垂直布局详解
weixin_29363945的博客
05-26 1513
版权声明：本文首发在公众号Flutter那些事，未经授权，严禁转载。本文版权归作者AWeiLoveAndroid所有，未经授权，严禁私自转载。转载请声明原文链接和作者信息。转载请注明出处，谢谢合作先来看看本文的目录，如下图所示：在原生Android开发中，我们经常会用LinearLayout来达到水平或垂直方向的布局，在Flutter中有两个常用的组件也能够做到类似的效果，分别是Row和Colum...
让一个定位的盒子水平垂直居中
Jack_13201的博客
08-28 882
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
QT:水平布局和垂直布局
zq9955的博客
02-05 1265
QVBoxLayout:垂直布局 QWidget *widget = new QWidget(); QVBoxLayout * vBoxLayout = new QVBoxLayout(); QLabel *label = new QLabel("hello"); QPushButton *pushButton = new QPushButton("hi"); vBoxLayout->addWidget(label); vBoxLayout->addWidget(pushButton); wi.
px与em还有rem得区别以及使用场景
最新发布
07-15
px、em和rem是用于网页开发中定义长度单位的三种常见选项。它们在使用和计算上有一些区别，具体如下： 1. px（像素）：px 是最基本的长度单位，表示屏幕上的一个像素点。它是一个绝对单位，意味着它的大小在不同的设备和屏幕分辨率下是固定的。px 的使用相对简单，适合在需要精确控制元素大小和位置的情况下使用，比如设计稿的还原和特定元素的布局。 2. em（相对于父元素字体大小的倍数）：em 是一个相对单位，相对于父元素的字体大小进行计算。如果一个元素的字体大小为 16px，设置为 2em，则相当于 32px。em 适合在需要相对于父元素进行缩放的情况下使用，比如设置标题、段落等文本元素的字体大小。 3. rem（相对于根元素字体大小的倍数）：rem 也是一个相对单位，相对于根元素（即 html 元素）的字体大小进行计算。与 em 不同的是，rem 的计算不会受到父元素字体大小的影响。因此，rem 更适合在需要整个页面元素的大小比例都随着根元素字体大小变化的情况下使用，比如响应式网页设计。 使用场景： - px：适用于需要精确控制元素大小和位置，尤其是在固定布局的情况下。 - em：适用于需要相对于父元素进行缩放的文本元素，如标题、段落等。 - rem：适用于需要整个页面元素的大小比例随根元素字体大小变化的响应式设计。 需要注意的是，不同的单位在不同的场景下有不同的优劣，并且可以混合使用。根据实际需求和网页布局的要求，选择合适的单位进行使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值