所谓盒模型，就是浏览器为每个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. eclipse界面语言的切换方法

    很久以前在我一个朋友的blog上看到过关于eclipse中英文语言界面切换的方法,觉得挺不错,后来自己也用过几次 现在想想,这个方法真的很不错,刚才又在自己机器上做了几次试验,发现eclipse事实上 ...

  2. Delphi Data Type to C# Data Type

    Delphi DataType C# datatype ansistring string boolean bool byte byte char char comp double currency ...

  3. EntityFramework Code First 优化-IIS 8的第一次优化请求配置

    首先需要在Window中添加Application Initialization Application Initialization 在IIS中配置Application Pool 编辑Applic ...

  4. little's law(律特法则)

    参考:https://en.wikipedia.org/wiki/Little%27s_law(周末看一下) 最近在做性能压力测试,开始时,压力压不上去,参考: N = X * E[T] ,N就是你的 ...

  5. linux脚本^M: bad interpreter:解决方法

    转自:http://blog.csdn.net/huiguixian/article/details/6386774 在Linux中执行.sh脚本,异常提示/bin/sh^M: bad interpr ...

  6. oc-25-id类型

    /** id:万能指针 能够指向任何OC对象. id = NSObject *, id cat = [Cat new]; [cat jump]; NSObject:是所有类的父类,基类.可以指向任何O ...

  7. The LMAX disruptor Architecture--转载

    原文地址: LMAX is a new retail financial trading platform. As a result it has to process many trades wit ...

  8. ApplePay高调入华，教你在app里上线ApplePay

      ApplePay在中国上线后,就有许多线上app前后脚加入了对其的接入支持,个人比较喜欢的ENJOY也抢在首批接入了ApplePay应用内支付.本文将分享作者的接入经验. ApplePay是苹果公 ...

  9. UVa OJ 10300

    Problem A Ecological Premium Input: standard input Output: standard output Time Limit: 1 second Memo ...

  10. 2dx关于js响应layer触摸消息的bug

    cocos2dx关于js响应layer触摸消息的bug cocos2d-x 3.7 问题描述: 目前这个版本中(3.7),c++层的layer触摸消息只能通过消息的方式发送给js,不能像lua一样直接 ...