`

【原】CSS 中的margin 属性

阅读更多

margin很奇怪~~
左右是相对于父元素, 想margin百分比也行, 想margin像素值也行,
但是上下就非常非常的怪了, 
首先, margin不仅体现在设定了margin属性的元素上, 
而且向上传递, 一直传递到某个父元素上边有可见部分
(p标签, a标签, 等等或是边框或是html, div的背景不算可见),
最终体现为这个设定了margin的元素所在的不可见盒和上边第一个可见部分的margin, 
而设定了属性的元素和其所在盒之间没有相对位移。
其次, 上下margin使用百分比往往实际效果是一个定值。

 

 

 

----------------EOF-------------------------

分享到:
评论

相关推荐

    小程序中使用css var变量(使js可以动态设置css样式属性)

    使用sass,stylus可以很方便的使用变量来做样式设计,其实css也同样可以定义变量,在小程序中由于原生不支持动态css语法,so,可以使用css变量来使用开发工作变简单。 基本用法 基础用法 <!--web开发中顶层变量的...

    原生js和jQuery随意改变div属性style的名称和值

    一些简单的例子,用原生js和...style type="text/css"> body,p{margin:0;padding:0;} body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;} #outer{width:300px;margin:0 auto;} p{margin-bottom:10px;} butto

    css float 解析学习

    以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级元素,而不论它本身是何种元素。元素对象设置了float属性之后,它将不再独自占据一行。浮动块可以向左...

    懒人原生移动端(高版本浏览器)上下左右居中模块

    css3的transform:translate(A,B) 属性 它可以移动模块的位置 接受两个数值,A是x轴方向,B是y轴方向 我们分别设置-50%,那么就可以实现模块的绝对居中了   使用方法: 1、将class="lanren...

    原生js实现改变随意改变div属性style的名称和值的结果

    一些简单的例子,用原生js和...style type=”text/css”> body,p{margin:0;padding:0;} body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;} #outer{width:300px;margin:0 auto;} p{margin-bottom:10px;}

    jQuery实现随意改变div任意属性的名称和值(部分原生js实现)

    一些简单的例子,用原生js和...style type=”text/css”> body,p{margin:0;padding:0;} body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;} #outer{width:300px;margin:0 auto;} p{margin-bottom:10px;}

    Web开发标准带到原生平台

    源码samurai-native,samurai-native 可以让您使用标准Web开发技术 (HTML+CSS) 构建基于私有浏览器内核的原生应用。现已支持 iOS。...CSS 样式属性来排版界面布局。 测试环境:Xcode 6.2,iOS 6.0以上

    javascript通过获取html标签属性class实现多选项卡的方法

    本文实例讲述了javascript通过获取html标签属性class实现多选项卡的方法。分享给大家供大家参考。具体实现方法如下: ...style type=text/css> .tab { clear: both; margin: 20px auto; padding: 10px;

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -ExtAspNet支持原生的AJAX,也就是说控件的属性改变在AJAX过程中会反映到页面中,但并不是所有的控件属性都支持AJAX改变。 -加载s.gif图片在本机进行,不会请求extjs.com远程资源(feedback:efrigate43,abaocoole)...

    ExtAspNet_v2.3.2_dll

    -ExtAspNet支持原生的AJAX,也就是说控件的属性改变在AJAX过程中会反映到页面中,但并不是所有的控件属性都支持AJAX改变。 -加载s.gif图片在本机进行,不会请求extjs.com远程资源(feedback:efrigate43,abaocoole)...

    ie6 fixed bug的解决方法 (css+js)

    利用css选择器覆盖原position的属性值; fixed层的父层需是body才能这样实现; 但是这样还不完美 并不能完全实现效果,因为不会随body页面拉动而滚动 要实现随body页面滚动而滚动 需添加以下js代码 复制代码代码

    利用js编写响应式侧边栏

    其中主要设计的就是animate()函数,animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。只有数字值可创建动画...

    frontend-training:前端练习项目

    前端训练前置练习项目仿拉勾网首页仿照拉勾网pc端的首页和登录页,参照千锋教育的一个实战课程技术栈:HTML + CSS总结:在父级元素内,子元素(块级)水平居中的方法是使用绝对定位,left属性设置为50%,margin-...

    JavaScript Table行定位效果

    w3c的table部分中说width属性是the desired width of the entire table,我估计entire就是包含了padding和border,找不到什么其他说明,先这么理解吧。 定位方面,除了不支持fixed的ie6用absolute,其他都使用fixed...

    图库新版jQuery焦点图 JS代码

    // ad function dy(code) ...document.writeln ('<iframe width="120" height="24" frameborder="0" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no" border="0" src=...

Global site tag (gtag.js) - Google Analytics