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. 刚当上IT项目经理应该做些什么？

  2. P2774 方格取数问题 网络最大流 割

    P2774 方格取数问题:https://www.luogu.org/problemnew/show/P2774 题意: 给定一个矩阵,取出不相邻的数字,使得数字的和最大. 思路: 可以把方格分成两个 ...

  3. hihocoder #1617 : 方格取数（dp）

    题目链接:http://hihocoder.com/problemset/problem/1617 题解:一道递推的dp题.这题显然可以考虑两个人同时从起点出发这样就不会重复了设dp[step][i] ...

  4. 对git使用的初步总结

    使用git也才一周多,就已经深深爱上这款软件了. 之前公司一直用的是clearcase,一款老到除了公司内部的人和曾经开发这款软件的人,估计再也不会有人知道了吧! (当然也许还会有其他公司也会使用,因 ...

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

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

  6. Python保留小数的几种方法

    Python保留小数的几种方法 1.使用字符串格式化 print("%.2f"%a) 2.使用round内置函数 round(num,2) 3.使用Decimal模块 from d ...

  7. Python编译器及Sublime Text3安装及开发环境配置

    1.初学Python,你需要一个好的开发编辑器 在选择Python编辑器时,可能纠结于那个Python的版本更好一些,在Python2.x和Python3.x版本中, Python3.x版本更好一些, ...

  8. Git的使用（三）远程仓库添加及克隆

    Git是分布式版本控制系统,同一个Git仓库,可以分布到不同的机器上.怎么分布呢?最早,肯定只有一台机器有一个原始版本库,此后,别的机器可以“克隆”这个原始版本库,而且每台机器的版本库其实都是一样的, ...

  9. 归并排序、jensen不等式、非线性、深度学习

    前言 在此记录一些不太成熟的思考,希望对各位看官有所启发. 从题目可以看出来这篇文章的主题很杂,这篇文章中我主要讨论的是深度学习为什么要"深"这个问题.先给出结论吧:"深 ...

  10. android View的测量和绘制

    本篇内容来源于android 群英传(徐易生著) 我写到这里,是觉得徐易生讲的确实很好, 另外加入了一些自己的理解,便于自己基础的提高. 另外参考:http://www.gcssloop.com/cu ...