display 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,

display:block; 块级元素。<a>,<span>标签设置宽度和高度

display:block;是让对象成为块级元素(比如a,span等) 转化后可以对a或者span标签进行width和height设置,否则设置不了 display有很多对象,具体可以参考http://www.w3school.com.cn/css/pr_class_display.asp 一般都是用display:none和display:block来控制层的显示

使用float和display:block将内联元素转换成块元素的不同点

使用float和display:block将内联元素转换成块元素的不同点使用float和display:block将内联元素转换成块元素的不同点:内联元素可以转换成块级元素,常用的方法比如可以为内联元素使用float属性让内联元素浮动起来,或者为内联元素添加display:block.虽然两者都可以让内联元素转换成块级元素,但是有区别的.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8

ie、firefox、chrome中关于style="display:block" 引发的页面布局错乱的解决办法

ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:block" 导致页面布局错乱对table中tr 不显示时,添加style="display:none",ie.chrome.firefox等都没有问题.但是如果想要显示某个tr,就不能使用style="display:block"了,因为,在ie下,可以正常

display:inline与display:block——行内元素显示与块级元素显示

display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认display属性是block, 但将div的display设置为inline的话,则多个div可以像span一样显示在一行了. 它可以让行内显示为块的元素,变为行内显示,例如 <div> DIV1 </div> <div> DIV2 </div> 这里DIV1和DIV2分

CSS中display:block的使用介绍

在CSS的规定中,每个页面元素都有一个display的属性,用于确定这个元素的类型是行内元素,还是块级元素: (1)行内元素:元素在一行内水平排列,依附于其他块级元素存在,因此,对行内元素设置高度.宽度.内外边距等属性,都是无效的:一般行内元素,只能是文本或嵌套行内元素,如常见元素<a>,<input>,<span>,<iframe>和元素样式的display:inline的都是行内元素: a)设置宽度width和高度height无效,不过高度可以通过lin

display:block、inline、inline-block的区别及应用案例

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

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

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

如何获取设置display:none元素及子元素的宽高

由于元素设置了display:none时,页面便不会对其渲染,导致无法获取其元素的宽高.目前一般的做法都是先对其设置display:block,拿到数据再设置其为display:none.如此便可以了代码如何获取 id="ul" 元素的宽高??? html <section class="section none"> <div> <ul id="ul"> <li>第 <span class

table使用display:block时会多出一条边框

在静态页面中添加一个table,然后设置table的显示隐藏,当使用display:block显示table时出现了如下情况,详情请点击链接: http://jsbin.com/pinovorahu/edit?html,css,output <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content=&quo

display:inline; display:block;

block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input.select.textarea.img.br等 display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元素即使设置了宽度,仍然是独占一行. block元素可

display:block、display:inline与displayinline:block的概念和区别

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

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

之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display:block的区别首先先说一个名词 :inline element:行内元素也叫作内联元素,内嵌元素,直进式元素 block element:块级元素 1.display:inline 转化成内联元素,不换行: 内联元素的前面和后面都不会有换行符,你不可以给内联元素定宽和高,也就是说你如果同时给一

CSS之display:block与display:inline-block

1.<span style="display:block; border:red solid 1px; width:100px"></span> 行级元素是不允许设置width和height的,如果加上display:block; 之后则可以设置width和height,***它就变成了块级元素***. 2.<span style="display:inline-block; border:red solid 1px; width:100px

jquery控制css的display(控制元素的显示与隐藏)

使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示display:none; $("#id").toggle()切换元素的可见状态:如果元素是可见的,切换为隐藏的:如果元素是隐藏的,切换为可见的. $("#div的id").css('display','none'); $("#div的id").css(

Display:Block

根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level):而span元素的默认display属性值为“inline”,称为“行内”元素. 块级元素: 动占据一定矩形空间,可以通过设置高度.宽度.内外边距等属性,来调整的这个矩形的样子: 行内元素: 自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度.

display:inline 跟 display:block 跟 display:inline-block区别

我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-block; 就是在同一行内的块级元素. 说概念太模糊,来个真实案例吧. <a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a> <a

多个inline元素、block元素、inline-block元素在父容器中的换行情况

1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px solid #ccc;margin:10px;} .inline-element a{margin:0 5px 0 0;padding:0 5px 0 0;height:20px;line-height:20px;background:#ccc;} </style> <div class=&q

在table中tr的display:block在firefox下显示布局错乱问题

[转自:] http://blog.csdn.net/sd2131512/article/details/4720345 按照常理,对于某一单元行需要显示时,使用:display:block属性,不需要显示时使用display:none属性,而且这样做在IE浏览器中显示正常,没有任何问题. 但是当用Firefox浏览时却出现了布局错乱的问题,然后通FireBug去看了下源码,调试下了,发现是display:block属性搞的鬼. 1.当表格为多列的情况下,属性为"display:block&qu

有关table布局时tr 属性display:block显示布局错乱

display:block display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的; display:table-row table-row:指定对象作为表格行,类同于html标签<tr> 问题如下当表格为多列的情况下,属性为"display:block"行的内容宽度仅与第一列宽度相同,也就是说无论你使colspan的属性值为多少,剩余列的空间都不进行解析新闻的内容只能占一列的宽度当将displa

display:inline-block的div 与 display:block的div之间有间隔问题（div与div之间有间隔的可能性）

首先看一下我出现的问题如下图: 如上图所示,我的导航栏是由三部分组成的,三部分样式如下: .logo{ /*红框*/ position: relative; display: inline-block; width: 15%; line-height: 80px; vertical-align: middle; } .nav{ /* 导航*/ position: relative; display: inline-block; top:0px; width: 70%; line-height:

display block 元素顶到了页面最上面

热门专题