盒子模型,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,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...
随机推荐
- Spring集成Redis方案（spring-data-redis）（基于Jedis的单机模式）（待实践）
说明:请注意Spring Data Redis的版本以及Spring的版本!最新版本的Spring Data Redis已经去除Jedis的依赖包,需要自行引入,这个是个坑点.并且会与一些低版本的Sp ...
- mybatis xml标签，批量插入
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-/ ...
- SaltStack及Multi-Master介绍
1.先说下SaltStack是啥? SaltStack是基于Python开发的一套C/S架构配置管理工具(功能不仅仅是配置管理,如使用salt-cloud配置AWS EC2实例),它的底层使用Zero ...
- 1451 - Average 高速求平均值
怎样高速求取一段区间的平均值 用前缀的思想来看 很easy 可是 本题题意要求的是 大于等于一段长度的区间的平均值的最大值 并且给出的数据范围非常大 O(n*L)的直白比較算法 用于解决此问题不合适 ...
- Unix网络编程 之 socket基础
基本结构 (这部分的地址均为网络地址<网络字节序>) 1.struct sockaddr:通用套接字地址结构 此结构用于存储通用套接字地址. 数据结构定义: typedef unsigne ...
- Android lollipop 更新问题
非常多朋友都说lollipop出来想试用一下,结果在网官下载的android studio 都是20版本号,也没有看见更新到android 5.0. 我也在网上狂了一下,收集到一个代理地址目測能够用, ...
- Echarts 如何使用 bmap 的 API
使用 Echarts 在绘制 Binning on map 的图形时(其实也就是 在地图上绘制热力色块图) 解决因为数据量过大,希望在拖拽加载或者缩放加载的时候,根据可视区域的经纬度范围,来请求相应的 ...
- Java 工具类 —— 定时器（Timer/TimerTask）
import java.util.Timer; import java.util.TimerTask; public class Timer { .... public void schedule(T ...
- BZOJ_1692_[Usaco2007 Dec]队列变换_后缀数组
BZOJ_1692_[Usaco2007 Dec]队列变换_后缀数组 Description FJ打算带他的N(1 <= N <= 30,000)头奶牛去参加一年一度的“全美农场主大奖赛” ...
- Spark 决策树--分类模型
package Spark_MLlib import org.apache.spark.ml.Pipeline import org.apache.spark.ml.classification.{D ...