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. TOMCAT ---> servlet概念

    1 TOMCAT ---> servlet概念 2 TOMCAT 目录结构 (各个文件夹都存放什么东西) 3 TOMCAT 程序的层级 web | |---- js,jsp,html,css ( ...

  2. vue-cli3.0 gui（一）

    vue-cli3.0 gui 安装: npm i core-js -g:用于JavaScript的模块化标准库. npm i -g @vue/cli:vue的脚手架工具 运行: vue ui:运行vu ...

  3. codeforces-1138 (div2)

    想法题是硬伤,面对卡题和卡bug的情况应对能力太差 A.求两个前缀和以及两个后缀和,相邻最小值的最大值. #include<iostream> using namespace std; ; ...

  4. GO语言系列（二）- 基本数据类型和操作符

    一.文件名 & 关键字 & 标识符 1.所有go源码以.go结尾 2.标识符以字母或下划线开头,大小写敏感 3._是特殊标识符,用来忽略结果 4.保留关键字 二.Go程序的基本结构 p ...

  5. CMDB服务器管理系统【s5day89】：部分数据表结构-资产入库思路

    1.用django的app作为统一调用库的好处 1.创建repository app截图如下: 2.好处如下: 1.app的本质就是一个文件夹 2.以后所有的app调用数据就只去repository调 ...

  6. ntp 服务：Server dropped: Strata too high

    1.通过ntpdate -d 服务端IP,显示Server dropped: Strata too high vi /etc/ntp.conf 在ntpd服务端的配置中添加 server 127.12 ...

  7. jQuery实现获取选中复选框的值

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Jq ...

  8. mysql 分库分表 ~ ShardingSphere生态圈

    一  简介   Apache ShardingSphere是一款开源的分布式数据库中间件组成的生态圈二 成员包含   Sharding-JDBC是一款轻量级的Java框架,在JDBC层提供上述核心功能 ...

  9. 如果在ie上报错又找不到问题原因该怎么办？

    我司项目需要兼容IE浏览器 QQ浏览器 360浏览器,调了几天发现QQ跟360都没问题了然后只剩下一个问题就是IE上报错了!!! 然后去百度找了各种原因  最后发现在IE浏览器这种引入方式无法解析会报 ...

  10. spring集成Junit做单元测试及常见异常解决办法

    spring-test依赖包 <!--Spring-test --> <!-- https://mvnrepository.com/artifact/org.springframew ...