margin的理解

1.盒子模型

在进行网页设计的时候，我们使用的是盒子模型，其内容如下：

整个网页就是大盒子套小盒子，小盒子又套更小的盒子来实现的。但是在做网页设计时总是搞不清margin和padding的使用方式，在此特地探讨一下。

2.margin

1.margin-top

只有块元素有margin-top，行内元素是没有margin-top的。margin-top是以兄弟元素的下边界或以有上边框的父元素为参考点来计算的。css中的高度和宽度是content的高和宽

父元素无上边框

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>驾校注册</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<!--[if lt IE 9]>

<script src="js/html5shiv.min.js"></script>

<script src="js/respond.min.js"></script>

<![endif]-->

<style type="text/css">

    body{

        min-width: 1024px;

        margin: 0px auto;

        font-family:'微软雅黑';

    }

    .fdiv{

        width:200px; height:200px; background:#ccc;

        margin: 0;

        padding: 0;

    }

    .cdiv{

        width: 100px;

        height: 100px;

        background: #FFF7DC;

        margin-top: 20px;

        border: 1px solid black;

    }

    a{

        border:1px solid black;

    }

</style>

</head>

<body>

<div class="fdiv">

    <div class="cdiv">

    </div>

<div>

</body>

</html>

由于米色部分的div找不到参考点，结果我们发现是显示的结果很奇葩，是以body上边界作为参考点的。

父元素有上边界

 .fdiv{

        width:200px; height:200px; background:#ccc;

        margin: 0;

        padding: 0;

        border-top: 1px solid black;

  }

我们发现一旦父元素设置了上边界，margin-top就显示正常了。

以兄弟元素为参考

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>驾校注册</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<!--[if lt IE 9]>

<script src="js/html5shiv.min.js"></script>

<script src="js/respond.min.js"></script>

<![endif]-->

<style type="text/css">

    body{

        min-width: 1024px;

        margin: 0px auto;

        font-family:'微软雅黑';

    }

    .fdiv{

        width:200px; height:200px; background:#ccc;

        margin: 0;

        padding: 0;

        border: 1px solid black;

    }

    .cdiv{

        width: 100px;

        height: 100px;

        background: #FFF7DC;

        margin-top: 20px;

        border: 1px solid black;

    }

    a{

        border:1px solid black;

    }

</style>

</head>

<body>

<div class="fdiv">

    <a>ffasdfasdfasfdafdasdf</a>

    <div class="cdiv">

    </div>

<div>

</body>

</html>

米色部分div的margin-top是以a标签的下边界为参考线，来计算自己需要向下的偏移量(20px)。

margin的理解的更多相关文章

CSS中关于margin的理解误区
思考一在以前,我对于margin的理解是这样的,此处用margin-top举例:指的是离相邻元素之间的距离. 但是实际是:相对于自身原来的位置偏移. 举个例子: <!DOCTYPE HTML ...
padding/margin/border 理解
SVM的推导和理解
主要记录了SVM思想的理解,关键环节的推导过程,主要是作为准备面试的需要. 1.准备知识-点到直线距离点\(x_0\)到超平面(直线)\(w^Tx+b=0\)的距离,可通过如下公式计算: \[ d ...
数学之路(3)-机器学习(3)-机器学习算法-SVM[5]
svm小结 1.超平面两种颜色的点分别代表两个类别,红颜色的线表示一个可行的超平面.在进行分类的时候,我们将数据点 x 代入 f(x) 中,如果得到的结果小于 0 ,则赋予其类别 -1 ,如果 ...
CSS 概览（CSS2.1）更新时间2014-0406
CSS和HTML结合 <link rel="stylesheet" type="text/css" href="sheet1.css" ...
css盒子模型和定位
content padding border margin 可以理解为在商场上看到的电视机. 电视机------content 装电视机的箱子边框有粗细------border 电视机与箱子之间的泡沫 ...
[翻译][HTML]CELLPADDING and CELLSPACING
w3school手册:http://www.w3schools.com/tags/att_table_cellspacing.asp 一直以来都发现自己对cellpadding&cellspa ...
【基础笔记】《html&CSS设计与构造网站》一书导读
◉HTML 1.结构网页使用HTML HyperText Markup Language 来描述页面结构超文本标记语言允许对文本建立链接,允许对文本进行标记网页开头都有一个DOCTYPE 文档类型声 ...
金融量化分析【day112】：因子选股
一.因子选股基础二.因子选股策略实现代码 # 导入函数库 import jqdata import psutil #初始化函数,设定基准等等 def initialize(context): set ...

随机推荐

APMServ 配置记录
下载版本是5.2.6,它采用压缩率更高的7zip 解压后拷贝到c盘点击APMServ.exe就可以启动了注意: 1. SSL 有时需要关掉,否则apache起不来 2. 多数时候我只用apache ...
TFS 2013”无法移除仍为团队管理员身份的标识”
由于开发人员的工作变动,在TFS 2013的日常维护中,经常需要将已经离开团队的成员账户移除出本团队项目. 一.将用户从团队成员中移除一般情况下,只需要在团队项目的控制面板界面(控制面板>Co ...
【温故而知新-Javascript】窗口效果（全屏显示窗口、定时关闭窗口）
1.全屏显示窗口 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
广度优先搜索 cdoevs 1226 倒水问题
cdoevs 1226 倒水问题时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 有两个无刻度标志的水壶,分别可装 x 升 ...
边工作边刷题：70天一遍leetcode: day 89-1
Smallest Rectangle Enclosing Black Pixels 要点:记题:这题有两个限制条件:所有black pixel是连通的(所以可以用binary search)以及给了一 ...
java 14 -1 正则表达式
正则表达式:符合一定规则的字符串. 1.判断QQ号码是否正确的案例: public class RegexDemo2 { public static void main(String[] args) ...
浅谈CLR
1.什么是CLR CLR(Common Language Runtime)公共语言远行时,是一个可由多种编程语言使用的“远行时”.CLR的核心功能(比如内存管理.程序集加载.安全性.异常处理和线程同步 ...
ArcGis 中MapControl 框选
void mCtrl_OnMouseDown(object sender, ESRI.ArcGIS.Controls.IMapControlEvents2_OnMouseDownEvent e) ...
纯CSS3制作卡通场景汽车动画效果
前言今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...
25Spring_事务管理的两种机制
一共有两种事务管理机制:编程式事务管理和声明式事务管理. 1.编程式事务管理企业已经不用了. 2.我们主要讲的是声明式事务管理.声明式事务管理 ,无需要修改原来代码,只需要配置,为目标代码添加事务管理 ...