盒子模型,top和margin-top
1.
标准盒子模型：
width只是内容的宽度。
元素的总宽度=width + padding*2 +border*2 +margin*2。
IE盒子模型：
width=内容的宽度 + padding*2 + border*2。
元素的总宽度=width +margin*2。
2.top
top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
注释：如果 "position" 属性的值为 "static"，那么设置 "top" 属性不会产生任何效果。position必须设置。
<html>
<head>
<style type="text/css">
img
{
position:absolute;
top:5px;
}
</style>
</head> <body>
<img src="/i/w3school_logo_white.gif" />
<h1>This is a heading</h1>
</body>
</html>
效果图：
可以看出，是相对他的父元素定位的。
2.margin-top
设置元素的上外边距。
<html>
<head>
<style type="text/css">
p.topmargin {background:yellow;margin-top: 100px;}
p.compare{background:blue;}
</style>
</head> <body>
<p class="compare" >这个段落没有指定外边距。</p>
<p class="topmargin">这个段落带有指定的上外边距。</p>
</body>
</html>
效果图：
可以看出：margin-top外边距相对的是离他最近的元素。
盒子模型,top和margin-top的更多相关文章
- CSS里盒子模型中【margin垂直方向边界叠加】问题及解决方案
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合. 如果都是正边界,结果的边界宽度是 ...
- css盒子模型的宽度不包括margin
看到教程上和一些博客上盒子模型的宽度 = content + padding + margin + border,应该是不包括margin的 <!DOCTYPE html> <htm ...
- CSS盒子模型的一些理解
盒子模型相当于把现实中的盒子形象化. 盒子模型的大小="内容(content)+内填充(padding)+边框(border)+外边距(margin)" 盒子模型方向为:top, ...
- WEB入门.六 盒子模型
学习内容 CSS盒子模型 盒子之间的关系 页面元素定位 能力目标 理解盒子模型 理解内容与表现分离的优点 理解并掌握盒子之间的关系 理解并掌握绝对定位与相对定位的用法 本章简介 上一章节中已经讲解了页 ...
- CSS（六）：盒子模型
一.什么是盒子模型 盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版. 从上图可以看到标准的盒子模型范围包括margin(外边距).border(边框).padding(内边距).con ...
- 标准盒子模型和IE盒子模型
标准盒子模型 ＝ margin + border + padding + content (content = width | height) IE盒子模型 ＝ margin + content ( ...
- css知多少（7）——盒子模型
1. 引言 从这一节开始,我们就进入本系列的第三部分——css呈现.本部分将描述css在页面的几种布局和呈现的特性.包括两类:文字.块. 第一类——文字.这部分相对比较简单一些,例如设置字号.字体.颜 ...
- CSS3盒子模型
web前端必须了解的CSS3盒子模型 1.需要了解的属性以及属性值 display:box或者display:inline-box box-orient:horizontal | vertical ( ...
- 盒子模型/div标签/益出处理
/* <div></div>没有任何功能,不属于功能标签 可以放文字,图片以及各种元素的块标签 常常用来布局 span标签属于行内标签,无法设置宽高 */ <!docty ...
- CSS中width和height与盒子模型的关系
盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...
随机推荐
- JSP的客户端请求
以下内容引用自http://wiki.jikexueyuan.com/project/jsp/client-request.html: 当浏览器请求一个网页时,它向Web服务器发送大量的信息,信息不能 ...
- 秒懂C#通过Emit动态生成代码 C#使用Emit构造拦截器动态代理类
秒懂C#通过Emit动态生成代码 首先需要声明一个程序集名称, 1 // specify a new assembly name 2 var assemblyName = new Assembly ...
- ARP协议(4)ARP编程
之前的几篇文章,分别介绍了 ARP 协议格式,在vs2012里配置winpcap环境,我们该做的准备都已经做完了.如今我们真正来实现了. 一.定义数据结构 依据ARP的协议格式,设计一个ARP协议格式 ...
- socket listen backlog
http://stackoverflow.com/questions/4253454/question-about-listening-and-backlog-for-sockets The list ...
- YTU 2639: 改错题：类中私有成员的访问
2639: 改错题:类中私有成员的访问 时间限制: 1 Sec 内存限制: 128 MB 提交: 431 解决: 297 题目描述 /* 改错题: 设计一个日期类和时间类,并编写全局函数displ ...
- XAML实例教程系列 - 标记扩展(Markup Extensions) 六
XAML实例教程系列 - 标记扩展(Markup Extensions) 分类: Windows 8 Silverlight2012-06-21 13:00 1139人阅读 评论(0) 收藏 举报 扩 ...
- 利用JFreeChart生成组合图表 (8) (转自 JSP开发技术大全)
利用JFreeChart生成组合图表 (8) (转自 JSP开发技术大全) 14.8 利用JFreeChart生成组合图表 实例位置:光盘\mingrisoft\14\dxyy\02 通过JFree ...
- TFLearn 在给定模型精度时候提前终止训练
拿来主义:看我的代码,我是在模型acc和验证数据集val_acc都达到99.8%时候才终止训练. import numpy as np import tflearn from tflearn.laye ...
- CentOS常用基础命令大全
这篇文章主要介绍了CentOS常用基础命令大全,学习centos的朋友需要掌握的知识,需要的朋友可以参考下 1.关机 (系统的关机.重启以及登出 ) 的命令shutdown -h now 关闭系统(1 ...
- UVA - 12345 带修改的莫队
题意显然:给出初始序列,单点修改,区间查询元素的种类. 由于时限过宽,暴力可过. 比较优秀的解法应该是莫队. 带修改的莫队题解可以看https://www.luogu.org/blog/user126 ...