所谓盒模型，就是浏览器为每个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. 采用Asp.Net的Forms身份验证时，非持久Cookie的过期时间会自动扩展

    问题描述 之前没有使用Forms身份验证时,如果在登陆过程中把HttpOnly的Cookie过期时间设为半个小时,总会收到很多用户的抱怨,说登陆一会就过期了. 所以总是会把Cookie过期时间设的长一 ...

  2. C# 反射 通过类名创建类实例

    “反射”其实就是利用程序集的元数据信息. 反射可以有很多方法,编写程序时请先导入 System.Reflection 命名空间. 1.假设你要反射一个 DLL 中的类,并且没有引用它(即未知的类型): ...

  3. Freescale OSBDM JM60仿真器

    OSBDM-JM60 - 9S08JM60 Based OSBDM — It includes interfaces and firmware applied to all the targets s ...

  4. 将博CMS安全分析报告-橘皮书

    一.使用IBM的AppScan和Acunetix应用程序漏洞扫描将博CMS5.5,得出一些漏洞.         此番扫描大小共23种类型问题,其中高危漏洞有三个,中危漏洞9个,低级漏洞11个.注意这 ...

  5. [ES6] 15. Generators -- 2

    Using for..of statement: function* greeting(){ console.log(`Generators are "lazy"`); yield ...

  6. 项目源码--Android聚合视频类播放器

    下载源码 技术要点:  1.高效支持主流的视音频格式 2.本地视频的播放与管理 3.聚合电视在线直播 4.聚合优酷.搜狐.乐视.爱奇艺等多种在线视频 5.优质播放,包含播放.暂停,声音.亮度调整等功能 ...

  7. DIH中添加不同的数据源

    需求:从mysql数据库中读取一个知识记录,从记录表中的字段值中获取一个文件路径,读取xml文件,xml文件中可能包含多个文档内容.建立索引. xml文件样例: <?xml version=&q ...

  8. UICollectionView 简单应用和实际操作

    1.网格视图   UICollectionView      网格布局 UICollectionViewFlowLayout系统图自带网格布局 系统自带的网格布局 UICollectionViewFl ...

  9. IOS开发篇UI之重用scrollView

    1.scrollView的介绍 scrollView是UI中的基础视图,他有着至关重要的作用,也是我们在UI中常用的控件.他的代理有很多我们需要用,这里我们就不再一一介绍了. 2.简单scrollVi ...

  10. web前端开发（3）

    css 类命名使用骆驼命名法,可以与划线法结合使用. 骆驼命名法用于区别单词,划线命名用于表达从属关系. 尽量不要使用子选择器,否则容易引起冲突隐患. css可以分为 base.common.page ...