盒子模型,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,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...
随机推荐
- Java File类 mkdir 不能创建多层目录，如果是多层，可以调mkdirs
public static void createDir(String destDirName) { File dir = new File(destDirName); if (!dir.exists ...
- laravel email markdown
laravel 邮件使用markdown php artisan make:mail lessonPublished --markdown="emails.published" 这 ...
- maven 手动构建项目
maven 手动构建项目 在空目录下面: D:\test>mvn -B archetype:generate -DarchetypeGroupId=org.apache.maven.archet ...
- [Java Sprint] Spring XML Configuration : Constructor Injection Demo
Previous we see how to do Setter injection: https://www.cnblogs.com/Answer1215/p/9472117.html Now le ...
- C# .NET如何定义图片按钮
先添加一个按钮,然后修改Image或者BackgroundImage显然不好,我想要按钮透明,就不要放在按钮的方框里,而且鼠标滑过和鼠标点击最好都是我自定义. 我们拉一个PictureBox,然后 ...
- 复制class文件到as中出现非法字符，须要class，interface货enum
问题如题,出现此情况是在导入eclipse项目到Android Studio出现这种错误, 非法字符: '\ufeff' 解决方式|错误: 须要class, interface或enum,查阅后了解到 ...
- uva 10765 Doves and Bombs（割顶）
题意:给定一个n个点的连通的无向图,一个点的"鸽子值"定义为将它从图中删去后连通块的个数.求每一个点的"鸽子值". 思路dfs检查每一个点是否为割顶,并标 ...
- 2014阿里巴巴WEB前端实习生在线笔试题
2014年3月31日晚,我怀着稍微忐忑的心情(第一次在线笔试^_^!!)进行了笔试.阿里巴巴的笔试题共同拥有10道,差点儿包括了Web前端开发的各个方面,有程序题.有叙述题.时间很紧张,仅仅完毕了大概 ...
- 展开阅读全文 js 爬虫操作
from selenium import webdriver import time import random from bs4 import * browser = webdriver.Chrom ...
- YTU 2542: 弟弟的作业
2542: 弟弟的作业 时间限制: 1 Sec 内存限制: 128 MB 提交: 130 解决: 57 题目描述 你的弟弟刚做完了"100以内数的加减法"这部分的作业,请你帮他 ...