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. Mysql根据出生日期计算年龄五种方法比较

    方法一 SELECT DATE_FORMAT(FROM_DAYS(TO_DAYS(NOW())-TO_DAYS(birthday)), '%Y')+0 AS age 方法一缺陷,就是当日期为未来日期时 ...

  2. XMind使用教程入门

    什么是思维导图 借用百度百科的介绍,思维导图又称脑图.心智导图.是一种将思维形象化的方法,它利用图文并重的方法,将各级主题之间的关系用相互隶属与相关的层级图表现出来,将主题关键词与图像.颜色等建立记忆 ...

  3. go-web程序的热更新

    前言: 一直编译累死人啊,该偷懒就得偷懒 当使用go开发web程序时,修改点代码就得编译,虽然编译速度很快,但是也累啊,想起java的spring-boot有热更新插件, php根本都不需要重启,go ...

  4. Jedis操作Redis--Hash类型

    /** * Hash(哈希表) * HDEL,HEXISTS,HGET,HGETALL,HINCRBY,HINCRBYFLOAT,HKEYS,HLEN,HMGET,HMSET, HSET,HSETNX ...

  5. [python] - profilers性能分析器

    1. 性能分析器: profile, hotshot, cProfile 2. 作用: 测试函数的执行时间 每次脚本执行的总时间

  6. BZOJ1878[SDOI2009]HH的项链+莫队算法模板

    题意:多次询问,求在一个区间中,有多少种珠子: 思路:莫队算法模板题目: 参考:https://www.cnblogs.com/RabbitHu/p/MoDuiTutorial.html #inclu ...

  7. CodeForces -Codeforces Round #496 (Div. 3) E2. Median on Segments (General Case Edition)

    参考:http://www.cnblogs.com/widsom/p/9290269.html 传送门:http://codeforces.com/contest/1005/problem/E2 题意 ...

  8. Joyful HDU - 5245 概率问题

    Sakura has a very magical tool to paint walls. One day, kAc asked Sakura to paint a wall that looks ...

  9. Codeforces 416D Population Size

    Population Size 题意: 一共n个数, 每个-1都可以变成一个正数, 现在要求最少数目的等差子序列,并且在这个子序列必须要连着截取一段,不能分开截取. 样例1: 8 6 4 2 1 4 ...

  10. asp net core mvc 跨域ajax解决方案

    1.配置服务端 在Startup文件中国配置Cors策略: IEnumerable<Client> clients= Configuration.GetSection("Clie ...