盒子模型,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,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...
随机推荐
- Servlet的客户端请求
以下内容引用自http://wiki.jikexueyuan.com/project/servlet/client-request.html: 当浏览器请求网页时,它会向Web服务器发送大量信息,这些 ...
- java压缩与解压文件
import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import ...
- Application特征
1.位置:服务器内存,执行速度快2.使用范围:整个应用程序3.类型:任意类型4.声明周期:应用程序开始创建到销毁
- netty4与protocol buffer结合简易教程
各项目之间通常使用二进制进行通讯,占用带宽小.处理速度快~ 感谢netty作者Trustin Lee.让netty天生支持protocol buffer. 本实例使用netty4+protobuf-2 ...
- Linux bash: scp: command not found的问题记录
,总结 scp成功,须要两个server都安装了scp服务才行.
- 2011:Audio Classification (Train/Test) Tasks - MIREX Wiki
Contents [hide] 1 Audio Classification (Test/Train) tasks 1.1 Description 1.1.1 Task specific mailin ...
- Linux服务器 /var/spool/clientmqueue 目录下产生大量文件的删除办法
检查linux发现server中的磁盘分区空间超过98%,登录到服务器查看 [root@localhost etc]# df -hFilesystem 容量 已用 可用 已用% 挂载点/dev/hda ...
- Bootstrap button源码分析
/* ======================================================================== * Bootstrap: button.js v ...
- 安装 matplotlib
比较推荐还是用pip来安装,用源码安装还是会比较麻烦,进入到CMD窗口下,执行python -m pip install -U pip setuptools进行升级. 接着键入python -m pi ...
- Linux 系统内核空间与用户空间通信的实现与分析
本文转载自:https://www.ibm.com/developerworks/cn/linux/l-netlink/index.html 多数的 Linux 内核态程序都需要和用户空间的进程交换数 ...