1、inline-block是CSS2.1中新增的盒类型,在div中将display属性设定为"inline-block",则div显示效果与设置display属性为"inline"是一样的效果。

inline-block具有inline属性的列属性,内部又具有block属性的块属性,可以使用width,height,margin,padding,border等元素。

2、使用inline-block可以在某些情况下替代float浮动元素,PS:要做一个横向导航条

在inline-block出现之前,一般都是使用以下代码,来完成上述功能:

<div class="nav">
<ul>
<li><a href="">AngularJS</a></li>
<li><a href="">AngularJS</a></li>
<li><a href="">AngularJS</a></li>
<li><a href="">AngularJS</a></li>
<li><a href="">AngularJS</a></li>
<li><a href="">AngularJS</a></li>
</ul>
</div> li {
float: left;
list-style: none;
width: 100px;
padding: 10px 0;
}

而使用inline-block,则可以通过如下代码完成:

li {
display: inline-block;
width: 100px;
padding: 10px 0;
text-align: center;
}

 关于两者的区别,在于float脱离文档流,若是需要文字环绕,则应该选择float元素,若需要让nav居中,或垂直对齐,则需要用inline-block。

 而在使用inline-block时,若是给上述li元素加上边框,则会发现左右有空白出现,这时有何解决方法呢?现在让我们来看看解决方法:

  1. 删除html中的空白:不要让元素之间换行,这可能比较蛋疼,但也是一种方法,特别是你元素不多的时候。
  2. 使用负边距:你可以用负边距来补齐空白。但你需要调整font-size,因为空白的宽度与这个属性有关系。我认为是0.25em,但我不确定。如果有人知道可以留言告诉我。
  3. 给父元素设置font-size:0:不管空白多大,由于空白跟font-size的关系,设置这个属性即可把空白的宽度设置为0.在实际使用的时候,你还需要给子元素重新设置font-size。

css学习笔记二之inline-block的更多相关文章

  1. CSS学习笔记——包含块 containing block

    以下内容翻译自CSS 2.1官方文档.网址:https://www.w3.org/TR/CSS2/visudet.html#strut 有时,一个元素的盒子的位置和尺寸根据一个确定的矩形计算,这个确定 ...

  2. css学习笔记二

    下面来总结一下盒子模型,流式布局,浮动布局,层布局(定位布局). 1.盒子模型 有二种:IE盒子模型 和 标准w3c盒子模型 1)IE的盒子模型的content包含了padding和border 2) ...

  3. CSS学习笔记二:css 画立体图形

    继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...

  4. Html+css学习笔记二 标题

    学习新标签,标题 <html> <head> <title>tags</title> </head> <body> <h1 ...

  5. CSS学习笔记之基本介绍

    1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...

  6. amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules

    amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules 一.总结 1.am:以 am 为命名空间 2.模块状态: {命名空间}-{模块名}-{状态描述} 3.子模块: {命名空间}- ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  9. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

随机推荐

  1. CSS hack常用方案(摘选)

    邮箱因为默认了line-height?:170%,导致采用table元素时继承问题,可以采用line-height:50% 很好解决. 常 在使用float时,后面的显示不正常,因为继承了float了 ...

  2. CentOS 6.7下iPython提示“WARNING: Readline services not available or not loaded.”的解决办法

    yum install readline-devel 然后,使用pip或者easy_install安装readline即可 pip install readline

  3. spring使用aop

    基于spring-framework-4.1.7使用aop >>>>>>>>>>>>>>>>>&g ...

  4. MongoDB 3.0安全权限访问控制(Windows版)

    MongoDB 3.0安全权限访问控制(Windows版) 1.首先,不使用 –auth 参数,启动 mongoDB: mongod --dbpath "d:\mongodb\data\db ...

  5. AndroidStudio字体主题样式分享

    最近慢慢在从eclipse往AndroidStudio习惯,但总觉得AS的默认字体颜色看的不舒服,便花了些时间将字体颜色样式改成了和原来类似的.以下是效果图. 这里是下载地址http://downlo ...

  6. UDP,TCP理解。

    UDP: 面向无连接, 每个数据大小限制在64K内 因为面向无连接,所以就是不可靠协议. 将数据和源和谜底封装到数据包当中,不需要建立连接.速度快(就像送快递一样,管你在不可以先到你门口) 用处:聊天 ...

  7. C++ 不使用virtual实现多态

    不使用virtual实现多态可以用成员函数指针完成. 成员函数指针形式:返回类型(A::*指针名)(形参表) 其中A是类类型,即这个指针是指向A类的成员函数的函数指针 例如:int(A::*P)(in ...

  8. 理解Javascript__undefined和null

    在 ECMAScript 的原始类型中,是有Undefined 和 Null 类型的. 这两种类型都分别对应了属于自己的唯一专用值,即undefined 和 null. alert(undefined ...

  9. Lua与C/C++交互问题

    初学lua,遇到注册C/C++交互函数问题 在lua与C/C++交互时,C/C++的注册Lua函数若是一个有返回类型(压栈)而不是获取类型的时候应该返回1而不是返回0,否则会出现在Lua中值为nil( ...

  10. 3D math primer for graphics and game development

    三角网格(Triangle Mesh) 最简单的情形,多边形网格不过是一个多边形列表:三角网格就是全部由三角形组成的多边形网格.多边形和三角网格在图形学和建模中广泛使用,用来模拟复杂物体的表面,如建筑 ...