margin

外边距，表示边框到最近盒子的距离。

对于左右两边

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
         *{
             padding: 0px;
             margin: 0px;
         }
         .box1{
             width: 200px;
             height: 200px;
             background-color: red;
             display: inline-block;
             margin-right: 20px;
         }
         .box2{
             width: 200px;
             height: 200px;
             background-color: green;
             display: inline-block;
             margin-left: 20px;
         }
     </style>

 </head>
 <body>

 <span class="box1"></span>
 <span class="box2"></span>

 </body>
 </html>

对于上下盒子

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
         *{
             padding: 0px;
             margin: 0px;
         }
         .box1{
             width: 200px;
             height: 200px;
             background-color: red;
             display: block;
             margin-bottom: 20px;
         }
         .box2{
             width: 200px;
             height: 200px;
             background-color: green;
             display: block;
             margin-top: 60px;
         }
     </style>

 </head>
 <body>

 <span class="box1"></span>
 <span class="box2"></span>

 </body>
 </html>

这种现象叫做margin塌陷问题，当给两个标准文档流下的盒子设置垂直方向上的margin时，以较大的为准。

当我们给两个标准流下的兄弟盒子设置浮动之后，它们脱离了标准文档流，就不会出现margin塌陷的问题。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
        *{
             padding: 0;
             margin: 0;
         }
         .father{
             width: 400px;
             overflow: hidden;
             border: 1px solid gray;
         }
         .box1{
             width: 300px;
             height: 200px;
             background-color: red;
             margin-bottom: 20px;
             float: left;
         }
         .box2{
             width: 400px;
             height: 300px;
             background-color: green;
             margin-top: 50px;
             float: left;
         }

     </style>

 </head>
 <body>

 <div class="father">
     <div class="box1"></div>
     <div class="box2"></div>
 </div>

 </body>
 </html>

margin：0  auto；

设置标准文档流下的盒子居中。

如果给盒子设置了浮动，则margin：0 auto失效。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
        *{
             padding: 0;
             margin: 0;
         }
         .box1{
             width: 200px;
             height: 200px;
             background-color: red;
             margin: 0 auto;
         }
         .box2{
             width: 400px;
             height: 300px;
             background-color: green;
         }

     </style>

 </head>
 <body>

 <div class="box1"></div>
 <div class="box2"></div>

 </body>
 </html>

使用margin：0 auto;注意点：

1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;

2.只有标准流下的盒子 才能使用margin:0 auto;

当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

作者：流浪者

日期：2019-08-31

07-简单认识margin的更多相关文章

  1. MySQL实战 | 06/07 简单说说MySQL中的锁

    原文链接:MySQL实战 | 06/07 简单说说MySQL中的锁 本文思维导图:https://mubu.com/doc/AOa-5t-IsG 锁是计算机协调多个进程或纯线程并发访问某一资源的机制. ...

  2. 简单属性margin和padding

    关于margin属性的介绍 margin:20px 上 右 下 左 都是20px margin:20px 40 px 上 下 20px 左 右 40px margin:20px 40px  60px ...

  3. TERSUS无代码开发(笔记07)-简单实例手机端后台逻辑开发

    提交申请逻辑开发 1.添加父级对象引用(从父级对象中获取前端输入框的值) 1.设计数据库表(表名和字段名称不能用中文) 2.设计置数据库主键(可设联合主键) 3.传值形成数据实列处理 4.服务器端处理 ...

  4. ThinkPhp学习07

    原文:ThinkPhp学习07 简单CRUD操作 public function show() { $m=M('User'); // $arr=$m->find(2); //查找id=2的数据, ...

  5. a标签和p标签不能设置margin

    经常会发现正常div的属性在a标签上或者p标签上都不管用,这是因为a标签和p标签都不是盒子模型. 例如: <div style="margin-top:5px;">&l ...

  6. margin和padding的四种写法

    我们经常会看到CSS样式属性中外边距margin和内边距padding的各种用法,这里做一个小结,但只简单介绍margin,因为它们的用法大同小异. 方法一. margin:10px; //4个外边距 ...

  7. TERSUS无代码开发(笔记08)-简单实例电脑端后台逻辑开发

    主管审批功能逻辑开发 1.查询逻辑开发(查询待审批记录) 2.批准处理(将选中的一条记录进行批准处理)  =============================================== ...

  8. TERSUS无代码开发(笔记06)-简单实例手机端页面设计

    手机端的设计 1.页面说明 2.默认页面===>提交请假单(上面页面双击进入,页面主要编辑区) 2.1默认页面===>提交请假单===>头部区(页面部份主要编辑区01) 2.1.1默 ...

  9. Java 环境下使用 AES 加密的特殊问题处理

    在 Java 环境下使用 AES 加密,在密钥长度和字节填充方面有一些比较特殊的处理. 1. 密钥长度问题 默认 Java 中仅支持 128 位密钥,当使用 256 位密钥的时候,会报告密钥长度错误 ...

  10. css 描述css reset的作用和用途。

    描述css reset的作用和用途. 作用 : 因为浏览器的品种很多,每个浏览器的默认样式也是不同的.通过重新定义标签样式.“覆盖”浏览器的CSS默认属性. 有最简单的*{margin:0 ;  pa ...

随机推荐

  1. 2019 Multi-University Training Contest 7

    2019 Multi-University Training Contest 7 A. A + B = C 题意 给出 \(a,b,c\) 解方程 \(a10^x+b10^y=c10^z\). tri ...

  2. hdu6312 2018杭电多校第二场 1004 D Game 博弈

    Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  3. Atcoder D - 3N Numbers（优先队列+dp）

    题目链接:http://abc062.contest.atcoder.jp/tasks/arc074_b 题意:给出3*n个数要求去掉n个数使得剩下的前n个数-后n个数的差最大. 题解:显然是一道如果 ...

  4. 一起MySQL时间戳精度引发的血案

    写在前面 最近工作中遇到两例mysql时间戳相关的问题,一个是mysql-connector-java和msyql的精度不一致导致数据查不到:另一例是应用服务器时区错误导致数据查询不到.通过这篇文章, ...

  5. HTML5基本介绍

    HTML5简介 HTML是互联网上应用最广泛的标记语言.HTML文件就是普通文本+HTML标记,而不同的HTML标记能表示不同的效果.(简单的说HTML是超文本标记语言) HTML5草案的前身名为 W ...

  6. Python3-编码问题-解决为何我的python打印总是出现乱码？？

    #python3 编码问题: ############举个例子############################### import sys print(sys.getdefaultencodi ...

  7. C# 表达式树Lambda扩展（四）

    一.前言 本来计算这篇文章在后面需要运用的时候写的,但是既然写到表达式的扩展呢,就一起写完吧. 看到这个标题就有一种疑问,Lambda表达式本来就是表达式树,还需要怎么扩展?那就看看下面的内容,你就知 ...

  8. 【深入浅出-JVM】（77）：SPI

    概念 Service Provider Interface 规则 在resource/META-INF/services 创建一个以接口全限定名为命名的文件,内容写上实现类的全限定名 接口实现类在cl ...

  9. Spring MVC+ajax进行信息验证

    本文是一个ajax结合Spring MVC使用的入门,首先我们来了解一下什么是Ajax AJAX 不是新的编程语言,而是一种使用现有标准的新方法.AJAX 最大的优点是在不重新加载整个页面的情况下,可 ...

  10. Redis常用命令（key、string、List）

    1.Key 1.keys *   查询所有数据 2.exists key名   判断key名是否存在 3.move key名  数据库号(0-15)  移动数据key名到相应的数据库 4.expire ...