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. Browserify模块化使用教程

    Browserify模块化使用教程 创建项目结构 |-js |-dist //打包生成文件的目录 |-src //源码所在的目录   |-module1.js   |-module2.js   |-m ...

  2. Spark SQL相关总结

    1.spark 数据透视图: pivot(pivot_col, values=None) Pivots a column of the current [[DataFrame]] and perfor ...

  3. maven私库nexus2.11.4迁移升级到nexus3.12.0

    nexus简介 nexus是一个强大的maven仓库管理器,它极大的简化了本地内部仓库的维护和外部仓库的访问. nexus是一套开箱即用的系统不需要数据库,它使用文件系统加Lucene来组织数据 .n ...

  4. Web常见漏洞修复建议

    一.SQL注入修复建议 1.过滤危险字符,例如:采用正则表达式匹配union.sleep.and.select.load_file等关键字,如果匹配到则终止运行. 2.使用预编译语句,使用PDO需要注 ...

  5. 获取多<a/>标签id值的点击事件

    <li> <div class="pic"> <c:if test="${userId != null }"> <a ...

  6. Java消息队列--ActiveMq 初体验

    1.下载安装ActiveMQ ActiveMQ官网下载地址:http://activemq.apache.org/download.html ActiveMQ 提供了Windows 和Linux.Un ...

  7. Python 概念小屋

     Python 中的 if __name__ == '__main__' 该如何理解 python多进程的理解 multiprocessing Process join run      

  8. 【转】利用apktool反编译apk，并且重新签名打包

    网站:https://ibotpeaches.github.io/Apktool,下载安装好apktool. 我的安装在 C:\Users\Administrator\Downloads\apktoo ...

  9. jarvis level6_x64堆溢出unlink拾遗

    level6 32位的我没有调出来,貌似32位的堆结构和64位不太一样,嘤嘤嘤?,所以做了一下这个64位的,题目地址,level6_x64 首先看一下程序的结构体 struct list //0x18 ...

  10. 51nod--1174 区间中最大的数 （RMQ）

    题目: 1174 区间中最大的数 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 给出一个有N个数的序列,编号0 - N - 1.进行Q次查询,查询编号i至j ...