所谓盒模型，就是浏览器为每个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. C++的优秀特性3：构造函数和析构函数

    (转载请注明原创于潘多拉盒子) 构造函数和析构函数是C++中再熟悉不过的概念了,几乎每个了解一点C++的人都知道这两个概念是什么意思.一个对象的全部生命期中构造函数和析构函数执行的时机如下: 1. 为 ...

  2. hdu 4499 Cannon dfs

    Cannon Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=4499 D ...

  3. Flex+Struts2+JSON实现Flex和后台的HTTP Service请求

    http://www.fengfly.com/plus/view-191093-1.html Flex+Struts2+JSON的后台代码我在这就不多说了.不懂得请看我写的上一篇文章<Strut ...

  4. 终端I/O之获得和设置终端属性

    使用函数tcgetattr和tcsetattr可以获得或设置termios结构.这样也可以检测和修改各种终端选择标志和特殊字符,以使终端按我们所希望的方式进程操作. #include <term ...

  5. 基于HTML5实现的中国象棋游戏

    棋类游戏在桌面游戏中已经非常成熟,中国象棋的版本也非常多.今天这款基于HTML5技术的中国象棋游戏非常有特色,我们不仅可以选择中国象棋的游戏难度,而且可以切换棋盘的样式.程序写累了,喝上一杯咖啡,和电 ...

  6. 用PredicateBuilder实现Linq动态拼接查询

    在使用Linq查询的时候,特别是如果你在使用Entiry Framwork,有时会遇到动态查询的情况(客户的查询条件是不固定的拼接查询).我们能想到的第一方案应该是拼接SQL,的确这样是可以达到我们的 ...

  7. solr--搜索参数随笔

    1.默认搜索域.查询域的关系 qf字段的配置:query fields,指定solr从哪些field中搜索 在solrj中设置如下: params.setParam("qf", & ...

  8. ios - 带动画圆形旋转的进度条

    #import <UIKit/UIKit.h> @interface TJCircleProgressView : UIView /** * 图标 */ @property(nonatom ...

  9. iOS -动态可变参数

    #import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...

  10. Mac 下抓包工具 Charles 修改特定请求

    Charles 是 Mac 下常用的抓包工具,它通过将自己设置成系统的代理服务器,从而完成了抓包的工作. 同类的工具还有 fiddler 和 Wireshark,其中 fiddler 是微软公司使用 ...