CSS+DIV布局

来源：互联网发布：淘宝客链接转换api 编辑：程序博客网时间：2024/05/29 16:24

好处:

1.容易被搜索引擎搜索到。

2.页面简捷，便于查看。

3.容易控制。

基本的框架：

<html>

<head>

.....

</head>

<html>

布局常识:

不同浏览器间的区别

显示器的区别，一般会在左右留下空白的地方。

一般定义宽度为900-1024，即显示器的分辨率来定义宽度，这样就不会出现水平滚动条。

应该有完整的思路来定义布局。

body体默认有外边距。

margin:外边距

padding：内边距

在一个div中如果放置了，多个div的话，通常不用指定这个div的高度，内部的div会自动撑开。

clear: 清除浮动区块，即不挨着任何浮动块。

DIV居中：

margin-left: auto;

margin-right:auto;//左右都自动摆，就会居中。(IE不会)

解决:在body体里的都居中:text-align:center; 但是这样，div里的内空都居中了，只要在div里再定义: text-align:left;即可。

选择器:

# id选择器

. 类选择器

DIV标签是块标签，块标签会自动换行。

DIV之间的间隙

通过div来分隔，通过调整div的宽度和高来分隔(IE指定的最小的高度是18像素，解决办法：将div的overflow：hidden;)。

关联选择器

#id #anothers

关联优先级是最高的

清除浮动区块

即脱离文档流:float:left; clear:both;

div中 class与id同时使用

　<div id="aa"class="bb">test</div>
　　#aa{ width:300px; height:50px;background-color:Red;}
　　.bb{ width:100px; height:300px; background-color:blue;}

不可以同时使用。

#aa .bb{xxx}

不同浏览器之间的区别:

IE和FF居中不一样的问题，

IE指定的DIV最小的高度是18像素，即小于18个像素的都按18个像素，即当小于18个像的时候都要隐藏：overflow:hidden;

IE会自动调整高度，FF不会，指定多高就是多高。(解决方法：把包含它的DIV不指定高度就可以了

H1不一样

IE和FF的列表ul显示不一样。

border IE=内容+边框 FF=边框另算(解决方法: 写两个宽度

width : 150px !important; //FF识别这个，IE不识别，所以IE取后面的高度。 //注意计算高度时，一定要border使用的是否border、还是border-left等。把数据算清楚。

width : 155px ;

)

注意分辨率的差异！！！

至少要支持1024的。最好是用绝对的宽度，那样不管在什么分辩率下都不会变形。

IE和FF的收藏网站的实现方法也不一致。。。

通过css将多个图标或图片用同一张图片通过定位背景位置调用到页面