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. 基于Taro与Typescript开发的网易云音乐小程序

    基于Taro与网易云音乐api开发,技术栈主要是:typescript+taro+taro-ui+redux,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可 ...

  2. GO.Web服务

    Web基础 Web服务器的一般工作原理可以简单地归纳为: 客户机浏览器通过TCP/IP协议建立到服务器的TCP连接 客户端向服务器发送HTTP协议请求包,请求服务器里的资源文档 服务器向客户机发送HT ...

  3. NLP（八） 创建自然语言处理管道

    一条管道可以被看作一个多阶段的数据流系统,其中一个组件的输出被视为另一个组件的输入 管道特点: 数据始终从一个组件流向另一个组件 组件是一个只考虑输入和输出数据的黑盒 NLP管道应有的功能: 采集输入 ...

  4. SCRUM起源

    http://www.scrumcn.com/agile/scrum-knowledge-library/scrum.html#tab-id-3 Scrum的原始含义 Scrum原始含义是指英式橄榄球 ...

  5. codeforces 456 E. Civilization（并查集+数的直径）

    题目链接:http://codeforces.com/contest/456/problem/E 题意:给出N个点,M条边,组成无环图(树),给出Q个操作,操作有两种: 1 x,输出x所在的联通块的最 ...

  6. 林大妈的JavaScript进阶知识（三）：HTML5 History API

    HTML5中新增了History API,它用于管理浏览器路由跳转的一个url栈.History是window对象的一部分,它也是一个对象,因此称它是BOM(类似DOM,Browser Object ...

  7. Node基础-CommonJS模块化规范

    1.在本地项目中基于NPM/YARN安装第三方模块 第一步:在本地项目中创建一个"package.json"的文件 作用:把当前项目所有依赖的第三方模块信息(包含:模块名称以及版本 ...

  8. Salesforce LWC学习(六) @salesforce & lightning/ui*Api Reference

    上一篇中我们在demo中使用了很多的 @salesforce 以及 lightning/ui*Api的方法,但是很多没有细节的展开.其实LWC中针对这些module提供了很多好用的方法,下面对这两种进 ...

  9. 1512: [POI2006]Pro-Professor Szu

    首先把边反向, 问题转化成求从主建筑楼走向各个点的方案数. 然后缩点,块中的方案数可以直接算. 设f[i]表示走到第i个点的方案数.显然f[i]=∑f[j](存在newedge(j,i))初始时,f[ ...

  10. FreeSql （十五）查询数据

    FreeSql在查询数据下足了功能,链式查询语法.多表查询.表达式函数支持得非常到位. IFreeSql fsql = new FreeSql.FreeSqlBuilder() .UseConnect ...