XHTML4.0＋CSS2.0布局知识点普及-7

在上次的分享中，我跟大家讲解了1个浮动布局实例和IE6双倍边距的问题，那么本次分享我将继续接着上次的布局基础讲起。本人觉得只有具备扎实的布局功底，我们才能利用后续的Javascript做出更有趣更丰富更好玩的效果，那么闲话不用多说，直接来吧！

一、初步认识overflow属性，直接上代码，如下：

初步认识overflow属性1

* {

margin: 0;

padding: 0;

border: 0;

list-style: none;

}

.clearfix:before,

.clearfix:after {

display: table;

content: '';

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

}

.fl {

float: left;

}

.fr {

float: right;

}

.box{

width:300px;

height:300px;

border:1pxsolid#000;

font-size:12px;

line-height:30px;

overflow:hidden;

}

h3{

width:100px;

height:30px;

background-color:red;

}

haslayout 是Windows Internet Explorer渲染引擎的一个内部

组成部分。在InternetExplorer中，一个元素要么自己对自身的内容

进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了

调节这两个不同的概念，渲染引擎采用了hasLayout的属性，属性值

可以为true或false。当一个元素的hasLayout属性值为true时，我们

说这个元素有一个布局(layout)要想更好的理解css，尤其是IE下对css

的渲染，haslayout是一个非常有必要彻底弄清楚的概念。大多IE下的显

示错误，就是源于 haslayout。如果它设置成了true，它就不得不去

渲染它自己，因此元素不得不扩展去包含它的流出的内容。例如浮动或者

很长很长的没有截断的单词，如果haslayout没有被设置成true，那么

元素得依靠某个祖先元素来渲染它。这就是很多的ie bugs诞生的地方。

标题

从以上的代码我们可以得知，overflow顾名思义叫做溢出的意思，其中有三个常用的属性值，下面逐一为大家介绍，如下：

1.overflow: auto; 表示溢出显示滚动条。

2.overflow: scroll; 表示默认就显示滚动条。

3.overflow: hidden; 表示溢出隐藏滚动条。

---------------华丽的分割线---------------

二、进一步了解overflow属性的用法，直接上代码，如下：

进一步了解overflow属性的用法

* {

margin: 0;

padding: 0;

border: 0;

list-style: none;

}

.clearfix:before,

.clearfix:after {

display: table;

content: '';

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

}

.fl {

float; left;

}

.fr {

float: right;

}

.box{

width:300px;

height:300px;

border:1pxsolid#000;

overflow:auto;

}

.div1{

width:260px;

height:400px;

background-color:red;

float:left;

}

从以上的代码我们可以得知，overflow顾名思义叫做溢出的意思，其中有三个常用的属性值，下面逐一为大家介绍，如下：

1.overflow: auto; 表示溢出显示滚动条。

2.overflow: scroll; 表示默认就显示滚动条。

3.overflow: hidden; 表示溢出隐藏滚动条。

---------------华丽的分割线---------------

三、IE6、IE7下的浮动小问题注意事项，直接上代码，如下：

IE6、IE7下的浮动小问题注意事项

* {

margin: 0;

padding: 0;

border: 0;

list-style: none;

}

.clearfix:before,

.clearfix:after {

display: table;

content: '';

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

}

.fl {

float: left;

}

.fr {

float: right;

}

.box{

width:400px;

}

.box.left{

width:100px;

height:300px;

background-color:red;

float:left;

}

.box.right{

width:300px;

float:left;

}

我是左边

我是右边

从以上的代码我们可以得知，在IE6、IE7下元素浮动要并排在同一行的元素都要加浮动，特别注意下。

---------------华丽的分割线---------------

四、IE6和IE7下几px间隙的问题，直接上代码，如下：

IE6和IE7下几px间隙的问题

* {

margin: 0;

padding: 0;

border: 0;

list-style: none;

}

.clearfix:before,

.clearfix:after {

display: table;

content: '';

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

}

.fl {

float: left;

}

.fr {

float: right;

}

ul{

width:300px;

border:5pxsolid#000;

}

li{

height:30px;

line-height:30px;

font-size:12px;

border:1pxsolid#ccc;

vertical-align:top;

}

a{

float:left;

}

span{

float:right;

}

作者

作者

作者

作者

作者

从上面的代码我们可以得知，在IE6、IE7下li存在几px的间隙问题，在IE6、IE7下li本身没有浮动，但是li里面的内容浮动了，此时每个li与li之间就会多出来几px。其实解决的办法也相当的简单，如下：

1.给li加浮动(这个方法不靠谱)。

2.给li加上一条样式vertical-align: top;消除在IE6、IE7下li与li之间的几px距离。

---------------华丽的分割线---------------

五、垂直对齐方式，直接上代码，如下：

垂直对齐方式

* {

margin: 0;

padding: 0;

border: 0;

list-style: none;

}

.clearfix:before,

.cleafix:after {

display: table;

content: '';

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

}

.fl {

float: left;

}

.fr {

float: right;

}

.box{

height:200px;

margin:auto;

border:2pxsolid#000;

text-align:center;

}

.boxspan{

display: inline-block;

vertical-align:middle;

}

.box.span1{

width:100px;

height:200px;

background-color:red;

}

.box.span2{

width:200px;

height:100px;

background-color:blue;

}

class="span1">

class="span2">

从上面的代码我们可以得知，要让一个元素垂直对齐可以使用vertical-align属性，它有常见的值，像vertical-align: top / bottom / middle / baseline等。

默认是底部对齐，我们可以使用vertical-align: middle;让其垂直居中对齐。

---------------华丽的分割线---------------

六、垂直对齐方式的应用，直接上代码，如下：

垂直对齐方式的应用

* {

margin: 0;

padding: 0;

border: 0;

list-style: none;

}

.clearfix:before,

.clearfix:after {

display: table;

content: '';

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

}

.fl {

float: left;

}

.fr {

float: right;

}

.box{

border:10pxsolid#000;

background-color:red;

}

img{

vertical-align:top;

}

素材提供，如下：

memories.png图片：

从上面的代码我们可以得知，要让一个元素垂直对齐可以使用vertical-align属性，它有常见的值，像vertical-align: top / bottom / middle / baseline等。

默认是底部对齐，我们可以通过在img标签里设置vertical-align: middle;让其垂直居中对齐。

---------------华丽的分割线---------------

总结：

今天分享了overflow属性的使用、IE6和IE7下兼容性问题的处理和垂直对齐方式的应用等相关知识点，希望大家好好掌握，祝学习愉快！当然啦，还不仅限于此，小小游下期还会继续分享更多更精彩的布局实战案例与大家一起讨论，敬请期待哈！

感谢您的阅读，如果您觉得我的公众号还不错，请多帮我推荐给您身边的朋友，多谢了。

我就是小小游，英文名是allen！凯游科技致力于WEB全栈开发技术钻研领域，每天一篇前端技术文章或软件技术类干货送上，不定期更新！

欢迎（长按）以下二维码关注：kaiyouservices_allen ---> 凯游科技