margin与百分比单位

最新推荐文章于 2021-06-05 01:45:49 发布
最新推荐文章于 2021-06-05 01:45:49 发布
阅读量481 收藏 1
点赞数
分类专栏： css web前端

本文来自慕课网css深入理解之margin，感谢 张鑫旭老师，由于知识点太多，所以以截图的形式，方便理解


着重对比一下，水平与垂直方向的百分比，以及普通元素与绝对定位元素的百分比


无论普通还是绝对定位元素的百分比都是依照宽度作为参考的，只不过宽度的参考对象不同


下面是实现长宽1：2是实例


界域
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css margin 属性 详细使用说明
12-08
CSS margin 属性 设置外边距的最简单的方法就是使用 margin 属性。 margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。 margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白： h1 {margin : 0.25in;} 下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)： h1 {margin : 10px 0px 15px 5px;} 与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的： margin: top
CSS盒模型（margin）
qq_46658904的博客
03-26 650
CSS margin 属性 设置外边距的最简单的方法就是使用 margin 属性。 margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。 margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 15px宽的空白： h1 {margin :15px;} 下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像...
margin和padding
bangxionger9224的博客
03-10 154
一、margin基础语法与结构 1、margin语法 Margin:10px Margin的值是数字+html单位，同时也可以为auto（自动、自适应） 2、应用结构 Div{margin:10px} 设置div对象四边间距为10px 3、Margin说明 margin是设置对象外边距外延边距离，控制块级元素之间的距离 margin的值有三种情况，可以为正整数和负整数并...
css中margin属性值百分比的使用
热门推荐
三三
02-21 1万+
margin使我们使用得很频繁的一个属性，用来设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度，可以有 1 到 4 个值。例子：margin:10px 5px 15px 20px; 说明： 属性值 描述 auto 浏览器计算外边距 length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px % 规定基于父元素的宽度的百分比的外边距 inheri...
css margin 百分比
火星男孩的分享空间
05-21 225
参考： css中margin属性值百分比的使用 菜鸟教程： CSS margin(外边距) 菜鸟教程： CSS margin 百分比 css margin 百分比 ： 规定基于父元素的宽度的百分比的外边距 writing-mode：属性定义了文本在水平或垂直方向上如何排布。 writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr horizontal-tb：水平方向自上而下的书写
margin设置百分比
qq_35134066的博客
01-23 3892
margin设置百分比是基于父容器的宽度，所以无论是margin-top还是margin-bottom都是基于父容器的宽度。 看如下示例： <style> .fu { width: 400px; height: 300px; background: blue; overflow: hidden; } ...
关于padding和margin的百分比
banxia561的博客
06-09 538
最近随手习惯性的写了个样式margin-top: 10%; 本意是想它里上面的高度是现有父节点高度的10%，但事实并非如此。它离上面的高度始终是比预期的多出许多，才着重的研究起来这个属性的具体算法。经过各种尝试，发现这个百分比是针对的父元素的宽度，并不是高度，知道真相的我大吃一惊，所以再捋了捋。 首先在dom元素的高度，大部分都是没有指定的，所以它真正的高度是由里面的内容撑起来的，也就没有所谓高度的概念，另外高度的这个属性也是不会自动继承的，除非你给它设定继承才会。所以高度这东西的不确定性太多，不太方便用
CSS 关于margin你应该要知道的
qq_43293207的博客
04-04 2344
1.margin与元素尺寸 我们知道，在W3C盒模型下（即box-sizing:content-box）给一个元素设置padding内边距的时候，会改变元素原有的实际尺寸（即使你设置该元素的width属性）。而margin属性虽然其本意为外边距，让人以为只会影响其与其他元素间的距离。实际上，当元素处于“充分利用可用空间”的状态时，margin属性会影响其实际尺寸 示例： <div class="container"> <div class="child"></div&g
彻底掌握CSS中的percentage百分比值使用
12-13
百分比旨在相对于父元素的相同属性的...如果用来设置宽和高等非字体尺寸，则以百分比为单位的长度值是基于具有相同属性的父元素的长度值。 CSS Code复制内容到剪贴板 <!DOCTYPE html>   <html> <h
CSS 设置技巧(单位和值与样式设置技巧)
12-13
一、单位和值 1.1 颜色值 　在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种： 　1、英文命令颜色 　前面几个小节中经常...
浅谈css3新单位vw、vh、vmin、vmax的使用详解
12-13
本文介绍了css3新单位vw、vh、vmin、vmax的使用详解，分享给大家，具体如下: 1，vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由...
浅析CSS 属性之中经常出现的百分比
12-13
百分比单位 乘以包含块的宽度 margin, padding, left, right, text-indent, width, max-width, min-width 乘以包含块的高度 top, bottom, height, max-height, min-height 关于包含块（containing block）的概念...
css3背景与边框
07-08
该距离接受数值，百分数，数值不加单位特指像素、 百分比的值是相对于边框背景图片而言的，例如边框图片的大小是300px*240px,我们取百分比为25% 30% 15% 20%，那么它们实际对应的效果就是剪切了图片的60px 90px 36px...
margin-top用法
qq_26069551的博客
01-28 1533
例：margin-top:10px; 10px相当于微信小程序中的20rpx，rpx为微信小程序的单位。
css margin-top设置html元素之间的距离
weixin_33775572的博客
10-08 957
css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离。这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例，需要的朋友可以参考一下。 css margin-top介绍 css margin-top属性指从某一元素的上边框开始，到另外一个相邻的元素的下外边距之间的距离。 每一个元素都存在着外边距。两个相邻的元素之间是靠它们的外边距排...
margin之百分比（二）
不怕不聪明，只怕聪明的人比我努力
05-08 647
你可能从没注意过它 在 margin系列之keyword auto 中，说过了 margin 值为 auto 的情况，这次要聊的是值为百分比的情形。 我必须承认这是一个非常基础的知识点，但有一段时间我发现很多人对此有错误的认知。偶尔在面试或者分享的时候，我会问到这个问题，有人会脱口而出的告诉我他对此的感性理解。 或许现在大多数人对此不屑一顾，但我仍想说一说，这样以后就可以不再问类似的问题了。
HTML5中margin属性应用,CSS重要属性之 margin 属性知识大整合(必看篇)
weixin_39607474的博客
06-05 1803
以下的分享是本人最近几天学习了margin知识后，大有启发，感觉以前对margin的了解简直太浅薄。所以写成以下文章，一是供自己整理思路；二是把知识分享出来，避免各位对margin属性的误解。内容可能会有点多，但都是精华，希望大家耐心学习。以下的分享会分为如下内容：1.margin 属性的简单介绍1.1：普通流的 margin 百分比设置1.2：绝对定位的 margin 百分比设置2.margin...
margin深入理解
女神修炼日记
01-26 652
一、  使用场景：  一侧定宽的自适应布局 两端对齐布局 等高布局 二、 margin百分比单位：   普通元素的百分比margin都是相对于容器的宽度计算的，例如div的width:300px;则margin:10%,则 代表margin的上下左右都是30px;   绝对定位元素的百分比margin是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度
基于关键词搜索结果的微博爬虫（下载即用）.zip
最新发布
05-21
基于关键词搜索结果的微博爬虫（下载即用）.zip本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，当然也适合小白学习进阶。如果基础还行，可以在此代码基础上进行修改，以实现其他功能。 基于关键词搜索结果的微博爬虫（下载即用）.zip本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，当然也适合小白学习进阶。如果基础还行，可以在此代码基础上进行修改，以实现其他功能。 基于关键词搜索结果的微博爬虫（下载即用）.zip本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，当然也适合小白学习进阶。如果基础还行，可以在此代码基础上进行修改，以实现其他功能。 基于关键词搜索结果的微博爬虫（下载即用）.zip本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，当然也适合小白学习进阶。如果基础还行，可以在此代码基础上进行修改
margin top
07-28
可以使用不同的单位来指定margin-top的值，例如像素（px）、百分比（%）、视口宽度单位（vw）等。负值的margin-top可以将元素的上边框与其上方元素重叠。 例如，如果你想将一个元素的上外边距设置为10像素，你可以...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值