• CSS中强悍的相对单位之em(em-and-elastic-layouts)学习小记


    使用相对单位em注意点

    1.浏览器默认字体是16px,即1em = 16px,根元素设置如下

    html{
        font-size: 100%; /* WinIE text resize correction */
    } 	
    body{
        font-size: 1em;
    }
    

     2、如果元素自身没有设置字体大小,那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值,我们都可以按下面的公式来计算

       1 ÷ 父元素的font-size × 需要转换的像素值 = em值

    3、这一种千万要慢慢理解,不然很容易与第二点混了。如果元素设置了字体大小,那么字体大小的转换依旧按第二条公式计算,也就是下面的:

    元素自身的font-size/继承父元素字体大小  = em值  (字体大小计算)

       1 ÷ 父元素的font-size × 需要转换的像素值 = em值

    那么元素设置了字体大小,此元素的其他属性,如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算:

       1 ÷ 元素自身的font-size × 需要转换的像素值 = em值

    请点击,综合以上构建一个740px像素的弹性布局样例 

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Elastic Layout Example — Jon Tan 陳</title>
    	<style type="text/css" media="screen">
    	
    		/* 
    		CSS from the article at: http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css
    		License: Attribution-Share Alike 2.0 UK: England & Wales
    		http://creativecommons.org/licenses/by-sa/2.0/uk/
    		N.B. CSS is included here for easy reference only. Always separate content and presentation by using separate CSS files, rather than inserting it in the document head.
    		*/
    		html{
    		  font-size: 100%; /* WinIE text resize correction */
    		} 
    		
    		body{
    			font-size: 1em;
    			font-family: georgia, serif;
    			text-align: center;
    			color: #444;
    			background: #e6e6e6;
    			padding: 0;
    			margin: 0;
    		}
    		
    		#wrap{
    			 46.25em;
    			margin: 1.5em auto;
    			background: #fff;
    			border: 0.063em solid #ccc;
    			text-align: left;
    		}
    		
    		h1{
    			font-size: 1.125em;
    			line-height: 1em;
    			margin: 1em;
    			font-weight: 300;
    		}
    		
    		p{
    			font-size: 0.750em;
    			line-height: 1.5em;
    			margin: 1.5em;
    		}
    		
    		p img{
    			7.5em;
    			height:7.5em;
    			margin:0 1.5em 1.5em 0;
    			float:left;
    		}
    	</style>
    </head>
    <body>
    	<div id="wrap">
    		<h1>Elastic Layout Example—View Source for the HTML and CSS</h1>
    		<p><img src="90-elastic-img.jpg" alt="Clevedon Pier"> Example from the article “<a href="http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css">The Incredible Em & Elastic Layouts with CSS</a>”. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    	</div>
    </body>
    </html>

    【资料参考】

             转大漠  http://www.w3cplus.com/css/px-to-em

             http://v1.jontangerine.com/silo/css/elastic-layout/

             http://v1.jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css  英文源文

  • 相关阅读:
    IPAD3终于发布了!苹果在5年内还是很难被超越!
    今天更新了ubuntu11.10!
    折腾两日系统重装,对比ubuntu11.04 和windows 7旗舰版!(不定时更新添加新的体验)
    DELL XPS M1530安装MAC OS X Lion 10.7.3经验分享!
    ubuntu 11.04 指纹识别的安装!
    Dlink DIR615L 和水星(mercury) MW300R桥接方法!
    POJ 3522 Slim Span(kruskal 变型)
    POJ 3621 Sightseeing Cows(SPFA + 构造负环)
    POJ 2553 The Bottom of a Graph(Tarjan)
    POJ 2728 Desert King(最优比率生成树)
  • 原文地址:https://www.cnblogs.com/zjf-1992/p/6211419.html
Copyright © 2020-2023  润新知