什么是弹性布局?
用户的文字大小与弹性布局
用户的浏览器默认渲染的文字大小是“16px”,换句话说,Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px”。当然,如果用户愿意他可以改变这种字体大小的设置,用户可以通过UI控件来改变浏览器默认的字体大小。
弹性设计有一个关键地方Web页面中所有元素都使用“em”单位值。“em”是一个相对的大小,我们可以这样来设置1em,0.5em,1.5em等,而且“em”还可以指定到小数点后三位,比如“1.365em”。而其中“相对”的意思是:
1.相对的计算必然会一个参考物,那么这里相对所指的是相对于元素父元素的font-size。比如说:如果在一个
| <div id="container"> …</div> 로그인 후 복사 |
| html { font-size: 100%; } body { font-size: 1em; } #container { width: 60em; } 로그인 후 복사 |
| <div id="wrap"> content here</div> 로그인 후 복사 |
| html {font-size: 100%;} body {font-size: 1em;} #wrap { width: 46.25em;/*740px ÷ 16 = 46.25em */ margin: 1.5em auto;/*24px ÷ 16 = 1.5em*/ border: 0.0625em solid #ccc;/*1px ÷ 16 = 0.0625em*/ } 로그인 후 복사 |
:
| <div id="wrap"> <h1>...</h1> <p>...</p> </div> 로그인 후 복사 |
| p{ font-size: 0.75em;/*0.625em × 12 = 0.750em */ line-height: 1.5em;/*18px(line-height) ÷ 12(font-size) = 1.5em */ margin: 1.5em;/*18px(margin) ÷ 12(font-size) = 1.5em */ } 로그인 후 복사 |
| h1 { font-size: 1.125em;/*0.625em × 18 = 1.125em*/ } 로그인 후 복사 |
| h1 { font-size: 1.125em; /*0.625em × 18 = 1.125em*/ line-height: 1em; /*18px(line-height) ÷ 18px(font-size) = 1em */ margin: 1em; /*18px(margin) ÷ 18px(font-size) = 1em */ } 로그인 후 복사 |
| <div id="wrap"> <h1>....</h1> <p><img src="90.png" alt=""> Lorem...</p> </div> 로그인 후 복사 |
| p img { width: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(图片的宽度) = 7.5em */ height: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(图片的高度) = 7.5em */ } 로그인 후 복사 |
| p img { width: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(图片的宽度) = 7.5em */ height: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(图片的高度) = 7.5em */ margin: 0 1.5em 1.5em 0; float: left; } 로그인 후 복사 |
| <div id="wrapper">test</div> 로그인 후 복사 |
| #wrapper { width: 200px; height: 100px; border: 5px solid red; margin: 15px; padding: 10px; line-height: 18px; } 로그인 후 복사 |
| #wrapper { width: 12.5em;/*1 ÷ 16 × 200 = 12.5em值*/ height: 6.25em;/*1 ÷ 16 × 100 = 6.25em值*/ border: 0.3125em solid red;/*1 ÷ 16 × 5 = 0.3125em值*/ margin: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em值*/ padding: 0.625em;/*1 ÷ 16 × 10 = 0.625em值*/ line-height: 1.125em;/*1 ÷ 16 × 18 = 1.125em值*/ } 로그인 후 복사 |
| #wrapper { font-size: 0.875em;/*1 ÷ 16 × 14= 0.875em值*/ width: 12.5em;/*1 ÷ 16 × 200 = 12.5em值*/ height: 6.25em;/*1 ÷ 16 × 100 = 6.25em值*/ border: 0.3125em solid red;/*1 ÷ 16 × 5 = 0.3125em值*/ margin: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em值*/ padding: 0.625em;/*1 ÷ 16 × 10 = 0.625em值*/ line-height: 1.125em;/*1 ÷ 16 × 18 = 1.125em值*/ } 로그인 후 복사 |
| #wrapper { font-size: 0.875em;/*1 ÷ 16 × 14= 0.875em值*/ width: 14.2857em;/*1 ÷ 14 × 200 = 14.2857em值*/ height: 7.1429em;/*1 ÷ 14 × 100 = 7.1429em值*/ border: 0.357em solid red;/*1 ÷ 14 × 5 = 0.357em值*/ margin: 1.071em;/*1 ÷ 14 × 15 = 1.071em值*/ padding: 0.714em;/*1 ÷ 14 × 10 = 0.714em值*/ line-height: 1.2857em;/*1 ÷ 14 × 18 = 1.2857em值*/ } 로그인 후 복사 |
这样说,不知道大家理解了整明白了没有,如果没有整明白,可以回过头来看上面的一个实例。