有这么一个题目：

　　使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px，长边为150px的红色十字架。

　　要求只使用2个div完成

答案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>2个DIV</title>

<style type="text/css">

#heng,#shu{left:50%;top:50%;position:absolute; background-color:#f00;}

#shu{width:50px;height:150px;margin-left:-25px;margin-top:-75px;}

#heng{width:150px;height:50px;margin-left:-75px;margin-top:-25px;background-color:#f00;}

</style>

</head>

<body>

     <div id="heng"></div>

     <div id="shu"></div>

</body>

</html>

看完，不禁对 margin: -75px 这个用法产生了深深的疑问？怎么还能这么用，这怎么理解？

无论国外国内的w3cschool都没有解释这个问题，只是说允许负值。但是负值该怎么形象的去理解呢？

Google了一下 “margin negative values”，下面是2个比较详细的解释。

有时间就翻译下。

http://stackoverflow.com/questions/11495200/how-do-negative-margins-in-css-work-and-why-is-margin-top-5-margin-bottom5

The Definitive Guide to Using Negative Margins

margin:-75px的理解及妙用——纯CSS制作水平/垂直都居中短边为50px/长边为150px的红色十字架的更多相关文章

  1. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  3. No.5 - 纯 CSS 制作绕中轴旋转的立方体

    body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...

  4. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  5. 纯CSS制作三角（转）

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  6. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  7. 一款纯css实现的垂直时间线效果

    今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: ... 阅读原文 ...

  8. 纯CSS制作空心三角形和实心三角形及其实现原理

    纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...

  9. 纯CSS完美实现垂直水平居中的6种方式

    前言 由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的.网上讲居中的文章很多,但是都不太完整,所 ...

随机推荐

  1. 10.3 noip模拟试题

    希望[题目描述]网页浏览器者有后退与前进按钮,一种实现这两个功能的方式是用两个栈,“前进栈”.“后退栈”.这里你需要实现以下几个功能:BACK: 如果“后退栈”为空则忽略此命令. 否则将当前两面压入“ ...

  2. WPF 媒体播放器（MediaElement）使用实例（转）

    在WPF 中可以使用MediaElement 为应用程序添加媒体播放控件,以完成播放音频.视频功能.由于MediaElement 属于UIElement,所以它同时也支持鼠标及键盘的操作.本篇将使用M ...

  3. TextView使用Spannable设置复合文本

    http://blog.csdn.net/linghu_java/article/details/32053167 Spannable 对文字的编辑减少TextView的拼接并且达到改变一串字符中的部 ...

  4. [原创] SQLite数据库使用清单（下）

    上文两章对SQLite的功能.语法.和操作进行了介绍,本文讲解SQLite的一些高级语法和操作. 3.

  5. nest 'for' loop.

    /* nest for loop demo. Note that,'upside' triangle controls 'inner condition'. */ import kju.print.P ...

  6. 关于ASP.NET控件方面的学习（恢复版）

    前段时间没有把学习中的遇到的问题和解决方法详细总结,今天整理整理.. 鉴于我们这个研究生论文管理系统是小组形式,所以说虽然我只负责数据库,但是其它部分也多少有些工作方面的涉及,最后感谢各位同学和老师的 ...

  7. 【转】Entity Framework教程

    转自:http://www.cnblogs.com/xray2005/category/189491.html   Entity Framework系列文章导航 摘要: 本节集合了Entity Fra ...

  8. JqGrid自定义toolbar

    1.设置toolbar参数为[true,"top"],其意思是toolbar显示在Grid顶部,且其id为t_+Grid的id.e.g.: Grid的id为myGrid,toolb ...

  9. 用Raphael在网页中画圆环进度条

    原文 :http://boytnt.blog.51cto.com/966121/1074215 条状的进度条我们见得太多了,实现起来比较简单,它总是长方形的,在方形的区域里摆 放就不太好看了.随着cs ...

  10. virtualbox 安装 android 经验总结

    装了好多个版本,最终总结一下遇到的问题, 1.直接下载的镜像文件没有找到如何设置分辨率的方法,因此放弃使用 2.在安装过程中,首先创建虚拟机,在virtualbox中创建硬盘的时候一定要选HDD格式, ...