前端技巧行内块(display:inline-block)了解和使用

行内块(display:inline-block)了解和使用

我们都知道html元素分为块元素和行内元素,他们的CSS默认属性分别为display:blockdisplay:inline,那么display:inline-block这个定义,从字面上看应该是把前两个定义结合在一起了,display:inline-block被称为行内块,设置了inline-block的元素既拥有了block元素可以设置width和height的特性,又保持了inline元素不换行的特性。这样以来,使用这个定义可以轻松的实现一些效果。

首先我能想到的,就是制作横向导航栏,在本站制作网页导航栏这篇文章里曾经用到过这个定义,一般的,我们想让li列表项横向排行首先会想到设置浮动,其实只需设置inline-block就可以了,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
#nav {margin:10px;font-size:18px;}
ul,li {margin:0;padding:0;list-style-type:none;}
li {display:inline-block;width:55px;}
a {text-decoration: none;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">软件</a></li>
</ul>
</div>
</body>
</html>

这里给列表项li设置了display:inline-block,使所有的列表项在行内显示,但还是可以为其设置宽度。

横向导航.png


有时候我们经常会将一个文字链接模拟成按钮的样式方便用户点击,如下图:

链接模拟按钮.png

将文字链接模拟成按钮最简单的方法就是给链接文字增加内边距padding,从而增大用户的点击面积,但是如果想改变这个链接的宽度和高度,则需要将链接转为行内块,否则宽度和高度的定义是无效的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div {margin:50px;font-size:18px;}
p {margin:20px;}
a {text-decoration: none;
padding:8px 15px;
background:#FF642F;color:#fff;
display:inline-block;
width:126px;
}
</style>
</head>
<body>
<div>
<p><a href="#">进入中文版</a></p>
<p><a href="#">进入英文版</a></p>
<p><a href="#">进入葡萄牙文版</a></p>
</div>
</body>
</html>

以上的示例我们是将行内元素转化为行内块,同样的块元素也可以转为行内块,比如下面我们使用行内块来做一个三列网页布局:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
body,div {margin:0;padding:0;color:#fafafa;}
#top {width:100%;height:60px;background:#aaa;}
#wrap {font-size:0;}
#left,#main,#right {display:inline-block;font-size:18px;}
#left {width:20%;height:420px;background:#00C8A7;}
#main {width:55%;height:420px;background:#FFFFAE;}
#right {width:25%;height:420px;background:#8EC7AB;}
#foot {width:100%;height:60px;background:#888;}
</style>
</head>
<body>
<div id="top"></div>
 <div id="wrap">
  <div id="left"></div>
  <div id="main"></div>
  <div id="right"></div>
 </div>
<div id="foot"></div>
</body>
</html>

浏览这个页面,我们发现没有使用浮动也轻松实现三列布局,主要手法是将需要分列布局的几个部分转化为行内块,需要注意的是,具有行内块之间的换行符会被理解为空格,所以为了消除几个行内块之间的空格造成的间隙,我们把包裹这三个行内块的父元素字号给设置为0便可,然后再设置三个行内块的字号大小,这样并不影响文字正常显示。

三列布局.png


有时候需要使一个块元素居中显示,如果这个块元素的宽度固定,则可以使用margin的auto值来实现居中,如果是不确定宽度的块呢?这里我们联想到一个块中的图片,如果让图片居中的话,只需在图片父元素上加上text-align:center即可,而text-align:center对于块本身是无法设置居中的。实际上图片元素相当于一个行内块,而行内块可以由text-align:center设置居中,因此,只要将块元素转为行内块,就可以轻松的设置居中显示了,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
body {margin:0;padding:0;
font-size:20px;color:#fafafa;background:#eee;}
#wrap {text-align:center;}
#top {display:inline-block;
text-align:left;line-height:1.6;
background:#777;padding:30px;}
</style>
</head>
<body>
<div id="wrap">
<div id="top">
<h3>本周热门影片</h3>
 <ul>
 <li>蜘蛛侠之英雄归来</li>
 <li>变形金刚5:最后的骑士</li>
 <li>加勒比海盗5:死无对证</li>
 <li>海边的曼彻斯特</li>
 <li>长发公主番外篇:麻烦不断</li>
 </ul>
</div>
</div>
</body>
</html>

不确定宽度块居中.png


制作图片列表,一般使用浮动布局,但是必须指定图片相等的高度,否则会出现错位,如果不同高度的图片要做成图片列表(类似相册),如下图:

不等高的图片列表.jpg

我们可以通过行内块的方式实现,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
body,div {margin:0;padding:0;}
a {text-decoration: none;}
#photo {margin:20px;font-size:0;}
img {width:150px;
 border:1px solid #ccc;
 padding:4px;margin:10px;
}
.pic {display:inline-block;vertical-align:middle;}
.pic p {font-size:18px;text-align:center;}
</style>
</head>
<body>
<div id="photo">
  <div class="pic"><a href="#"><img alt="test" src="1.jpg"><p>图片的标题</p></a></div>
  <div class="pic"><a href="#"><img alt="test" src="2.jpg"><p>图片的标题</p></a></div>
  <div class="pic"><a href="#"><img alt="test" src="3.jpg"><p>图片的标题</p></a></div>
  <div class="pic"><a href="#"><img alt="test" src="4.jpg"><p>图片的标题</p></a></div>
  <div class="pic"><a href="#"><img alt="test" src="5.jpg"><p>图片的标题</p></a></div>
  <div class="pic"><a href="#"><img alt="test" src="6.jpg"><p>图片的标题</p></a></div>
  <div class="pic"><a href="#"><img alt="test" src="7.jpg"><p>图片的标题</p></a></div>
  <div class="pic"><a href="#"><img alt="test" src="8.jpg"><p>图片的标题</p></a></div>
  <div class="pic"><a href="#"><img alt="test" src="9.jpg"><p>图片的标题</p></a></div>
  <div class="pic"><a href="#"><img alt="test" src="10.jpg"><p>图片的标题</p></a></div>
</div>
</body>
</html>

这样就做出了相册的效果,虽然图片的尺寸不一,但版面并没有因此而变得错乱,这是inline-block行内块用于布局的优势所在。这里将元素转化为行内块后,顺便设置了vertical-align:middle这个定义,它可以实现垂直方向的居中。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/63.html