零基础学做网站培训介绍

当前位置:

CSS3中display:inline-block 和float的区别

问:老师您好   display:inline-block 和float 都是横排   都有哪些区别呢?

HTML的元素有多种display属性,比较常见的有display:none; display:block; display:inline和display:inline-block;等。

有些HTML元素自然地带有display:block;样式属性,比如


<div>
<h1>...<h6>
<p>
<ul>,<ol>,<dl>
<li>,<dt>,<dd>
<table>
<pre>

等元素,其显示为block样式,会将一行中其可用的空间给跨越占据,容不下另一个元素与其同行。

有些HTML元素则是自然带有display:inline;样式属性,这也是元素默认的样式,比如


<span>
<a>
<strong>
<em>
<img>
<br>

等元素,其不会打断文档排布流,会在一行中一个挨一个地排列。

当想要做一个水平的列表时,一种方式是使用float来实现,但得容忍其缺点;另一种方式是使用display:inline-block;来实现。现在转入正题了。

用float方式会带来的麻烦:

使用float方式需要注意的是,要有一个元素来包裹float元素,同时避免接下来的元素紧紧地靠近它。另外一个麻烦是,当有一个多行水平列表,但是列表里的内容有不同的高度时,就会排的特别痛苦。

用display:inline-block;方式:
display:inline-block;方式样式化列表时,既可使得列表元素能按行挨个排列,同时元素还能保持其块属性,比如高和宽、上下边距等。但是对有不同高度内容的元素时,通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。

用display:inline-block;的浏览器兼容:
CSS中使用display:inline-block;来样式化,在Firefox, Safari, Google Chrome 和 IE 8及以上是有效的。但是在早期的IE,比如IE 7,就要做一些改变才能适应。


/* For IE 7 */
zoom: 1;
*display: inline;

通常,做浏览器兼容适应的CSS样式化,特别好是分开独立的样式文件,然后通过条件注释将其引入。

用display:inline-block;的空白符引起的问题:

因为元素之间是行内inline修饰排列的,因此HTML中的空格符也会影响到这个修饰。也就是说,当我们把元素的大小和顺序排列好后,如果在<li>元素之间有空格符,这个空格符将会产生4px的边距。

综述

1、用display:inline-block;来实现水平列表比用float方式更容易控制,需要注意的是前者会由空格符带来边距影响。

2、inline-block默认是底部对齐的,要让两个元素顶部对齐,需要加上一句:veritcal-align:top;

3、inline-block 的宽度可以自行设置的,而inline的自行设置宽度是无效的。

相关阅读:

如何制作自适应网页网站(CSS3 Media Queries)

CSS3怎么设置渐变的背景颜色

CSS3 box-shadow 属性设置盒四周阴影

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 通过CSS样式可以控制网页中各个元素的显示方式,通过CSS样式可以在网页中画出一个三角形,圆形等形状。(了解更多CSS知识,请学习CSS视频教程)CSS
  • 什么是自适应网页随着网站浏览设备屏幕大小不同(包括PC,IPAD,手机等浏览设备),为了适应不同的屏幕,做网站制作时可以自动根据浏览网站的屏幕尺
  • 在实际网站制作过程,往往需要给一个列表添加项目序列编号,使数据给用户展现更加清楚。如下图:给一个列表添加这样的项目序列编号,我们可以
  • 我们都知道做网站之前,购买存放网站内容的空间是前提。我们把存放网站内容的地方分为三个类别:虚拟主机,VPS,服务器。下面来了解一下虚拟
  • DW与WP有什么区别 图文教程 (113402 次浏览)
    很多学做网站学员都有这样的疑惑,弄不清dreamweaver和wordpress有什么区别?这是由于他们在学习做网站过程中没有很好的理解这二个东东。容易被二者的
  • 在学做网站论坛的课程中,我们介绍了本地环境网站搭建,本地网站建站课程主要是为了让还没有自己域名和空间的学员体验一下怎么做网站的感觉。