display属性(inline、block、inline-block、none)

inline: 此元素会被显示为内联元素，元素前后没有换行符。如 a、strong 等元素

　　　box的大小和元素里面的内容大小一致，width，height，margin 等无法改变。

block: 此元素将显示为块级元素，此元素前后会带有换行符。如 div、p 等元素

　　 box的大小可由width，height 等改变。

inline-block: 行内块元素。

　　　　　 box的大小可由width，height 等改变。

none: 此元素不会被显示。且不占用空间。

时间： 2024-10-09 22:38:28

display属性(inline、block、inline-block、none)的相关文章

jquery控制display属性为none或block

代码如下: //隐藏 $("#id").css('display','none'); //显示 $("#id").css('display','block'); 或 $("#id")[0].style.display = 'none'; $("#id")返回的是JQuery 它是个集合肯定有display属性 $("#id").show()表示display:block, $("#id"

CSS基础学习十四：盒子模型补充之display属性设置

我在CSS基础学习十三:盒子模型的i博文只是阐释了CSS盒子模型,并没有过多的使用实例来演示.这篇博文就来做一些盒子模型知识的补充.这一部分对于网页总体布局还是蛮重要的,过去大多数使用HTML中的table元素和框架标签来进行网页的整体布局,现在我们使用最多的是DIV+CSS网页布局.所以一定要掌握好盒子模型,记住 content,border,padding和margin各自在盒子中的作用和使用方式. 先来看一个完整元素的盒子模型实例: <!DOCTYPE html PUBLIC "

理解与应用css中的display属性

display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面,我将按照顺序将上述几种属性做一个完整的讲解. 第一部分:display:none none这个值表示此元素将不被显示.比如,当我们在浏览网页时,如果看到了某个烦人的广告遮挡了我们的实现,更为可气的是,它还没有关闭的选项,这时(以chrome为例),我们就可以按下F12,打开开发者工具,点击element,然后使用左上角的选择工具选中想要删

display属性(元素转换)

display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none inline block inline-block 了解display属性必须知道几个重要的基本知识:块级元素和行内元素.(注:实际上还有空元素,如<br>用于换行, <hr>为一条水平线) 块级元素特点: 总是以一个块的形式表现出来,占领一整行.若干同级块元素会从上之下依次排列(使用float属性除外). 可以设置高度.宽度.各个方向外边距(margin)以及各个方向的内边距(padding).

CSS里display属性

css里display属性在了解css的display属性之前,我想先介绍一下display属性所能改变的元素都有什么. 元素类型元素类型可分为三种,分别是: 块状元素(例如div.dl.form.p等) 内联元素(例如a.b.br.img.input等) 可变元素也可以分为:块状元素.内联元素.内联块元素而在盒子模型可通过display属性改变默认的显示类型. display的属性盒子模型可通过display属性来改变默认的显示类型 display的属性值 display的属性值有许

CSS中display属性：block、inline和inline-block的区别

最近写HTML遇到一个问题:我想设置span的宽度和高度,但是在IE9和chrome下总是不起效果.代码和效果图如下: <head> <style> span{ background-color:#43be60; width:100px; height:50px; margin-top:20px; margin-left:20px; } </style> </head> <body> <div style="background-

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

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元素

display：block;inline;inline-block大总结

总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素): 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL,