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

  1. CSS中关于margin的理解误区

    思考一 在以前,我对于margin的理解是这样的,此处用margin-top举例:指的是离相邻元素之间的距离. 但是实际是:相对于自身原来的位置偏移. 举个例子: <!DOCTYPE HTML ...

  2. padding/margin/border 理解

  3. SVM的推导和理解

    主要记录了SVM思想的理解,关键环节的推导过程,主要是作为准备面试的需要. 1.准备知识-点到直线距离 点\(x_0\)到超平面(直线)\(w^Tx+b=0\)的距离,可通过如下公式计算: \[ d ...

  4. 数学之路(3)-机器学习(3)-机器学习算法-SVM[5]

    svm小结 1.超平面 两种颜色的点分别代表两个类别,红颜色的线表示一个可行的超平面.在进行分类的时候,我们将数据点  x 代入  f(x)  中,如果得到的结果小于 0 ,则赋予其类别 -1 ,如果 ...

  5. CSS 概览（CSS2.1）更新时间2014-0406

    CSS和HTML结合 <link rel="stylesheet" type="text/css" href="sheet1.css" ...

  6. css盒子模型和定位

    content padding border margin 可以理解为在商场上看到的电视机. 电视机------content 装电视机的箱子边框有粗细------border 电视机与箱子之间的泡沫 ...

  7. [翻译][HTML]CELLPADDING and CELLSPACING

    w3school手册:http://www.w3schools.com/tags/att_table_cellspacing.asp 一直以来都发现自己对cellpadding&cellspa ...

  8. 【基础笔记】《html&CSS设计与构造网站》一书导读

    ◉HTML 1.结构网页使用HTML HyperText Markup Language 来描述页面结构超文本标记语言允许对文本建立链接,允许对文本进行标记网页开头都有一个DOCTYPE 文档类型 声 ...

  9. 金融量化分析【day112】：因子选股

    一.因子选股基础 二.因子选股策略实现代码 # 导入函数库 import jqdata import psutil #初始化函数,设定基准等等 def initialize(context): set ...

随机推荐

  1. (转载)web测试方法总结

    web测试方法总结 一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符“~!@#￥%……&*?[]{}”特别要注意单引号和&符号.禁止直 ...

  2. 通过beego快速创建一个Restful风格API项目及API文档自动化

    通过beego快速创建一个Restful风格API项目及API文档自动化 本文演示如何快速(一分钟内,不写一行代码)的根据数据库及表创建一个Restful风格的API项目,及提供便于在线测试API的界 ...

  3. 为TFS配置跨平台的生成服务器Xplat (Ubuntu Linux)

    1. 概述 从TFS 2015开始,微软开始支持跨平台的构建代理.你可以使用TFS的Xplat代理,方便的在基于IOS, Unix和Linux的服务器上搭建生成代理,实现构建.发布等功能.本文档已Ub ...

  4. 《TCP/IP详解 卷一》读书笔记-----DNS

    1.DNS是一个分布式数据库系统用来提供主机名和IP地址之间的映射,之所以称为分布式原因的原因是因特网上没有一台主机知道这类映射的全部信息,当然也不可能做到,因为数据量实在太大了 2.应用程序通过一个 ...

  5. 该怎么快速完成ZBrush中脸部的雕刻

    骨骼,是一门基础艺术,几百年来一直为伟大的艺术大师所研究,它曾经,也将一直是创作现实且可信角色的关键,提高骨骼知识更将大大提高雕刻技能. 若有疑问可直接访问:http://www.zbrushcn.c ...

  6. codeforces 713C C. Sonya and Problem Wihtout a Legend(dp)

    题目链接: C. Sonya and Problem Wihtout a Legend time limit per test 5 seconds memory limit per test 256 ...

  7. HDU 5033 Building --离线+单调栈

    题意:给一些建筑物,x表示横坐标,h表示高度,然后查询某些坐标x,问从该点看向天空的最大张角是多大. 解法:离线操作,读入所有数据,然后按x升序排序,对每一个查询的x,先从左到右,依次添加x坐标小于x ...

  8. bootstrap学习总结-css样式设计(一)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么?  即前端页面搭 ...

  9. html和css知识总结

    今天把整个html和css的总结了一遍.可能还有疏忽之处,共同学习吧 [行为样式三者分离] 不加行内css样式,不加行内js效果 [标签]1>单标签<!doctype html> 文 ...

  10. js中的垃圾回收机制

    代码回收规则如下: 1.全局变量不会被回收. 2.局部变量会被回收,也就是函数一旦运行完以后,函数内部的东西都会被销毁. 3.只要被另外一个作用域所引用就不会被回收  (闭包)