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中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的.网上讲居中的文章很多,但是都不太完整,所 ...
随机推荐
- 彻底删除mysql的方法（有隐藏文件）
1.建议使用360进行卸载,可以彻底卸载软件 2.360会提醒删除注册表 3.这个隐藏文件要删除掉 在 C:\Documents and Settings\ 路径下搜索 MySQL 文件夹(默认隐藏的 ...
- DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV
DIV布局网页的第三种方式:覆盖.DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框. 请看代码: HTML部分: XML/HTML Code复 ...
- youphp学习整理
<?php //后台公共模块 // _list 数据显示 // add 添加/编辑 视图 // insert 添加处理函数 // edit 添加/编辑 视图 // update 更新处理函数 / ...
- java常用指令
javac 编译java源文件到字节码文件 -d XXX 1.指定编译后的字节码文件存放位置. 2.若编译的java源文件中使用包名,则根据包名生成相应的子目录 javac -d . Hello.ja ...
- 数据挖掘经典书籍[ZZ]
数据挖掘就是在数据库中查找所需数据的过程,它是随着数据库产生的一门学科.近几年,数据库的发展还是非常迅速的,数据挖掘也成为热门技术,学习的人络绎不绝.下面给大家介绍的就是数据挖掘经典书籍及数据挖掘书籍 ...
- SGU 113.Nearly prime numbers
水一个代码: #include <iostream> using namespace std; int n, a; bool ok; bool prime (int x) { ; i * ...
- Codeforces Round #287 D.The Maths Lecture
The Maths Lecture 题意:求存在后缀Si mod k =0,的n位数的数目.(n <=1000,k<=100); 用f[i][j]代表 长为i位,模k等于j的数的个数. 可 ...
- laravel5验证码
首先呢在laravel5中默认是没有提供验证码的,这里我们需要使用第三方提供的库:gregwar/captcha 通过composer安装: 在composer.json的require中加入&quo ...
- 2 - Annotations标注
下面是TestNG标注和参数的一个快速预览 @BeforeSuite 被标注的方法会在这个套件的所有测试执行之前执行 @AfterSuite 被标注的方法会在这个套件的所有测试执行之后执行 @Bef ...
- ecshop 嵌入地图加载不了问题
在ecshop 添加一个标识商家地理位置信息. 百度地图,加载不出来,查了下发现跟 js/transport.js 与 js/utils.js 两个文件有关在需要插入地图的地方去掉这两个文件的引用 地 ...