inline-block(行内区块元素)的详解和应用
说inline-block(行内区块元素)之前,先说下他另外的2个兄弟
display:inline; 内联元素,简单来说就是在同一行显示。他没有高度,给内联元素设置width和height是没效果的。
display:block; 块级元素,简单来说就是就是有换行,会换到第二行。同时可以设置宽高。
inline-block详解
inline-block 的元素既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align(因为这个垂直对齐属性只对设置了inline-block的元素有效) 属性。
HTML 中的换行符、空格符、制表符等合并为空白符,字体大小不为 0 的情况下,空白符自然占据一定的宽度,使用inline-block 会产生了元素间的空隙。(这句话下面会用例子解释)
还是似懂非懂吗,来看下例子吧,保证就懂了
详细应用
我在了解inline-block之前,我的导航栏一直采用float浮动来达到横向排列的目的,然而浮动是会产生副作用的,需要清除浮动,相对变得麻烦了。使用inline-block将会变得很方便
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- div{
- width: 100%;
- background: yellow;
- height: 100px;
- text-align: center;
- line-height: 100px;
- }
- a{
- color:#fff;
- text-decoration: none;
- display: inline-block;
- width: 100px;
- height: 30px;
- line-height: 30px;
- background: red;
- }
- </style>
- </head>
- <body>
- <div>
- <a href="">我是a1</a>
- <a href="">我是a2</a>
- <a href="">我是a3</a>
- <a href="">我是a4</a>
- </div>
- </body>
- </html>
效果
有没有发现,每个a之间都会有一个空隙,这个空隙是因为块级元素会换行,就有换行,.HTML 中的换行符、空格符、制表符等合并为空白符.所以换行符会占据宽度,产生间隙
如何取消inline-block产生的间隙
我认为有2种方法
第一种
使用负值的margin各个浏览器的负值也不相同,才能完美贴合
浏览器 | margin值(左右) |
火狐 | margin:-4px |
chrome | margin:-3px |
IE | margin:-2px |
第二种
在父元素的css中设置word-spacing负值
浏览器 | word-spacing |
火狐 | word-spacing:-8px |
chrome | word-spacing:-6px |
IE | word-spacing:-4px |
效果
兼容性
很遗憾,IE7以下的浏览器不支持inline-block,但并非完全不支持
解决IE6、IE7兼容性的方法:
1、首先设置inline-block触发块元素,具有了layout的特性,然后设置display:inline使块元素呈现内联元素,此时layout的特性不会消失。
2、直接设置display:inline,使用zoom:1触发layout。
兼容所有浏览器的方法是:
display:inline-block;
*display:inline;
*zoom:1;
兼容性解决方法参考自charling:inline-block的兼容性问题
inline-block(行内区块元素)的详解和应用的更多相关文章
- (转) html块级元素和内联元素区别详解
http://blog.csdn.net/chen_zw/article/details/8713205 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显 ...
- html块级元素和内联元素区别详解
块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...
- CSS 块状元素和内联元素的详解
我们先来分析一下块级元素.内联级元素的定义和解析: 块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P&q ...
- 【css】主要的块状元素(block element)和内联元素(inline element行内元素)
内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用 display可以强制转换行内元素和块状元素,还可以取消显示none 块元素(bloc ...
- CSS.02 -- 样式表 及标签分类(块、行、行内块元素)、CSS三大特性、背景属性
样式表书写位置 内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...
- HTML行内元素、块状元素、行内块状元素的区别
HTML可以将元素分类方式分为行内元素.块状元素和行内块状元素三种.首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换: (1)display:inline;转换为行内 ...
- css——行内元素和块级元素的具体区别与行内块元素
(学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...
- __x__(17)0906第三天__块元素block_内联元素inline_行内块元素inline-block
1. 块元素block 独占一行的元素 一般使用块元素包含内联元素,用作页面布局 <a> 标签可以包含任何除了a标签以外的元素 <p> 标签不能包含块元素 h1... ...h ...
- HTML行内元素、块状元素和行内块状元素的区分
HTML 5 的常用元素分类 HTML可以将元素分类方式分为行内元素.块状元素和行内块状元素三种,这三者是可以互相转换的,通过display属性可以实现互相转换 (1)display:inline;转 ...
随机推荐
- C#中实现邮件发送功能
public static int sendmail(string to, string body,string subject) { try { int nContain = 0; ///添加发件人 ...
- FFT(快速傅里叶变换):HDU 4609 3-idiots
3-idiots Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- 主席树:HDU 4417 Super Mario
Super Mario Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- 用DELPHI操作EXCEL Word
用DELPHI操作EXCEL 在DELPHI中显示EXCEL文件,可用以下简单代码做到.但要实用,则需进一步完善. var Form1: TForm1; EApp:variant;implemen ...
- Andriod视频http://pan.baidu.com/share/link?shareid=7300&uk=3339495714
老罗Android开发 视频教程 一.Android入门介绍 视频教程 1.1 android系统介绍 1.3 如何搭建android开发环境 1.5 androi ...
- [转]浏览器如何和Web服务器通信
http://hi.baidu.com/ywqme/item/b5297014b2e58f4e6826bb74 概述 普通网民打开网页,访问网站,并不需要了解所谓HTTP协议.作为软件工程师,了解一下 ...
- [置顶] C++中RTTI机制剖析
C++中要想在运行时获取类型信息,可没有Java中那么方便,Java中任何一个类都可以通过反射机制来获取类的基本信息(接口.父类.方法.属性.Annotation等),而且Java中还提供了一个关键字 ...
- Swing实现文件选择(目录选择)附导出
具体生成工具如图: (1) (2) (3) (4) 源码 : example.java package org.qiailin.jframe; import java.awt.Container; i ...
- Miller-Rabin质数测试
Miller-Rabin质数测试 本文主要讨论使用Miller-Rabin算法编写素数的判定算法,题目来源于hihocoder. 题目 题目要求 时间限制:10000ms 单点时限:1000ms 内存 ...
- 对于数组(字符串)slice方法的总结
数组(字符串)使用slice方法的目的就是截取目标数组(字符串),通俗的来讲就是截取想要的.网上有很多slice方法的实例加以说明,在此主要是从特殊到一般对此方法进行了总结. 先说总结的方法,再看下面 ...