有这么一个题目：

　　使用重构的方式制作出一个如下图的水平、垂直都居中短边为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. 自己做的demo--关于HashMap

    package com.pb.collection; import java.util.HashMap; import java.util.Iterator; import java.util.Map ...

  2. Iterator<Entry<String,String>> iter=map.entrySet().iterator(); 是什么意思

    //获得map的迭代器,用作遍历map中的每一个键值对Iterator是迭代器,map之前应该定义过,姑且认为是HashMap.<Entry<String,String>>表示 ...

  3. 基于事件的异步模式——BackgroundWorker

    实现异步处理的方法很多,经常用的有基于委托的方式,今天记录的是基于事件的异步模式.利用BackgroundWorker组件可以很轻松的实现异步处理,并且该组件还支持事件的取消.进度报告等功能.本文以计 ...

  4. Adb工具常用操作-转（二）

    一. PC与模拟器或真机交换文件(adb pull和adb push) 在开发阶段或其他原因,经常需要将PC上的文件复制到模拟器或真机上,或将模拟机和真机上的文件复制到PC上.使用adb pull和a ...

  5. How to customize authentication to my own set of tables in asp.net web api 2?

    ssuming your table is called AppUser, convert your own AppUser domain object to IUser(using Microsof ...

  6. C# Activator.CreateInstance()

    C#在类工厂中动态创建类的实例,所使用的方法为: 1. Activator.CreateInstance (Type) 2. Activator.CreateInstance (Type, Objec ...

  7. VMware Workstation 11序列号一枚

    VMware Workstation 11序列号: 1F04Z-6D111-7Z029-AV0Q4-3AEH8

  8. cas的url中去掉jsessionid

    Servlet3.0规范中的<tracking-mode>允许你定义JSESSIONID是存储在cookie中还是URL参数中.如果会话ID存储在URL中,那么它可能会被无意的存储 在多个 ...

  9. 从零开始学java(猜数字游戏)

    练练手不喜勿喷,看到什么学习什么第一次发博客格式就见见谅.....                                            2016-07-21 19:55:02 imp ...

  10. corejava-chap01

    <java是什么:>Programming language 程序语言Development environment 开发环境Application environment 应用环境Dep ...