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

最新推荐文章于 2021-06-10 02:11:21 发布

weixin_34200628

最新推荐文章于 2021-06-10 02:11:21 发布

阅读量452

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/muyun/p/3558384.html

版权

有这么一个题目：

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

View Code

看完，不禁对 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

转载于:https://www.cnblogs.com/muyun/p/3558384.html

weixin_34200628

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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/...
复制链接

扫一扫