CSS布局自适应高度解决方法

合集下载

CSS实现行内和上下自适应的几种方法

CSS实现⾏内和上下⾃适应的⼏种⽅法在写⼀个移动端⽹页，发现⽹页的头部搜索框两边各有固定宽度的按钮，搜索框可以根据宽度的变化来改变⾃⼰的宽度，达到填充的⽬的，也就是⼀种⾃适应吧，下⾯写写⾃⼰尝试的⼏种⽅法⼀利⽤css3 的width：calc（100% - npx）；<body><div style="border: 1px solid black;width: 100%;height: 100px"><div class="div1" style="float: left;height: 50px;width: 100px;background: red"></div><div class="div2" style="float: left;height: 50px;width:calc(100% - 120px);background: yellow"></div></div></body>注意 width:calc(100% - 120px); 两边都有空格，不要问我为什么会知道。

⼆利⽤display:table和display:table-cell；<body><div class="box" style="border: 1px solid black;width: 100%;height: 100px;display: table"><li class="left" style="background: red;display: block;width: 100px;height: 100px;"></li><li class="right" style="background: deepskyblue;display: table-cell;width: 100%"></li></div></body>display:table 这个属性很少⽤，display:table-cell可以⾃适应宽度，这点倒是挺好的。

CSS实现三栏布局（左边固定、右边固定、中间自适应）的五种方式

CSS实现三栏布局（左边固定、右边固定、中间⾃适应）的五种⽅式⼀、float布局代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>float布局</title><style>* {margin: 0;padding: 0;}.left {float: left;width: 200px;height: 300px;background-color: aqua;}.right {float: right;width: 200px;height: 200px;background-color: blueviolet;}.main {height: 200px;background-color: chocolate;}</style></head><body><div class="left"></div><div class="right"></div><div class="main">⽂字⽂字⽂字⽂字</div></body></html>经过测试发现当中间区域⾼度⼩于左右区域任⼀⾼度时效果是正常的，但当⾼度⼤于左右两边⾼度时就会出现如下情况，如下图：这种情况要怎么解决呢？有两种⽅法可以解决：（1）在中间区域设置margin-left和margin-right，本⽰例中只要设置左右间距为200px就可以完美解决（2）在中间区域设置overflow: hidden（原因是：overflow: hidden可以触发bfc（bfc：块级格式化上下⽂），渲染规则：bfc⾥计算⾼度时，浮动的元素也参与计算）这⾥特别提醒由于我们使⽤了float, 所以为了不影响其他元素的显⽰这⾥需要清除浮动,清除浮动的⽅式有很多⼤家可以⾃⾏搜索使⽤我这⾥使⽤伪元素的⽅式.main::after{content:'';display: block;clear: both;}⼆、Position布局:代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>position布局</title><style>* {margin: 0;padding: 0;}.left {position: absolute;left: 0;top: 0;width: 200px;height: 300px;background-color: aqua;}.main {position: absolute;left: 200px;top: 0;right: 200px;height: 500px;background-color: chocolate;overflow: hidden;}.right {position: absolute;right: 0;top: 0;width: 200px;height: 200px;background-color: blueviolet;}</style></head><body><div class="left"></div><div class="main">⽂字⽂字⽂字⽂字</div><div class="right"></div></body></html>三、table布局:table是⼀种常见的布局⽅式,他可以将整个页⾯按照表格的⽅式设置为多⾏多列,但是由于书写table标签⽐较⿇烦尤其是涉及到table内嵌table的时候，所以CSS给我们提供了display: table的⽅式可以让让们⽅便的使⽤table布局, 设置⼦元素为列的属性为display:table-celldisplay:table相当于<table>，display:table-cell，就相当于<th><td>代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>table布局</title><style>* {margin: 0;padding: 0;}.main {width: 100%;display: table;}.left,.center,.right {display: table-cell;}.left {width: 200px;height: 300px;background-color: aqua;}.center {background-color: chocolate;}.right {width: 200px;height: 200px;background-color: blueviolet;}</style></head><body><div class="main"><div class="left"></div><div class="center">⽂字⽂字⽂字⽂字</div><div class="right"></div></div></body></html>四、弹性(flex)布局:flex布局是W3C提出了⼀种新的⽅案，可以简便、完整、响应式地实现各种页⾯布局。

从零开始学习前端开发—7、CSS宽高自适应

从零开始学习前端开发—7、CSS宽高自适应一、宽度自适应语法：width:100%;注： a）块状元素的默认宽度为100%b) 当给元素设置宽度为100%时，继承父元素的宽度c) 通常使用宽度自适应实现通栏效果二、高度自适应语法：height:auto;（等同于不给元素设置高度）三、最小高度，最大高度，最小宽度，最大宽度1.最小高度语法： min-height:数值单位;注：IE6不识别min-height属性，解决方案如下：方案一： min-height:100px; _height:100px;方案二：min-height:100px; height:auto!important; height:100px;2.最大高度语法： max-height:数值单位;3.最小宽度语法：min-width:数值单位;注：当给块元素设置min-width属性时，需要将块元素转换为display:inline-block;4.最大宽度语法：max-width:数值单位;注：以上四个属性在IE6及以下版本浏览器中不识别四、高度塌陷问题（常见的几种清除浮动的方法）描述：当父元素高度自适应，子元素设置了float，导致父元素高度为0，称为高度塌陷问题解决方案如下：1.方案一给父元素一个固定的高度缺点：不能实现高度自适应，不够灵活（不推荐使用）2.方案二给父元素设置overflow:hidden;优点：简单，父元素可以高度自适应缺点：当子元素有定位属性时，由于父元素设置了overflow:hidden;父元素容器之外的部分会被隐藏3.方案三在子元素的末尾添加一个空div，并设置样式：.clear{clear:both;height:0; overflow:hidden;}注：a）此div只为解决高度塌陷问题，不需要在浏览器中显示，所以设置height:0;b）IE6不能识别小于10px的容器，所以要加overflow:hidden;来兼容IE6优点：所有浏览器都支持缺点：在网页中添加无意义的一个div,会造成代码冗余4.方案四通过伪元素的方式解决高度塌陷问题(万能清除浮动法)父元素:after{content:".";display:block;height:0;overflow:hidden;clear:both;visibility:hidden;}注：伪元素的语法选择器:before{content:"";} 在子元素之前去添加一个伪元素选择器:after{content:"";} 在子元素之后去添加一个伪元素伪元素是内联元素五、元素隐藏不可见的两种方式（display:none;和visibility:hidden的区别）1.display:none;元素被隐藏，空间不保留；（看不见，摸不着）2.visibility:hidden;元素被隐藏，空间保留；（看不见，摸得着）注：display:none;和overflow:hidden;的区别display:none让元素完全隐藏不显示，overflow:hidden;是让元素溢出部分隐藏不可见，没有溢出部分正常显示六、窗口高度自适应首先，要设置窗口的高度自适应html,body{height:100%;}然后，给元素设置div{height:100%;}注：窗口高度自适应适用于屏幕窗口没有内容body为0或内容不满一屏的情况下使用七、内联元素水平居中设置如果被设置水平居中的元素是文本，图片等内联元素时，通过给父元素设置text-align:center;实现八、定宽块状元素水平居中设置满足定宽，块状元素两个条件的元素，将左右margin设置为auto即可实现元素在水平方向上居中显示注：a）当给元素设置了float后，左右为auto将会失效b) 当给元素设置了absolute和fixed后，左右auto将会失效九、不定宽块状元素水平居中设置1.给父元素设置以下样式a）给父元素设置display:table; 将元素转换为表格形式b) 给父元素设置左右margin为auto2.给父元素设置：text-align:center;给子元素设置: display:inline-block;十、元素在屏幕窗口水平垂直都居中1.定宽高元素在屏幕窗口水平垂直都居中元素{width:value;height:value;position:fixed;left:50%;top:50%;margin-left:-width/2 "px";margin-top:-height/2 "px";}2.不定宽高元素在屏幕窗口水平垂直都居中元素{position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}十一、不定宽高子元素在父元素中水平垂直都居中1.方案一（高度须给定，否则垂直居中高度拉伸充满父元素）父元素{position:relative;}子元素{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;}2.方案二父元素{display:table-cell;text-align:center;vertical-align:middle;}注：display:table-cell;将元素转换为表格单元格形式3.子元素转换成行内块状元素宽高自适应，子元素同级设置高度充满父元素的参照物且行内块状元素。

cssdisplaytable自适应高度、宽度问题的解决

cssdisplaytable⾃适应⾼度、宽度问题的解决定义和⽤法display 属性规定元素应该⽣成的框的类型。

说明这个属性⽤于定义建⽴布局时元素⽣成的显⽰框类型。

对于 HTML 等⽂档类型，如果使⽤ display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显⽰层次结构。

对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

可能的值值描述none此元素不会被显⽰。

block此元素将显⽰为块级元素，此元素前后会带有换⾏符。

inline默认。

此元素会被显⽰为内联元素，元素前后没有换⾏符。

inline-block⾏内块元素。

（CSS2.1 新增的值）list-item此元素会作为列表显⽰。

run-in此元素会根据上下⽂作为块级元素或内联元素显⽰。

compact CSS 中有值 compact，不过由于缺乏⼴泛⽀持，已经从 CSS2.1 中删除。

marker CSS 中有值 marker，不过由于缺乏⼴泛⽀持，已经从 CSS2.1 中删除。

table此元素会作为块级表格来显⽰类似 table，表格前后带有换⾏符。

inline-table此元素会作为内联表格来显⽰类似 table，表格前后没有换⾏符。

table-row-group此元素会作为⼀个或多个⾏的分组来显⽰类似 tbody。

table-header-group此元素会作为⼀个或多个⾏的分组来显⽰类似 thead。

table-footer-group此元素会作为⼀个或多个⾏的分组来显⽰类似 tfoot。

table-row此元素会作为⼀个表格⾏显⽰类似 tr。

table-column-group此元素会作为⼀个或多个列的分组来显⽰类似 colgroup。

table-column此元素会作为⼀个单元格列显⽰类似 coltable-cell此元素会作为⼀个表格单元格显⽰类似 td 和 thtable-caption此元素会作为⼀个表格标题显⽰类似 captioninherit规定应该从⽗元素继承 display 属性的值。

iframe高度自适应的6个方法

iframe高度自适应的6个方法总所周知，IFrame的高度很容易被改变，以便满足其所需的文档大小。

在默认情况下，某些浏览器会在IFrame中自动设置高度，以适应内容的大小。

但是，一旦IFrame的内容发生变化，它的高度还是不会随着变化。

为了解决这个问题，我们可以使用以下6种不同的方法来让IFrame自动调整自身的高度：（1）使用CSSCSS是最简单有效的方法，可以用来让IFrame高度自动调整。

我们可以使用CSS的“height: auto !important”属性，只需给IFrame 添加一个包含此CSS规则的样式，就可以让IFrame在文档大小发生变化时随之调整自身的高度。

（2）使用JavaScript与CSS不同，JavaScript可以精确地获取iframe的内容，并将其高度设置为文档的高度。

只需使用JavaScript的offsetHeight属性，就可以计算出文档的高度，并将其设置为IFrame的高度。

（3）使用jQueryjQuery也是一种强大的JavaScript库，可以用来设置IFrame 的自动高度。

只需使用jQuery的resize()方法，然后使用height()和width()方法获取文档的高度和宽度，再将其分别设置为IFrame 的高度和宽度，就可以轻松地使IFrame自动调整自身的高度。

（4）使用AngularJSAngularJS是一种前端开发框架，可以用来让IFrame的高度自动调整。

在AngularJS中，我们可以使用ng-style指令来定义IFrame 的高度，并使用“height: auto !important”属性，以便在文档大小发生变化时自动调整IFrame的高度。

（5）使用ReactReact也是一种前端开发框架，可以用来让IFrame的高度自动调整。

只需使用React的onResize()方法，获取IFrame实例，然后使用getBoundingClientRect()方法获取其当前的高度，再将其设置为IFrame的高度，就可以让IFrame自动调整自身的高度。

CSS中的布局自适应技巧

CSS中的布局自适应技巧在CSS中，布局自适应技巧是实现网页响应式设计非常重要的一部分。

通过灵活运用CSS属性和技巧，可以使网页在不同设备上具有良好的展示效果，让用户能够在各种屏幕尺寸下获得更好的浏览体验。

本文将介绍一些常用的CSS布局自适应技巧。

1. 弹性盒子布局弹性盒子布局（Flexbox）是CSS3中新增的一种布局模式。

通过设置弹性容器的属性，可以实现弹性盒子中各个项目的自适应排列。

弹性盒子通过设置主轴和侧轴的方向，可以实现不同排列方式，如水平排列、垂直排列或者混合排列。

通过设置项目的属性，可以实现弹性伸缩、对齐和排序等效果。

2. 栅格布局栅格布局是一种将网页内容划分为多列的布局方式。

通过将页面划分为等宽的列，可以实现页面的自适应布局。

栅格布局常用于响应式设计，可以根据设备屏幕尺寸改变列的数量。

可以使用CSS框架如Bootstrap等提供的栅格系统，也可以自定义栅格布局。

3. 媒体查询媒体查询是CSS中一种用于根据设备特性调整样式的方法。

通过使用@media规则，可以根据不同的媒体类型和特性，为不同的设备提供不同的样式。

媒体查询可以根据设备的宽度、高度、像素密度、触摸能力等特性来选择不同的样式表或样式规则。

4. vw和vh单位vw和vh是CSS3中引入的相对长度单位，代表视口宽度和视口高度的百分比。

通过使用vw和vh单位，可以根据设备的宽度和高度来设置元素的尺寸，实现自适应效果。

例如，可以使用vw单位设置文字大小、图片宽度等，使其根据设备屏幕尺寸进行适配。

5. flex和grid布局flex和grid是CSS中强大的布局模式，可以实现复杂的自适应布局效果。

flex布局通过设置容器和项目的属性，可以实现灵活的自适应布局，可以自动调整项目的位置和尺寸。

grid布局则将网页布局分割为网格，通过设置网格的属性，可以实现自由的排列和对齐效果。

总结CSS中的布局自适应技巧有很多种，以上只是其中的一部分。

纯Css实现Div高度根据自适应宽度（百分比）调整

纯Css实现Div⾼度根据⾃适应宽度（百分⽐）调整在如今响应式布局的要求下，很多能⾃动调整尺⼨的元素能够做到⾼宽⾃适应，如img，通过{width:50%;height:auto;}实现图⽚⾼度跟随宽度⽐例调整。

然⽽，⽤的最多的标签⼀哥Div却不能做到⾃动调整（要么从⽗级继承，要么⾃⾏指定px，要么给百分⽐！但是这个百分⽐是根据⽗级的⾼度来计算的，根本不是根据元素⾃⾝的宽度，那么就做不到Div的宽⾼达成⼀定的⽐例=-=）。

要实现这种功能（div的⾼度：宽度=1:1），通过各种加Buff，得知有以下⼏种处理⽅式1，直接指定div的宽⾼+zoom来实现⾃适应div{width:50px;heigth:50px;zoom:1.1;}这样能达到初步的等宽⾼div，但是局限性太⼤，PASS！2，通过js动态判断div的宽度来设置⾼度div{width:50%;}window.onresize = function(){div.height(div.width);}也能实现等宽⾼div，但是总觉得有点别扭，PASS！3，通过宽⾼单位来设置div{width:20vw;height:20vw;/*20vw为viewport width的20%*/}但是很多设备不⽀持这个属性，兼容性太差，PASS！4，通过float来设置#aa{background:#aaa;;}#bb{background:#ddd;;float:left}#cc{background:#eee;;float:right}<div id="aa">⽗div <div id="bb">⼦div</div> <div id="cc">⼦div</div> <div style="clear:both">就是这个⽤于clear错误的</div></div>能够让⽗级元素aa根据⼦元素的⾼度⾃动改变⾼度（在⼦元素⾥放置⾃适应元素）来调整⾼宽⽐⼀致，然⽽太⿇烦，PASS！5，终于到最终⼤杀器了，通过padding来实现此功能通过以上⼏个⽅案的实验，发现宽度的⾃适应是根据viewport的width来调整的，⽐如{width：50%}就是浏览器可视区域的50%，resize之后也会⾃动调整。

5种常用Div高度自适应的方法[精彩]

1.背景图填充这是使用最广泛的一种做法，无hacks，推荐使用：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Equal height(列高度相同的方法)</title><style type="text/css">body{padding: 0;margin: 0;font-size: 12px;font-family: Arial, Helvetica, sans-serif;line-height: 140%;background:#E7DFD3;}#middle{width: 580px;float:left;background:#FFFFFF;text-align:left;}#header,#footer{background: #E8E8E8;width: 750px;text-align:center;}#sideleft{width: 580px;float: left;position:relative;margin-left:-580px;}#sideright{width: 170px;float: right;position:relative;margin: 0 -170px 0 0;background: #F0F0F0;}#footer{clear:both;}h1,h2,address,p{margin: 0;padding: .8em;}h1,h2{font-size: 20px;}</style><script type="text/javascript">// <![CDA TA[function toggleContent(name,n) {var i,t='',el = document.getElementById(name);if (!el.origCont) el.origCont = el.innerHTML;for (i=0;i<n;i++) t += el.origCont;el.innerHTML = t;}// ]]></script></head><body><div id="header"><h1>Head</h1><div id="middle"><div id="sideright"><div id="sideleft"><h2>sideleft</h2><p>默认长度加长页面</p><p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

CSS布局自适应高度解决方法确实让人很头疼，先看例子：这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。

先看代码：#wrap{overflow: hidden;}#sideleft, #sideright{padding-bottom: 32767px;margin-bottom: -32767px;}实现原理：块元素必须包含在一个容器里。

应用overflow: hidden 到容器里的元素。

应用padding-bottom（足够大的值）到列的块元素。

应用margin-bottom（足够大的值）到列的块元素。

padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。

兼容各浏览器IE Mac 5得到高度正确，所以要过滤掉上面的代码。

/*\*/#sideleft, #sideright{padding-bottom: 32767px;margin-bottom: -32767px;}/**/Opera1. Opera7.0-7.2不能正确清除溢出部分，所以要加：/* easy clearing */#wrap:after{content: '[DO NOT LEAVE IT IS NOT REAL]';display: block;height: 0;clear: both;visibility: hidden;}#wrap{display: inline-block;}/*\*/#wrap{display: block;}/* end easy clearing *//*\*/2. Opera8处理overflow: hidden有个BUG,还得加上以下代码：/*\*/#sideleft, #sideright{padding-bottom: 32767px !important;margin-bottom: -32767px !important;}@media all and (min-width: 0px) {#sideleft, #sideright{padding-bottom: 0 !important;margin-bottom: 0 !important;}#sideleft:before, #sideright:before{content: '[DO NOT LEAVE IT IS NOT REAL]';display: block;background: inherit;padding-top: 32767px !important;margin-bottom: -32767px !important;height: 0;}}/**/3.Opera9的B2在修正8的bug.测试环境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2通过。

最终效果:代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Equal height(DIV+CSS布局中自适应高度的解决方法)</title><style type="text/css">body{padding: 0;margin: 0;font-size: 12px;font-family: Arial, Helvetica, sans-serif;line-height: 140%;text-align: center;background:#E7DFD3;}#wrap{width: 750px;margin: 0 auto;overflow: hidden;}#header{background: #E8E8E8;}#sideleft{width: 580px;float: left;background: #FFF;text-align: left;}#sideright{width: 170px;float: left;background: #F0F0F0;text-align: left;}/* easy clearing */#wrap:after{content: '[DO NOT LEAVE IT IS NOT REAL]';display: block;height: 0;clear: both;visibility: hidden;}#wrap{display: inline-block;}/*\*/#wrap{display: block;}/* end easy clearing *//*\*/#sideleft, #sideright{padding-bottom: 32767px !important;margin-bottom: -32767px !important;}@media all and (min-width: 0px) {#sideleft, #sideright{padding-bottom: 0 !important;margin-bottom: 0 !important;}#sideleft:before, #sideright:before{content: '[DO NOT LEAVE IT IS NOT REAL]';display: block;background: inherit;padding-top: 32767px !important;margin-bottom: -32767px !important;height: 0;}}/**/#footer{background: #E8E8E8;width: 100%;float: left;}h1,h2,address,p{margin: 0;padding: .8em;}h1,h2{font-size: 20px;}</style></head><body><div id="wrap"><div id="header"><h1>Head</h1></div><div id="sideleft"><h2>sideleft</h2><p>北京羿腾久久网络科技有限公司是互联网行业逐步成长起来的一颗新星，以给用户提供更加真实的网络3D虚拟环境为主要发展方向，致力于web3D技术的研究和应用开发。

</p><p>羿腾公司的雏形是河南大学大学生校园工作室，于2009年始在河南大学计算机科学与信息工程系成立，作为一群有共同爱好的青年，聚到一起，在老师的指导下，开始了图像处理方面的技术实践，在校期间，先后完成了卫星大图片压缩显示和3D数字地球的模拟建设实践；应用软件方面，有一系列拥有自主知识产权的自动、半自动消费办公系统投入市场使用；网络建设方面，先后完成了河南大学实训平台、开封市绿森林家具公司、北京市坤盛腾达建筑工程有限公司、北京格林摩尔数字农业国际生态园区的宣传性网站建设等30多个中大型宣传性网站项目。

</p><p>作为年轻一代的创业者，站在时代的新高度，羿腾公司致力于web3D技术的研究应用，目标是做中国最具影响力的web3D应用技术提供商，努力把最好的用户体验展现给用户，搭起企业与客户之间更真实的沟通环境。

</p><p>在当下竞争激烈的互联网行业，为适应当前发展，羿腾公司在兼顾核心技术研发的同时，专门投入资金和人力资源将目前市场混乱的网站建设和网站SEO优化、网络推广策略等一系列相关技术融为一体的创新性举措，为企业或者个人在各种应用方面的需求宣传提供了强有力的技术支持。

</p><p>“不求最好的，只做更好的！”是我们羿腾公司不懈的追求目标，我们在前进的道路上会把最好的服务提供给您，在3D科技带给您全新体验的同时，我们会更加的努力，希望3D互联技术展现在您面前的是一个平坦的世界，让虚拟世界变的更直观，让您获取信息更方便。

</p><p>公司主营业务：web3D-虚拟现实，企业宣传性网站建设，SEO优化，网络推广，计算机应用软件开发。

</p><p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。

可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。

</p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。

任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。

</p></div><div id="sideright"><h2>sideright</h2><p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。

但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。

</p><p> 像素是计算机屏幕上的不可缩放的点，而一个h3 就是一个字大小的方块。

由于字体大小的变化， h3代表用户喜欢的文字大小的相对单位。

</p><p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。

可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。

</p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。