`

【原】CSS 中的margin 属性

阅读更多

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

 

 

 

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

分享到:
评论

相关推荐

    文档里面是一些DIVCSS布局大全,Css_div_常用CSS标签及属性等

    在这个名为“Css_div_常用CSS标签及属性等”的文档集合中,我们可以期待找到关于这两个主题的深入学习材料。 首先,让我们详细了解一下`DIV`。`<div>`元素是HTML中的一个块级元素,意味着它会自动占据一整行,可以...

    css ie6 fiexd属性解决方法

    在探讨“css ie6 fixed属性解决方法”这一主题时,我们不得不面对一个历史遗留问题:Internet Explorer 6(IE6)对于CSS3中fixed定位的支持不足。IE6发布于2001年,其浏览器内核对现代Web标准的支持有限,尤其是在...

    CSS禅意花园原版CHM+中文PDF.rar

    《CSS禅意花园》是一本深受设计师喜爱的经典之作,它以独特的视角揭示了CSS(层叠样式表)在网页设计中的无限可能。这本书通过一系列创新的设计实例,展示了如何利用CSS来构建美观、实用且可访问的网页。"CSS禅意...

    css彻底研究原代码

    书中的实例将帮助读者理解这些概念,如选择器(如类选择器、ID选择器、元素选择器)、属性(如color、font-size、margin)以及它们的值。 深入学习CSS,需要理解盒模型,这是CSS布局的基础。它包括元素的content、...

    100多页的CSS网页美化技术

    * 边距属性 margin * 间隙属性 padding * 定位属性 position * 尺寸属性 height/width * 布局属性 layout * 滚动条属性 scrollbar 在实践中,我们可以使用 CSS 来美化上一章完成的企业信息管理系统的原始静态网站,...

    DIV+CSS彻底研究书中全部原代码

    【标题】"DIV+CSS彻底研究书中全部原代码"涵盖了Web前端开发中的核心技术——HTML的布局模型,特别是使用Div(Division,分隔)元素配合CSS(Cascading Style Sheets,层叠样式表)进行页面设计和布局。这本书的原...

    CSS层叠样式表技术参考手册

    - **听觉属性**:介绍CSS中的听觉相关属性。 - **应用实例**:提供实例代码展示听觉属性的应用。 - **9.4 CSS网络安全字体组合** - **网络字体**:介绍适合在网络环境中使用的字体。 - **字体应用**:提供示例...

    CSS样式表单美化系列

    本系列着重探讨的是如何利用CSS来美化网页中的表单元素,使得用户界面更加吸引人、交互性更强。表单是网页中常见的一种交互组件,用于收集用户输入的信息。通过有效的CSS技巧,我们可以让表单不仅功能完善,而且视觉...

    CSS The Definitive Guide, 4th Edition(中文机翻)

    《CSS The Definitive Guide, 4th Edition》是一本权威的CSS(Cascading Style Sheets)指南,中文机器翻译版提供了对原英文版的辅助理解。这本书详细讲解了CSS的各个方面,对于深入理解和掌握CSS技术具有极大的价值...

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

    此外,由于微信小程序的组件和原生API可能对CSS属性的支持有限,所以在实际使用中需要参考最新的微信小程序开发文档,了解哪些属性是被支持的。 在实际开发过程中,我们还可以使用预处理器如SASS、LESS、Stylus等来...

    js获取某元素的class里面的css属性值代码

    在实际开发中,我们可能需要获取某个元素根据CSS类设置的`margin`、`padding`、`height`、`border`等属性,而这些属性可能定义在外部CSS文件或者内联样式中。 描述中的“有需要的朋友可以参考一下”提示我们,这个...

    css帮助文档及相关示例

    2. **盒模型**:CSS2中的盒模型包括元素的内容区域、内边距(padding)、边框(border)和外边距(margin),理解盒模型对于布局至关重要。 3. **布局模式**:CSS2支持块级布局和行内布局。块级元素占据整行,行内...

    css+div 在IE中兼容

    在Firefox中,当`body`元素的`text-align`属性设置为某一值时,可能需要设置`div`元素的`margin: auto`才能实现正确的居中对齐,而在IE中可能不需要。 ### 14. CSS 链接状态顺序 遵循`Link - Visited - Hover - ...

    5款漂亮的纯CSS下拉菜单

    1. **盒模型**:CSS的盒模型是理解布局的基础,包括content、padding、border和margin四个部分。下拉菜单的每个元素都需要合理的盒模型设置,以确保其尺寸和位置正确。 2. **定位**:下拉菜单通常隐藏在主菜单项...

    关于图片显示问题的CSS总结

    首先,我们来看CSS中的`background-image`属性,它用于设置元素的背景图像。你可以直接指定URL,或者使用CSS的渐变或多重背景来实现丰富的视觉效果。例如: ```css div { background-image: url('image.jpg'); ...

    精通CSS(英语版)

    不过,根据标题和描述中提及的“精通CSS”一词,我们可以对这本书进行一些推测,并借此机会梳理出CSS的一些基础和进阶知识点。 首先,标题“精通CSS(英语版)”暗示这本书可能是英语编写,专注于CSS(层叠样式表)...

    CSS样式电子书

    预处理器编译后的CSS代码与原生CSS兼容,可以直接在浏览器中运行。 **八、CSS性能优化** 优化CSS性能涉及减少HTTP请求、合并CSS文件、使用外部链接而非内联样式、避免使用通配符选择器、精简CSS代码等策略。合理的...

    css书写代码要求规范

    - **属性选择器值使用双引号**:[强制] 属性选择器中的值必须使用双引号包围。 ```css article[character="juliet"] { voice-family: "VivienLeigh", victoria, female; } ``` ##### 2.6 属性 - **属性独占一...

    css自动格式化工具(绿色单机版)_带源码

    5. **简写属性展开**:将简写的CSS属性如`margin`或`padding`展开为其各个方向的单独值,便于理解和修改。 6. **单位转换**:在需要的情况下,可以自动将像素值转换为其他单位,如em或rem。 7. **兼容性检查**:...

Global site tag (gtag.js) - Google Analytics