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. 2017-12-19python全栈9期第四天第一节之昨日内容回顾与作业讲解之插入insert和extend

    #!/user/bin/python# -*- coding:utf-8 -*-li = ['zs','ls','ww','zl']li.insert(4,'cc')print(li)li.exten ...

  2. SpringBoot项目@RestController使用 redirect 重定向无效

    Spring MVC项目中页面重定向一般使用return "redirect:/other/controller/";即可. 而Spring Boot当我们使用了@RestCont ...

  3. Hadoop记录- zookeeper 监控指标

    目前zookeeper获取监控指标已知的有两种方式: 1.通过zookeeper自带的 four letter words command 获取各种各样的监控指标 2.通过JMX Client连接zo ...

  4. Oracle10gXE和Oracle SQL Developer本地安装配置

    第1部分 Oracle10gXE安装 Oracle10gXE安装的安装几乎是一路next就可以安装好:但是中间设置的用户名.密码.口令.SID等信息一定记住,后面需要使用. 第2部分 Oracle S ...

  5. MVC控制器返回一个list 视图接收

    控制器 public ActionResult InfoFrame() { List<Users> list = new List<Users>(); if (Session[ ...

  6. Nginx web 服务器 安装篇

    Nginx介绍: 静态web服务器有Nginx .Apache .lighttpd等 目前国内用的最常见的就是Nginx 和Apache 是一个开源的.支持高性能.高并发的www服务和代理服务软件,N ...

  7. Dijkstra算法的C++实现

    Dijkstra算法是在图中寻找两顶点最短路径的算法.   下面以下图有向图为例,说明其基本思想. 上图为转化为邻接矩阵存储:     现在我要寻找1点到其他点的最短距离以及路径: a)1点到各点的距 ...

  8. codeforces 787D - Legacy 线段树优化建图,最短路

    题意: 有n个点,q个询问, 每次询问有一种操作. 操作1:u→[l,r](即u到l,l+1,l+2,...,r距离均为w)的距离为w: 操作2:[l,r]→u的距离为w 操作3:u到v的距离为w 最 ...

  9. 【原创】大数据基础之Spark（5）Shuffle实现原理及代码解析

    一 简介 Shuffle,简而言之,就是对数据进行重新分区,其中会涉及大量的网络io和磁盘io,为什么需要shuffle,以词频统计reduceByKey过程为例, serverA:partition ...

  10. sublime代码整理

    1. 2.输入: { "keys":["ctrl+shift+z"], (快捷键自定义,只要不冲突就可以了) "command":" ...