margin 百分比是按参照物来计算滴 不知道吧?

<style>
	#demo{
		margin: 0 auto;
		width: 1000px;
		height: 500px;
		background: #eee;
		overflow: hidden;
		/*垂直显示,改变参照物*/
		/*-webkit-writing-mode: vertical-rl;*/
		/*writing-mode: tb-rl;*/
	}
	#demo p{
		margin:10% 1%;
		background: #ccc;
	}
</style>
<div id="demo">
	<p>我是一个p哦</p>
</div>

margin:10% 1%;

横向显示的按宽度算

垂直显示是按高度算

留作纪念。多解释。

margin 百分比是按参照物来计算滴 不知道吧?

时间: 2024-11-07 16:35:50

margin 百分比是按参照物来计算滴 不知道吧?的相关文章

H5移动前端完美布局之-margin百分比的使用

一 ,背景 在移动端页面开发我们经常会遇到一件尴尬的事 我们所开发出来的页面跟设计师所给的页面差别很大 再加上移动设备屏幕的大小不一出来的效果更是参差不齐 然后.... 当然 现实情况没有这么糟糕...但因为前端页面是是最直接的展示给用户的 如果跟差异太大 这个页面其实是失败的 而设计师也会不断的找你调视觉,所以我们就要最大限度的实现设计 作为设计师和用户的桥梁完美的展现页面... 二,使用百分比 在移动页面的布局上,我们必须要考虑的是移动设备分辨率多样性,使用传统的px来定义一个块儿级元素是不

css 巧用 margin/padding 的百分比值实现高度自适应(多用于占位,避免闪烁)

一个基础却又容易混淆的 css 知识点 本文依赖于一个基础却又容易混淆的 css 知识点:当 margin/padding 取形式为百分比的值时,无论是 left/right,还是top/bottom,都是以父元素的width为参照物的! 高度自适应占位 假设有这么个场景: 如上图所示,有这么一种用来放图片的容器,图片都是正方形(为了方便举例用正方形,实际上只要固定长宽比例即可).在 PC 端好办,容器的宽高都写死是多少 px,这样即使图片加载不出来容器都不会变型.但是在移动端,由于各机型分辨率

css挖坑爬坑之div高宽相等

目标效果 对于这么一个头像,外面是一个圆角的div里面是一个img,对于外面的div我要使他高度等于宽度. 发现问题 开始的时候设置宽度为100%然后高度为100%,这样子对于宽度来说的话可以撑满页面宽度,但是高度的话对于设置了父节点高度就会撑满父节点高度,没有设置父节点高度就不会有高度. 解决问题 网上找到了解决方法就是设置div的宽度然后不设置高度,然后设置他的after的margin-top为100%:因为类似于margin这种属性他的百分比相对于父元素宽度 然后上代码 .head{ po

深入理解CSS中的margin

1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准之中,jquery中有相对应的方法 margin与可视尺寸 1.1使用那个与没有设定width/height的普通block水平元素 2.2只适用于水平方向尺寸 <body style="background-color:#1a2b3c"> <div style=&quo

margin小结

一. margin百分比 1. 普通元素的百分比margin都是相对于容器的宽度计算 2. 绝对定位元素的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed)的宽度计算 这是在默认的 writing-mode: horizontal-tb; 和 direction: ltr; 的情况下, 若书写模式变成纵向的时候,其参照将会变成包含块的高度. 二. margin重叠 1. 通常特性 block水平元素(不包括float和absolute元素) 不考虑wr

css的margin

1.适合于没有设定width/height的普通block水平元素 2.只适用于水平方向尺寸 例子:一侧定宽的自适应布局 <html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <title>

盒子模型的百分比是根据什么来的

之前一直很模糊,他们的水平和垂直方向上的百分比是根据什么来的? 是根据宽度还是高度呢? 来揭秘一下把. 首先是 margin: 可以看出margin-top和margin-bottom都是根据父容器的宽度来决定的. 比如我这里的margin:10% 父容器的width:800px;height:600px; 结论:margin百分比也是根据父容器的宽度来决定的.不管margin-top还是margin-bottom. <!DOCTYPE html> <html lang="en

display:table、box和width百分比来均分盒子的比较

box box适合均分内部子盒子没有边框的父盒子,否则内部盒子的边框重叠问题不太好处理,另外如果自盒子间有margin值,中间的margin会是两侧的double,这时可通过nth-child(index)来进行个别调整. box-flex是对除开子盒子内容区.定宽子盒子之外的剩余部分进行划分,而不是把父盒子的整个宽度进行划分,因此就会造成所有子盒子都设置为box-flex:1,但因为子盒子内容多少不一而造成不能均分. box的特点 1.当父元素设置为display:box后,内部的自盒子无论是

细说 CSS margin

作者:https://coding.net/u/zhengkenghong原文:https://blog.coding.net/blog/css-margin 本文着重描述关于 margin,我们日常不太容易发现的“坑”. 盒模型 接触过 CSS 的人应该都知道 CSS 的盒模型: 由内容边缘(Content edge)包围形成的是内容盒(Content Box),类推还有内边距盒(Padding Box).边框盒(Border Box).外边距盒(Margin Box).其中内容盒.内边距盒.