margin:-75px的理解及妙用——纯CSS制作水平/垂直都居中短边为50px/长边为150px的红色十字架
有这么一个题目：
使用重构的方式制作出一个如下图的水平、垂直都居中短边为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个比较详细的解释。
有时间就翻译下。
The Definitive Guide to Using Negative Margins
margin:-75px的理解及妙用——纯CSS制作水平/垂直都居中短边为50px/长边为150px的红色十字架的更多相关文章
- 纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 如何使用纯CSS制作特效导航条？
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- No.5 - 纯 CSS 制作绕中轴旋转的立方体
body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...
- 每日CSS_纯CSS制作进度条
每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...
- 纯CSS制作三角（转）
原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
- 一款纯css实现的垂直时间线效果
今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: ... 阅读原文 ...
- 纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
- 纯CSS完美实现垂直水平居中的6种方式
前言 由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的.网上讲居中的文章很多,但是都不太完整,所 ...
随机推荐
- Html网页生成Pdf
在http://code.google.com/p/wkhtmltopdf/downloads/list下载安装程序. 1.添加引用 using System.Diagnostics; 添加引用 2. ...
- 我的第一个boke
哈哈哈 接口
- 文字排版--字号、颜色(font-size, color)
可以使用下面代码设置网页中文字的字号为12像素,并把字体颜色设置为#666(灰色): body{font-size:12px;color:#666} 示例: <!DOCTYPE HTML> ...
- App上线基本流程
还可参考的:http://www.cocoachina.com/bbs/read.php?tid=330302 iOS项目上传前期准备材料: 1.已有开发者账号 2.已有发布证书 3.一张1024*1 ...
- 添加Appicon的方法
1.将设计好的图片,拖拽到Groups&Files的Resources目录下: 2.修改Resources目录下的“工程名-info.plist”文件 3.修改该文件的Iconfile属性,填 ...
- [转]Delphi调用cmd的两种方法
delphi调用cmd的两种方法vars:string;begins:='cmd.exe /c '+edit1.Text+' >c:\1.txt';winexec(pchar(s),sw_hid ...
- C++中 _itoa_s方法简介
_itoa_s 函数原型如下: _itoa_s ( int value, char *buffer, size_t sizeInCharacters, //存放结果的字符数组长度 int radix ...
- C++最后课程项目总结
第一次独立完成的C++小项目,40小时 + 5小时Update + 8小时Linux移植. 过程: 过程非常认真,一个星期主要就是忙这个,为了完成某个部分,有时饭都推迟吃,连续对着电脑10几个小时很累 ...
- 高级停靠(Dock)技术的实现
高级停靠(Dock)技术的实现 介绍 所谓停靠就是可以用鼠标拖动窗体或者控件,并将其从一个父窗体移出或者移动到另一个父窗体上,可以按水平,垂直方向整齐排列, 并且可以停靠在分页控制组件上.下面的示意图 ...
- Vim及VimScript资料总结《转载》
版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] Vim教程 入门 Vim 实用技术 Learning the vi and Vim Editors A Byte of ...