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 ...
随机推荐
- (转载)Javascript定义类（class）的三种方法
因在公司内部培训中有讲解到JS类的概念,不甚明白,于是进行了google找到了相关的介绍说明,现将其摘抄下来,以作记录. 在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对 ...
- JS高级程序设计2nd部分知识要点3
对象转换方法:1> toLocaleString(),2> toString(),ValueOf()方法会返回相同的值 栈方法是 LIFO (后进先出)的数据结构 -push ,pop 方 ...
- 如何使用emacs编写c语言程序，并编译运行
vi和emacs被分别被称为编辑器之神和神之编辑器.vi的入门精通都很难,emacs入门容易,精通难:vi使用起来不停地切换模式,而emacs则不停地ctrl,meta等组合键.因此,高德纳大师说操作 ...
- [书目20160218]微软软件研发的奥秘:MSF精髓
目录 第一部分 解决方案交付基础 第1章 什么是MSF,它适合你吗 2 1.1 MSF的历史和起源 2 1.2 为什么是“框架” 3 1.3 MSF有何不同 5 1.4 MSF第四版的要素 5 1.5 ...
- 使用LVS实现负载平衡之Windows Server 2008配置
LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.本项目在1998年5月由章文嵩博士成立,是中国国内最早出现的自由软件项目之一.承载于 II ...
- css3的媒体查询(Media Queries)
我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...
- HDU 3487 Play with Chain 【Splay】
1-n的序列,有两种操作: 1,将一段区间翻转 2,将一段区间切下来放到剩余序列的第C个数后 采用延迟更新的方法维护区间的翻转,并维护一个size域. 添加一个最大点和一个最小点,防止出界 翻转时,将 ...
- 【Mysql】日期时间格式化
1.日期转成指定格式:DATE_FORMAT(date, format) 2.int型时间转成指定格式:FROM_UNIXTIME(unix_timestamp,format) 根据format字符串 ...
- C语言 日常小结
1.当数组当作函数参数的时候会退化为指针 #include<stdio.h> #include<stdlib.h> void sort(int a[]){ int num = ...
- phpmailer 参数使用说明
$AltBody--属性 出自:PHPMailer::$AltBody 文件:class.phpmailer.php 说明:该属性的设置是在邮件正文不支持HTML的备用显示 AddAddress--方 ...