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的更多相关文章

  1. CSS里盒子模型中【margin垂直方向边界叠加】问题及解决方案

    边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合. 如果都是正边界,结果的边界宽度是 ...

  2. css盒子模型的宽度不包括margin

    看到教程上和一些博客上盒子模型的宽度 = content + padding + margin + border,应该是不包括margin的 <!DOCTYPE html> <htm ...

  3. CSS盒子模型的一些理解

    盒子模型相当于把现实中的盒子形象化. 盒子模型的大小="内容(content)+内填充(padding)+边框(border)+外边距(margin)" 盒子模型方向为:top, ...

  4. WEB入门.六 盒子模型

    学习内容 CSS盒子模型 盒子之间的关系 页面元素定位 能力目标 理解盒子模型 理解内容与表现分离的优点 理解并掌握盒子之间的关系 理解并掌握绝对定位与相对定位的用法 本章简介 上一章节中已经讲解了页 ...

  5. CSS（六）：盒子模型

    一.什么是盒子模型 盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版. 从上图可以看到标准的盒子模型范围包括margin(外边距).border(边框).padding(内边距).con ...

  6. 标准盒子模型和IE盒子模型

    标准盒子模型 ＝ margin + border + padding + content (content =  width | height) IE盒子模型 ＝ margin + content ( ...

  7. css知多少（7）——盒子模型

    1. 引言 从这一节开始,我们就进入本系列的第三部分——css呈现.本部分将描述css在页面的几种布局和呈现的特性.包括两类:文字.块. 第一类——文字.这部分相对比较简单一些,例如设置字号.字体.颜 ...

  8. CSS3盒子模型

    web前端必须了解的CSS3盒子模型 1.需要了解的属性以及属性值 display:box或者display:inline-box box-orient:horizontal | vertical ( ...

  9. 盒子模型/div标签/益出处理

    /* <div></div>没有任何功能,不属于功能标签 可以放文字,图片以及各种元素的块标签 常常用来布局 span标签属于行内标签,无法设置宽高 */ <!docty ...

  10. CSS中width和height与盒子模型的关系

    盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...

随机推荐

  1. 条款十七: 在operator=中检查给自己赋值的情况

    在赋值运算符中要特别注意可能出现别名的情况,其理由基于两点.其中之一是效率.如果可以在赋值运算符函数体的首部检测到是给自己赋值,就可以立即返回,从而可以节省大量的工作,否则必须去实现整个赋值操作. 另 ...

  2. 戴尔PowerEdge服务器RAID控制卡的配置

    示例演示环境:PowerEdge R620 + H710p Raid控制卡  + 9 x 300G 10k SAS 硬盘 H310.H710.H810的配置方法与H710P大致相同,在此不再累述. 特 ...

  3. {head first} --- networking 1

    Head first系列的书确实非常好,深入浅出解说网络的组成.让曾经那些生涩的概念生动起来. Chapter 1 维修物理网络 CAT5电缆: 两端为RJ-45接头(水晶头).内部为UTP(非屏蔽双 ...

  4. Office 连供打印机无法进纸怎么办 卡纸，塞纸怎么办

    我昨天打印还好好的,今天无法进纸了,哪怕只放一张纸,也是左边进去一点点,然后就塞住了,吸不下去了.   因为你的打印机里面有异物.你把连供拆掉(当心墨水流出来,把墨盒拆掉之后放高一点并用纸巾包住,不要 ...

  5. 单一责任原则（SRP）

    1.就一个类而言,应该仅有一个引起它变化的原因. 2.在SRP中定义职责为:“变化的原因”.  如果你想到多个动机去改变这个类,那这个类就有多个职责

  6. 第一天，Robert和Sue大师培训给的启示

    程序猿的零点从他睡觉那一刻开始计时. 今天是周六,听到了Robert关于销售技巧的培训还有Sue关于微信零售业O2O电商的分析,一并加上昨天晚上直到11点的Leadership培训,这个周末真的是收获 ...

  7. java struts jxl 导入导出Excel（无模板）

    jar包: import javax.servlet.http.HttpServletResponse; import java.io.OutputStream; import java.io.Fil ...

  8. Redis内存使用达到maxmemory设定值后玩家数据无法写入解决 Redis数据“丢失”问题

    Redis数据“丢失”问题 - CSDN博客 https://blog.csdn.net/real_myth/article/details/52582739 Redis内存使用达到maxmemory ...

  9. MessageBox.Show

    MessageBox.Show()共有21中重载方法.现将其常见用法总结如下: .MessageBox.Show("Hello~~~~"); 最简单的,只显示提示信息. .Mess ...

  10. 10.05FZSZ Day2模拟总结

    今天的题目难度比昨天小一些,但是太菜的我还是啥也不会. 今天的出题大佬是Heaplex,他的题目中倒是出现了ZZQ,不知道是否是本人? T1.a 期望得分30,实际得分30 这道题开场发现好像有什么小 ...