自适应(弹性)宽度CSS版式布局 和 固定宽度CSS版式布局有什么区别?

html-css017

自适应(弹性)宽度CSS版式布局 和 固定宽度CSS版式布局有什么区别?,第1张

自适应一般用百分比或em来做宽度单位，开发难度比固定宽度大。比如有个导航条，用固定宽度宽1200px，那么你去手机上看，由于屏幕宽度不够，有两个选择：

出现横向滚动条，要浏览者左右滑动

整个页面缩放到宽度和手机分辨率一样，那么，文字、链接什么的也缩小到了阅读点击困难的尺寸，需要不停放大页面和缩小页面来观看

然后用自适应来做这个导航条，总宽度设为100%，里面有5个按钮，每个宽度设为20%，它就会根据屏幕尺寸缩放，再用css媒体查询去判断，当宽度太小时，5个按钮就不再横着一排，而变成竖着排列，或再复杂点加上js，让整个导航栏变成一个菜单按钮，按了再弹出5个链接按钮。

那么，导航栏可以这样控制，页面其他内容也可以这样控制，于是你同一个页面在电脑、平板、手机上看，都可以有不同的版式来适合当前设备。

你可以百度下css媒体查询、自适应布局方面的教程看看，另外：记住百分比是用在宽度上，高度上你还是忘了百分比吧。

float:left,这个是让标签浮动对齐的，你后面两个没效果是写法有错误，#pic2,这里缺少一个空格，应该这样写

#pic2, #pic3{}，多个CSS写在一行，每一个逗号后面要加一个空

FF对盒模型的解释也不一样，代码说明：#test { width: 650px !importantwidth: 648pxpadding-left:2pxbackground:#fff}

test 显示的宽带是 650px

IE Box的总宽度是： width+padding+border+margin宽度总和

FF Box的总宽度就是 width的宽度，padding+border+margin的宽度在含在width内。

如果有BOX{WIDTH:"300"PADDING:"5PX"

则BOX在IE的宽度应该为:310

而在FF的宽度则是300

所以在BOX有填充的情况下应该这样使用

BOX{WIDTH:"290"!IMPORTANTWIDTH: "300"}

这样子才能确保BOX的宽度始终在300px,而不会出现被撑开的现象，

而在FF里面则不会造成浮动层填不满的情况

ul 标签在 Mozilla 中有 padding 值的，而在 IE 中只有 margin 有值。

设置ul{margin:0padding:0}

针对firefox ie6 ie7的css样式

现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。

现在写一个CSS可以这样：

#1 { color: #333} /* Moz */

* html #1 { color: #666} /* IE6 */

*+html #1 { color: #999} /* IE7 */

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999

可以用”+”来实现只有IE识别的CSS Hack

可能有朋友想到用”_” Hack，但它们是由区别的，因为IE7中是不识别“_”的。所以用+

测试结果：

IE5.5，IE6 ，IE7浏览器都能识别；

FF2.0，Opera 9，Safari 2浏览器不识别