display:inline-block属性

块元素的特征
1.在没有设置宽度的时候，默认撑满一行
2.默认元素独占一行
3.支持所有的CSS命令
 
 
内联元素的特征
1.宽高由内容撑开
2.不支持宽高
3.一行上可以显示继续续跟同类的标签
4.不支持上下的margin\
5.代码换行被解析
 
 
 
块和内嵌的转换
 
display:block  显示为块
使用内联碳元素具备块元素属性标签的特征
 
display:inline:显示为内联 
是行块属性标签具备内联元素属性标签的属性
 
 
inline-block 的特点
特性：
1.块在一行显示
2.内联元素支持宽高
3.没有宽度是由内容撑开宽度
 
示例代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta charset="utf-8">
<style>
a{
    height:20px;
    width:17px;
    font-family:'微软雅黑';
    line-height:20px;
    text-align:center;
    text-decoration:none;
    border:1px solid red;
    display:inline-block;
}
.pxbth{
    width:64px;
}
</style>
</head>
<body>
<div class="pgbox">
<a class="pxbth">上一页</a>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>6</a>
<a>7</a>
<a>8</a>
<a>9</a>
<a class="pxbth">下一页</a>
</div>
</body>
</html>
posted @ 2017-03-13 15:18  牧言  阅读(182)  评论(0)    收藏  举报