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中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的.网上讲居中的文章很多,但是都不太完整,所 ...
随机推荐
- oracle中创建表时添加注释
CREATE TABLE t1(id varchar2(32) primary key,name VARCHAR2(32) ,age VARCHAR2(32) );comment on column ...
- c读mysql产生乱码问题
在编写接口API时,发现中文字utf8输入的在linux下采用c读取显示为”??”问号,这是由于编码造成的. 很简单的两个地方做修改就搞定. 1.先找到mysql的my.cnf配置文件/etc/my. ...
- HTML5 canvas createRadialGradient()放射状/圆形渐变
定义和用法 createLinearGradient() 方法创建放射状/圆形渐变对象. 渐变可用于填充矩形.圆形.线条.文本等等. 提示:请使用该对象作为 strokeStyle 或 fillSty ...
- 在vSphere5.0虚拟机里的Ubuntu Server 32位安装JDK
本机操作系统Win7 服务器用vSphere 5.0 虚拟机 在虚拟机安装了Ubuntu Server 12.04 1.首先到Oracle官网上下载jdk-7u51-linux-i586.tar.g ...
- Html5 部分特性
HTML5 是 W3C 与 WHATWG 合作的结果. 编者注:W3C 指 World Wide Web Consortium,万维网联盟. 编者注:WHATWG 指 Web Hypertext Ap ...
- java '相等'的比较.
我们知道对于操作符 "==",如果比较的是原生类型(primitive type),表示的是 '值本身'是否相等;而对于引用类型(reference type),表示的是 '对象的 ...
- 修改docker默认172.17网段
docker启动时默认使用172.17.x.x作为容器的ip地址,可以通过以下方法自定义该网段: sudo service docker stop通过命令route -n查看docker0是否存在,若 ...
- 转-SecureCRT设置
原帖地址:http://www.2cto.com/os/201410/341569.html 一.基本设置 1.修改设置 为了SecureCRT用起来更方便,需要做一些设置,需要修改的有如下几处: 1 ...
- 【转】iOS-Core-Animation-Advanced-Techniques（五）
原文:http://www.cocoachina.com/ios/20150105/10829.html 图层时间和缓冲 图层时间 时间和空间最大的区别在于,时间不能被复用 -- 弗斯特梅里克 在上面 ...
- 层模型--相对定位(position:relative)
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left.right.top.bottom属性确定元素在正常文档流中的偏移位置.相对定位完成的过程 ...