css学习笔记二之inline-block
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元素加上边框,则会发现左右有空白出现,这时有何解决方法呢?现在让我们来看看解决方法:
- 删除html中的空白:不要让元素之间换行,这可能比较蛋疼,但也是一种方法,特别是你元素不多的时候。
- 使用负边距:你可以用负边距来补齐空白。但你需要调整font-size,因为空白的宽度与这个属性有关系。我认为是0.25em,但我不确定。如果有人知道可以留言告诉我。
- 给父元素设置font-size:0:不管空白多大,由于空白跟font-size的关系,设置这个属性即可把空白的宽度设置为0.在实际使用的时候,你还需要给子元素重新设置font-size。
css学习笔记二之inline-block的更多相关文章
- CSS学习笔记——包含块 containing block
以下内容翻译自CSS 2.1官方文档.网址:https://www.w3.org/TR/CSS2/visudet.html#strut 有时,一个元素的盒子的位置和尺寸根据一个确定的矩形计算,这个确定 ...
- css学习笔记二
下面来总结一下盒子模型,流式布局,浮动布局,层布局(定位布局). 1.盒子模型 有二种:IE盒子模型 和 标准w3c盒子模型 1)IE的盒子模型的content包含了padding和border 2) ...
- CSS学习笔记二:css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
- Html+css学习笔记二 标题
学习新标签,标题 <html> <head> <title>tags</title> </head> <body> <h1 ...
- CSS学习笔记之基本介绍
1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...
- amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules
amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules 一.总结 1.am:以 am 为命名空间 2.模块状态: {命名空间}-{模块名}-{状态描述} 3.子模块: {命名空间}- ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- CSS学习笔记09 简单理解BFC
引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
随机推荐
- CSS hack常用方案(摘选)
邮箱因为默认了line-height?:170%,导致采用table元素时继承问题,可以采用line-height:50% 很好解决. 常 在使用float时,后面的显示不正常,因为继承了float了 ...
- CentOS 6.7下iPython提示“WARNING: Readline services not available or not loaded.”的解决办法
yum install readline-devel 然后,使用pip或者easy_install安装readline即可 pip install readline
- spring使用aop
基于spring-framework-4.1.7使用aop >>>>>>>>>>>>>>>>>&g ...
- MongoDB 3.0安全权限访问控制(Windows版)
MongoDB 3.0安全权限访问控制(Windows版) 1.首先,不使用 –auth 参数,启动 mongoDB: mongod --dbpath "d:\mongodb\data\db ...
- AndroidStudio字体主题样式分享
最近慢慢在从eclipse往AndroidStudio习惯,但总觉得AS的默认字体颜色看的不舒服,便花了些时间将字体颜色样式改成了和原来类似的.以下是效果图. 这里是下载地址http://downlo ...
- UDP,TCP理解。
UDP: 面向无连接, 每个数据大小限制在64K内 因为面向无连接,所以就是不可靠协议. 将数据和源和谜底封装到数据包当中,不需要建立连接.速度快(就像送快递一样,管你在不可以先到你门口) 用处:聊天 ...
- C++ 不使用virtual实现多态
不使用virtual实现多态可以用成员函数指针完成. 成员函数指针形式:返回类型(A::*指针名)(形参表) 其中A是类类型,即这个指针是指向A类的成员函数的函数指针 例如:int(A::*P)(in ...
- 理解Javascript__undefined和null
在 ECMAScript 的原始类型中,是有Undefined 和 Null 类型的. 这两种类型都分别对应了属于自己的唯一专用值,即undefined 和 null. alert(undefined ...
- Lua与C/C++交互问题
初学lua,遇到注册C/C++交互函数问题 在lua与C/C++交互时,C/C++的注册Lua函数若是一个有返回类型(压栈)而不是获取类型的时候应该返回1而不是返回0,否则会出现在Lua中值为nil( ...
- 3D math primer for graphics and game development
三角网格(Triangle Mesh) 最简单的情形,多边形网格不过是一个多边形列表:三角网格就是全部由三角形组成的多边形网格.多边形和三角网格在图形学和建模中广泛使用,用来模拟复杂物体的表面,如建筑 ...