所谓盒模型，就是浏览器为每个HTML元素生成的矩形盒子。即HTML页面实际上就是由一系列盒子组成。这些盒子是按照可见版式在页面上排布的。并由三个属性进行控制：position属性，display属性,float属性。

position属性：控制页面元素之间的位置关系

display属性:控制元素的堆叠、并排、显示

float属性:提供控制方式，以便把元素组成多栏布局

需要说明的是，默认情况下，我们是看不到盒子的。

每个盒子都有三个属性：

边框（border）：可以设置边框的宽窄、样式和颜色

内边距（padding）：可以设置盒子内容区与边框的间距

外边距（margin）：设置盒子与盒子的间距

下面我用一张图来展示下

一个盒子有四天边，因此，边距、内边距、外边距各有top、right、bottom、left四条边

好啦，说了那么多废话，我们来实际的演示下

首先了，创建具有两个段落的HTML文档

<!DOCTYPE html>
<html>
<head>
    <title>CSS盒模型演示</title>
   <meta charset="utf-8">
    <link href="in_css/box.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="p_1">
    西山白雪三城戍，南浦清江万里桥。<br>
    海内风尘诸弟隔，天涯涕泪一身遥。<br>
    惟将迟暮供多病，未有涓埃答圣朝。<br>
    跨马出郊时极目，不堪人事日萧条。<br>

</p>
<p class="p_2">
    锦瑟无端五十弦，一弦一柱思华年。<br>
    庄生晓梦迷蝴蝶，望帝春心托杜鹃。<br>
    沧海月明珠有泪，蓝田日暖玉生烟。<br>
    此情可待成追忆，只是当时已惘然。<br>

</p>

</body>
</html>

然后，设置第一个段落的外边距为100px，在浏览器中查看效果

我们可以看到整个段落外边距情况

当单独为每条外边距编写样式的时候。显示如下

p.p_1{
    margin-top: 100px;
    margin-right: 400px;
    margin-bottom: 50px;
    margin-left: 400px;

}

几种简写说明：

①

p.p_1{
    margin: 200px 500px 20px 500px;

}

不写全

margin-top:200px;margin-right: 500px;margin-bottom:20px;margin-left: 500px;
默认按照顺时针顺序设置外边距
②自动取对边值
margin-top:200px;margin-right: 500px;margin-bottom:20px;

上面的代码最后一个外左边距没有写出，它会自动取右边距的值。同理可以省去下外边距

③只写一个值
margin: 50px;
则四条外边距全部取一样的值
 
 
下文待续……

五.CSS盒子模型的更多相关文章

  1. 浅谈CSS盒子模型

    [摘要]盒子模型是CSS中的一个重要概念,虽然CSS中没有盒子这个单独的属性对象,但它却是CSS中无处不在的一个重要组成部分.掌握盒子模型的原理和使用方法可以极大地丰富HTML元素的表现效果,同时对于 ...

  2. CSS盒子模型之CSS3可伸缩框属性（Flexible Box）

    CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

  3. 前端之CSS——盒子模型和浮动

    一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...

  4. 前端学习（十三）：CSS盒子模型

    进击のpython ***** 前端学习--CSS盒子模型 在前面的时候也说过,包括分析网页结构的时候,提到了,网页就其实就是一个一个盒子叠起来的 那现在就是有装饰的盒子,难度就变得深刻 所以说为了能 ...

  5. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  6. CSS盒子模型的理解

    标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...

  7. 每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位

    什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...

  8. CSS 盒子模型概述

    一.简介   CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成.     盒子模型,最里面的部分是实际内容:直接包围内 ...

  9. 标准的CSS盒子模型？与低版本IE的盒子模型有什么不同的？

    CSS盒子模型:由四个属性组成的外边距(margin).内边距(padding).边界(border).内容区(width和height); 标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不 ...

随机推荐

  1. 切取图片的一部分（利用CCRenderTexture）

    转自:http://blog.csdn.net/wcjwdq/article/details/37932769 显示图片时,在项目中经常会用只读取图片的一部分,而不是全部. 错误方式:很多人这时候会采 ...

  2. C++的优秀特性4：指针

    (转载请注明原创于潘多拉盒子) 其实指针不是C++的特性,而是地地道道的C的特性.有人说C++继承了C的指针,实在是败笔,造成内存泄漏云云,纯粹是不懂.可以这么说,如果没有指针,C++会逊色很多,应用 ...

  3. Codeforces Round #146 (Div. 1) A. LCM Challenge 水题

    A. LCM Challenge 题目连接: http://www.codeforces.com/contest/235/problem/A Description Some days ago, I ...

  4. UVALive 4221 Walk in the Park 扫描线

    Walk in the Park 题目连接: https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemi ...

  5. 无线网卡的查看与配置——iw，iwconfig，ethtool

    摘要:在linux上,我们经常需要把一台笔记本设置成一个共享wifi上网的路由器.如果我们需要把本机配置成一台无线AP,就需要查看网卡的相关信息和进行对应配置.其中iw.iwconfig和ethtoo ...

  6. 今天弱爆了,svn创建项目

    今天弱爆了 1.再svnRoot下新建你要建的项目名如:hqdj  文件夹,然后选中它点击右键选中create repository here... ,选择文件系统类型 2.进入conf文件夹进行配置 ...

  7. Android中的Handler的具体用法

    Android UI操作并不是线程安全的并且这些操作必须在UI线程中执行.Android利用Handler来实现UI线程的更新的. Handler是Android中的消息发送器,其在哪个Activit ...

  8. Android 开发中使用Intent传递数据的方法

    Activity之间通过Intent传递值,支持基本数据类型和String对象及 它们的数组对象byte.byte[].char.char[].boolean.boolean[].short.shor ...

  9. UnityVS(Visual Studio Tools For Unity)的安装与使用

    首选微软的官方博客地址:http://blogs.msdn.com/b/visualstudio/archive/2014/07/29/visual-studio-tools-for-unity-1- ...

  10. MySQL通用优化 叶金荣！！！

    http://mp.weixin.qq.com/s?__biz=MjM5NDE0MjI4MA==&mid=208777870&idx=1&sn=6efddd6283e4deb3 ...