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. MapReduce 概述

    定义 Hadoop MapReduce 是一个分布式运算程序的编程框架,用于轻松编写分布式应用程序,以可靠,容错的方式在大型集群(数千个节点)上并行处理大量数据(TB级别),是用户开发 “基于 Had ...

  2. C++回顾day03---<纯虚函数和抽象类以及虚析构函数，delete使用>

    一:纯虚函数和抽象类 纯虚函数是一个在基类中说明的虚函数,在基类中没有定义,要求任何派生类都定义自己的版本 纯虚函数为各个派生类提供一个公共接口 纯虚函数的形式: virtual 类型 函数名(参数列 ...

  3. [物理学与PDEs]第2章第1节 理想流体力学方程组 1.3 理想流体力学方程组的数学结构

    1.  局部音速 $c$: $c^2=\cfrac{\p p}{\p \rho}>0$. 2.  将理想流体力学方程组 $$\beex \bea \rho\cfrac{\p {\bf u}}{\ ...

  4. AS中的minSdkVersion、compileSdkVersion、targetSdkVersion、buildTools及tools关系和区别

    1.参考文章关于compileSdk.minSdk.targetSdk的文章 http://chinagdg.org/2016/01/picking-your-compilesdkversion-mi ...

  5. 【vue】路由配置

    一般组件我们会有全屏组件,或是在页面的某个部分显示组件,所以路由的第一层一般是全屏显示的,而在/目录下的组件为页面的某个部分显示的,通常需求是这样的,登录是全屏显示的,而普通页面是在页面的某个部分进行 ...

  6. 第四周结对项目总结及改进（ui/web）

    项目介绍 随着社会科技的进步和多媒体教育的日益发展,越来越来的学生正在接受着新时代下的教育模式,而且手机.电脑等科技产品的普及以及其带来的更高效更便捷的模式 使得它们成为当代学生学习中的一种很好的学习 ...

  7. C++设计模式——解释器模式

    解释器模式 在GOF的<设计模式:可复用面向对象软件的基础>一书中对解释器模式是这样说的:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子.如 ...

  8. C“控制”Lua

    [前言] 写过Windows程序的人都知道,对于应用程序,如果需要在本地保存一些配置信息,我们经常将这些配置信息写在注册表或者本地的配置文件中,很多应用都是将一些配置信息写在配置文件中,比如以ini结 ...

  9. mysql 迁移

    背景 这次做oracle数据迁移,也想总结像mysql的数据迁移方式.简单列下吧,因为具体方式网上很多. 方式 可以通过修改mysql.ini的数据文件目录位置方法实现拷贝迁移,此种方式简单 通过备份 ...

  10. Images corrections preview with lensfun 不同型号镜头预览图 828张 合集

    lensfun 目前支持900多种镜头, 但是网上并没有预览图; 闲暇时间做了800多张预览图合集 下载地址 链接: https://pan.baidu.com/s/1crfhoKKZKnxntvNH ...