【margin 百分比是按參照物来计算滴 不知道吧?】的更多相关文章

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=&…

margin百分比，重叠和auto

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

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

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

margin百分比的相对值--宽度！

假设一个块级包含容器,宽1000px,高600px,块级子元素定义 margin:10% 5%; 那么 margin的 top, right, bottom, left 计算值最终是多少px? 不是100px 30px 100px 30px,而是100px 50px 100px 50px! 结论: margin 的百分比值参照其包含块的宽度进行计算. 提示: 在w3c的规范中也是这样描述的: margin 的百分比值参照其包含块的宽度进行计算,同样的padding如果设置成百分数的话,其盒子模型…

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系列之百分比

本系列摘自  px; height: 600px; } #demo p{ margin: 10% 5%; } HTML: <div id="demo"> <p>恩,注意看我所在的位置.</p> </div> 事实告诉我们结果是 100px 50px 100px 50px,不论结果是否符合你的预期,我们先来看demo验证一下:margin百分比结果猜想,当然,你也根据上面还原的代码自己创建一个例子. 为什么会这样? 诧异吗?不用怀疑浏览器出…

当padding/margin的取值形式为百分比时。。。。。

一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/right以父元素的width为参照物好理解,但是top/bottom为什么也是以父元素的width为参照物的呢?网上众说纷纭,关键还是看W3C的规范: 利用这个规范,我们可以用来解决移动端的高度自适应占位问题,在移动端,高度一般都是用内部撑开,例如,一个div包着一个图片.如果是用图片撑开div的…

CSS margin详解

以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄.所以写成以下文章,一是供自己整理思路:二是把知识分享出来,避免各位对margin属性的误解.内容可能会有点多,但都是精华,希望大家耐心学习. 以下的分享会分为如下内容: 1.margin 属性的简单介绍 1.1:普通流的 margin 百分比设置 1.2:绝对定位的 margin 百分比设置 2.margin 无法适用的元素 3.外边距折叠 (Collapsing margins) 3.1:Col…

理解margin

margin可以改变容器的尺寸 //元素尺寸分为可视尺寸,占据尺寸 margin与可视尺寸 1.适用于没有设定width/height的普通block水平元素 2.只适用于水平方向的尺寸 应用:一侧定宽的自适应布局,两端对齐布局等 例如:左边有一张图片固定宽度,右面有文字,无论怎么改变文字的宽度,图片都不会动. margin-left:70px   margin与占据尺寸 1.block/inline-block水平元素均适用 2.与有没有设定width/height值无关 3.适用于水平和垂直…

CSS深入理解之margin

  前言   改变容器尺寸   margin改变容器尺寸有以下两个限制条件: 使用于没有设置宽高的普通block元素float/absolute/fixed元素 以及 inlines水平 table-cell元素. 只试用于水平方向   margin百分比   1.普通元素的百分比margin值是相对于容器宽度计算的2.绝对定位元素的百分比margin值是相对于第一个定位祖先元素的宽度计算   也就是说margin的宽度都是相对于其祖先元素计算的.   margin重叠   1.block水平元…

巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/right以父元素的width为参照物好理解,但是top/bottom为什么也是以父元素的width为参照物的呢?网上众说纷纭,关键还是看W3C的规范: Note that in a horizontal flow, percentages on 'margin-top' and 'mar…

margin小结

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

css布局之负margin妙用及其他实现

相信大家在项目的开发中都遇到过这样的需求,一行放X(X>1)个块且相邻块之间的间距相同. 大概就是上面这个样子,下面介绍几种实现的方式. 1.负margin大法 设置好元素的宽度和留白占满父级的宽度,然后设置父级的margin-left为留白的负留白的宽度 <style type="text/css"> *{ margin: 0; padding: 0;}img{ vertical-align: middle;} ul>li{ float: left;} ul&…

CSS外边距属性，深入理解margin

margin See the Pen margin by wmui (@wmui) on CodePen. 该属性用于设置元素的外边距,外边距是透明的,默认值0.这是一个简写属性,属性值最多为4个,例如margin: 10px 15px 10px 15px,分别表示上外边距.右外边距.下外边距.左外边距.属性值也可以是3个,例如margin: 10px 15px 10px,表示上外边距.左右外边距.下外边距.属性值可以为2个,例如margin: 10px 15px,表示上下外边距.左右外边距.属…

css之margin

参考地址:http://www.imooc.com/learn/680 标准盒模型 元素尺寸 可视尺寸-clientWidth(标准)——就是上图中的border box包含的尺寸. 占据尺寸-outerWidth(YY,jQuery里面是有这个方法的)——就是上图中的margin box包含的尺寸 一.margin与可视区域 1.适用于没有设定width/height的普通block水平元素,(float元素,absolute/fixed元素,inline元素,table-ceil元素,这些都…

css笔记 - 张鑫旭css课程笔记之 margin 篇

margin - 人若犯我,我必犯人! [margin地址](https://www.imooc.com/learn/680) 一.margin与容器尺寸的关系 relative可定位,但是不改变容器尺寸和占据的空间margin不同,margin也在盒模型中.从border开始往里边,是可视尺寸clientWidth部分.加上margin,是占据尺寸outerWidthmargin可以改变元素尺寸,正值宽度变小,负值宽度变大.margin也可以定位 二.margin的百分比单位 margin:…

巧用margin/padding的百分比值实现高度自适应

原文:https://segmentfault.com/a/1190000004231995 一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/right以父元素的width为参照物好理解,但是top/bottom为什么也是以父元素的width为参照物的呢?网上众说纷纭,关键还是看W3C的规范: Not…

深入理解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…

matplotlib画图实例：pyplot、pylab模块及作图參数

http://blog.csdn.net/pipisorry/article/details/40005163 Matplotlib.pyplot画图实例 {使用pyplot模块} matplotlib绘制直线.条形/矩形区域 import numpy as np import matplotlib.pyplot as plt t , , .01) s = np.sin(2 * np.pi * t) plt.plot(t,s) # draw a thick red hline at y=0 th…

浅谈CSS中的百分比

结论: 标准流中的元素,看其属性有没有继承性.对于width和margin-left,它是可以继承的,它会参照父元素或者祖先元素(其实是包含块):对于height,它没有继承性,父元素或者祖先元素会自适应其所有子元素的高度和(这点是需要注意的). 绝对定位参照的是离它最近的父元素或祖先元素,如果没有父元素或祖先元素,那么参照的是初始包含块(不同的浏览器可能不一样,因为W3C没有规定浏览器具体如何去实现).但实际上,大部分浏览器将可视区当作绝对定位的包含块. 固定定位参照可视区 width设置成百…

position(static-relative-absolute-fixed),margin(top-right-bottom-left),top-right-bottom-left

最近写css遇到一些问题,所以准备写下来捋一下思路. 1.position=satic下看margin的使用.(top-right-bottom-left在这种case下无效) 1-1)margin a,margin值为具体的px <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <…

canvas绘制圆形进度条（或显示当前已浏览网页百分比）

使用canvas绘制圆形进度条,或者是网页加载进度条 或者是显示你浏览了本网页多少-- 由于个浏览器的计算差异,打开浏览器时 初始值有所不同,但是当拉倒网页底部时,均显示100%. 兼容性:测试浏览器 chrome .ff .ie9+ 都可以正常显示 ,由于ie8及以下不支持canvas 不做考虑. 设计思路: 1 .在画布上画一个圆,作为背景圆 2 .画第二个圆坐标相同半径相同,作为进度圆,显示当前浏览进度 3 .使用canvas的font属性在圆中间以数字的形式显示进度 ,以百分比来显示进度…

margin塌陷

我工作基本上就是写业务逻辑,不怎么写页面就一直觉得页面布局特高深.有天我同事问我,知道margin塌陷是什么东西不,我说我不知道(反正我也不用,管他呢),他说面试的时候问的(...那这必须得去看啊). 其实这个东西,基本上每个人都遇到过,只不过你不知道它的专业术语而已. 你写两个嵌套div的时候 <div id="div1" style="width:200px;height:200px;background:yellow"> <div id=&q…

Android面试题收集

Android是一种基于Linux的自由及开放源码的操作系统,主要使用于移动设备.如智能手机和平板电脑.由Google公司和开放手机联盟领导及开发.这里会不断收集和更新Android基础相关的面试题,眼下已收集100题. 1.Android系统的架构 Android系统架构之应用程序 Android会同一系列核心应用程序包一起公布,该应用程序包包含emailclient,SMS短消息程序.日历.地图,浏览器,联系人管理程序等.全部的应用程序都是使用JAVA语言编写的. Android系统架构之应…

SWT经常使用组件

1button组件(Button) (1)Button组件经常使用样式 SWT.PUSHbutton SWT.CHECK多选button SWT.RADIO单选button SWT.ARROW箭头button SWT.NONE默认button SWT.CENTER文字居中与SWT.NONE SWT.LEFT左对齐 SWT.RIGHT右对齐 SWT.BORDER深陷型button SWT.FLAT平面型button 一个Button能够指定多个样式,仅仅要将指定的各个样式用符号"|"连接…

Android 手机影音 开发过程记录（六）

前一篇已经将音乐播放及切换的相关逻辑弄好了,今天主要理一下剩余的部分,包含: 1. 自己定义通知栏的布局及逻辑处理 2. 滚动歌词的绘制 3. 歌词解析 效果图 通知栏 自己定义布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:lay…

前端编程提高之旅（十二）----position置入值应用

这次内推项目用到的遮罩及其页面下方button都涉及一个概念position置入值得概念.效果图例如以下: 一个元素position属性不是默认值static.那么该元素被称为定位元素. 定位的元素生成定位框,其定位基于四个特性(置入值):'top','right','bottom','left'. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWluZ3lpbGVkaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQ…

一个标签的72变，打造一个纯CSS图标库

每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不甚满意. 终于下定心思来改造一个可缩放的图标库.github先上:https://github.com/qieguo2016/iconoo,目前提供下载link标签引入和npm+webpack的引入方式,详见项目的readme.(喂,来个star!).上图: 关于改造,一开始的想法就是使用百分比尺寸…

CSS常见居中讨论

先来一个常见的案例,把一张图片和下方文字进行居中: 首先处理左右居中,考虑到img是一个行内元素,下方的文字内容也是行内元素,因此直接用text-align即可: <style> .container{ text-align: center; } </style> <div class="container"> <img src="Mars.png"> <p>火星</p> </div>…

CSS实现元素水平垂直居中—喜欢对称美，这病没得治

[TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一个元素进行垂直居中,就有点束手无策了,本文介绍了几种常用的垂直居中方法以供参考! 一.表格布局法 利用表格的vertical-align属性,当然首先将显示方式设置为表格,如下: <!DOCTYPE html> <html lang="en"> <head&g…