display:inline/block/inline-block

display:inline; 内联元素,简单来说就是在同一行显示。
display:block; 块级元素,简单来说就是就是有换行,会换到第二行。
display:inline-block; 就是在同一行内的块级元素。

说概念太模糊,来个真实案例吧。

<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a><a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a>

A默认就是一行,所以inline用在这里是废的。宽高度设置也是费的。

<a href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接一</a><a href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接一</a>

块状,这里高宽度就生效了,但是因为是块状,前后有换行符,所以这是两行了。

<a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">链接一</a><a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">链接一</a>

这样就是同时达到块状,而且在同一行显示。

时间: 2024-10-27 01:23:11

display:inline/block/inline-block的相关文章

DIV CSS display(block,inline,none)的属性教程

display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行内元素. inline元素的特点是: 和其

2016/2/25 1, margin auto 垂直方向测试 无效 2,margin重叠 3,哪些是块状哪些是内联 4,display:block inline 导航栏把内联转块状最常见+ 扩展

1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向上margin:auto;无效.2.测试margin重叠的发生条件及现象,并自行搜索“父子div”也会发生margin重叠,写出代码及效果图. <!DOCTYPE html> <html> <head> <title>测试父子DIV-margin</tit

display:block / inline / inline-block 三个之间的区别

块元素特点: 每次都是从新行开始: 可以设置宽.高,行高,顶底边距等: <div>  <ul> <ol> <li> <dl> <dt> <dd> <table> <form>  <p>  <hr/><textarea>等都是 行元素特点: 和别的元素在同一行: 不可以设置宽高,行高,顶底边距等: <span> <img> <var&g

display:block,inline,inline-block,none的区别

display几个常用的属性以及区别 none,block,inline,inline-block; none:会隐藏元素,不占据dom空间,下文会提到; block:块级元素,前后会有换行符,占据一行;可以进行宽高设置,上下左右的padding,margin属性也可以设置; inline:行内元素,前后没有换行符,不能进行宽高设置;由左到右,从上到下排列,不可以设置上下margin,padding属性; inline-block:既有宽高属性,又不会换行; display:none跟visib

dispay属性的block,inline,inline-block

转自下面的几位大神: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 大体来说HTML元素各有其自身的布局级别(block元素

block,inline和inline-block的区别

概念 block是块级元素,会被现实认为是单独的一块,会单独占一行. 常见的block元素有: DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等. inline内联元素,不会产生换行,一系列的inline在一行内显示,直到排满为止. 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等. inline-block:是将对象呈现为inline对象,但是对象的内容作为b

当inline元素包裹block元素时会发生什么

经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a> 点击图片自动跳转,不用增加新的点击事件,光标滑过时变成小手等等,这都是a标签的功劳. 但是inline元素包裹block元素后,inline元素本身是否会变成blcok元素,还有待求证,于是做了如下对比: <div>这里是块元素</div> <span>用于测试(没有

display:block | inline | inline-block的区别

display:block; 1.默认宽度为父元素宽度. 2.可设置宽高. 3.换行显示. display:inline: 1.默认宽度为内容宽度. 2.不可设置宽高. 3.同行显示. display:inline-block: 1.默认宽度为内容宽度. 2.可设置宽高. 3.同行显示. 4.整块换行. 例:input,buttom,select等表单元素.

block 解析 - block变量

block变量 上一篇 讲的是block静态变量的特性,这里我们来看一下_block变量.引用官方: You can specify that an imported variable be mutable—that is, read-write— by applying the __block storage type modifier. __blockstorage is similar to, but mutually exclusive of, the register, auto, a

Block实现-block存储域

Block转换为Block的结构体类型的自动变量,_block变量转换为_block变量的结构体类型的自动变量,所谓结构体类型的自动变量,即栈上生成的该结构体的实例.我们已经了解了block时oc对象,该block的类为_NSConcereteStackBlock,虽然该类并没有出现以变换源代码中,还有很多类似的类 _NSConcereteStackBlock    对象存储域在栈上 _NSConcereteGlobalBlock     域全局变量一样,设置在程序的数据区域(.data中) _