margin使用技巧：

（1）设置元素水平居中：margin:x auto;

（2）margin负值让元素位移及边框合并

水平居中：auto

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        body{

            margin:0px;

        }

        .box{

            width:600px;

            height:100px;

            border:1px solid black;

            margin:100px auto 0;

            /*background-color:gold;*/

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

负值：元素位移及边框合并

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        body{

            margin:0;

        }

        .box{

            width:202px;

            height:156px;

            background-color:gold;

            margin:50px auto 0;

        }

        .box div{

            width:200px;

            height:30px;

            border:1px solid green;

            background-color:gold;

            margin-top:-1px;  /* 方法二 */

            /*border-bottom:0px;*/

        }

        /* 方法一：

        .box .last{

            border-bottom:1px solid green;

        }

        */

    </style>

</head>

<body>

    <div class="box">

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div class="last"></div>

    </div>

</body>

</html>

页面显示效果：

外边距合并：

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者，解决方法如下：

（1）使用这种特性

（2）设置一边的外边距，一般设置margin-top （实际开发中常用）

（3）将元素浮动或者定位

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>垂直边距合并</title>

    <style type="text/css">

        .box{

            width:500px;

            border:1px solid black;

            margin:50px auto 0;

        }

        .box div{

            margin:20px;

        }

    </style>

</head>

<body>

    <div class="box">

        <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

            合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>

        <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

            合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>

        <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

            合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>

        <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

            合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>

    </div>

</body>

</html>

页面显示效果：

css margin使用技巧的更多相关文章

  1. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  2. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  3. 《CSS动画实用技巧》课程笔记

    概述 这是我学习[CSS动画实用技巧][1]的课程笔记 常用动画属性--transition [常用动画属性--transition][2] .change img{ display:block; w ...

  4. css样式小技巧

    1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...

  5. 10个CSS简写/优化技巧-摘自网友

    10个CSS简写/优化技巧23来源/作者:未知 类别:前端开发 字体大小:大|中|小 背景颜色:蓝|白|灰 ? ? CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写.CS ...

  6. Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧

    <!DOCTYPE html> Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧--summer-rain博客园 xiayuhao 东风夜放花千树. 博 ...

  7. CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

    首页   登录注册         CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...

  8. DIV+CSS一些小小的技巧

    DIV+CSS网页布局技巧实例1:设置网页整体居中的代码 以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实 ...

  9. DIV+css排版问题技巧总结---v客学院技术分享

                DIV+css排版问题技巧总结 一．排版思路 1.从上到下,从左到右,从大到小. 2.首先确定排版分区,排除色块分布,然后再从简单的部分开始. 3.在某一块内将HTML部分写好 ...

随机推荐

  1. 深入理解pthread_cond_wait、pthread_cond_signal

    ===============================man pthread_cond_wait的解释========================== LINUX环境下多线程编程肯定会遇到 ...

  2. cmd 命令添加防火墙端口

    windows dos 命令添加防火墙端口. 示例 123 端口: netsh firewall add portopening protocol = UDP port = name = NTPSER ...

  3. 2019最新迅为-i.MX6Q开发板资料目录

            迅为IMX6开发板: Android4.4系统  Linux + Qt5.7系统  Ubuntu12.04系统 部分案例:HMI:3D打印机:医疗设备:工控机:触控一体机:车载终端 核 ...

  4. iTOP-iMX6开发板-Android-can测试例程介绍

    TOP-iMX6开发板的 Android 源码的 can 例程包含在 Android 源码中,在“ packages/apps/”目 录下,如下图所示,这个是应用界面的源码.   如下图所示,can ...

  5. yolo类检测算法解析——yolo v3

    每当听到有人问“如何入门计算机视觉”这个问题时,其实我内心是拒绝的,为什么呢?因为我们说的计算机视觉的发展史可谓很长了,它的分支很多,而且理论那是错综复杂交相辉映,就好像数学一样,如何学习数学?这问题 ...

  6. webpack学习笔记——sourcemap(使用webpack打包的项目如何调试代码)

    [webpack]devtool里的7种SourceMap模式是什么鬼? 里面详细介绍了7种模式的区别,和建议使用. webpack sourcemap 选项多种模式的一些解释 两篇文章大同小异,第一 ...

  7. Centos7 设置vim 显示文本不同颜色

    Centos7 设置vim 显示文本不同颜色 本人在查找设置 centos7 vim 文本显示颜色时, 学习了作者: luffy5459 (博客连接:https://blog.csdn.net/fei ...

  8. 401 experience

    AM: 块元素与内联元素  : div与span的区别 span只能设置水平的margin(左右内外边距) 在span里面加 display:block; 内联转块(相当于给span加了上下的边距)反 ...

  9. 【原创】大叔问题定位分享（24）hbase standalone方式启动报错

    hbase 2.0.2 hbase standalone方式启动报错: 2019-01-17 15:49:08,730 ERROR [Thread-24] master.HMaster: Failed ...

  10. webpack4加载字体

    webpack加载字体,刚开始下载完字体后就用css去引用它,结果死活没显示我要的字体,后来https://www.aliyun.com/jiaocheng/654750.html这篇文章说要把下载的 ...