cssdisplaynone属性,CSSdisplay

http://www.itjxue.com  2023-01-23 18:44  来源:未知  点击次数: 

如何理解CSS的display属性

定义:display?属性规定元素应该生成的框的类型。

描述:这个属性用于定义建立布局时元素生成的显示框类型。对于?HTML?等文档类型,如果使用?display?不谨慎会很危险,因为可能违反?HTML?中已经定义的显示层次结构。对于?XML,由于?XML?没有内置的这种层次结构,所有?display?是绝对必要的。

值:

none???????????此元素不会被显示。

block??????????此元素将显示为块级元素,此元素前后会带有换行符。

inline?????????默认。此元素会被显示为内联元素,元素前后没有换行符。

inline-block???行内块元素。

list-item??????此元素会作为列表显示。

run-in?????????此元素会根据上下文作为块级元素或内联元素显示。

table??????????此元素会作为块级表格来显示(类似?table),表格前后带有换行符。

inline-table???此元素会作为内联表格来显示(类似?table),表格前后没有换行符。

table-row-group????此元素会作为一个或多个行的分组来显示(类似?tbody)。????

table-header-group????此元素会作为一个或多个行的分组来显示(类似?thead)。????

table-footer-group????此元素会作为一个或多个行的分组来显示(类似?tfoot)。????

table-row?????此元素会作为一个表格行显示(类似?tr)。????

table-column-group????此元素会作为一个或多个列的分组来显示(类似?colgroup)。????

table-column????此元素会作为一个单元格列显示(类似?col)????

table-cell????此元素会作为一个表格单元格显示(类似?td?和?th)????

table-caption????此元素会作为一个表格标题显示(类似?caption)????

inherit????规定应该从父元素继承?display?属性的值。

css中display怎么做显示或隐藏

display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

display:block可以显示一个块元素,或者display:inline是显示一个内联元素。

display主要用的CSS样式有以下三个:

display:block——显示为块级元素。

display:inline——显示为内联元素。

display:inline-block——显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性。

扩展资料:

显示的块级元素(block)特性:总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

显示的内联元素(inline)特性:和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;

块级元素主要有:address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li等css属性。

内联元素主要有:a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var等css属性。

为什么css中添加了display:none其它js代码会失效?

display:none以后,元素相当于已经不存在了,如果你有针对该元素的js代码,肯定无法获取到对象,自然代码就会失效。

display:none与

visibility

:hidden不同,前者表示元素已经不在

文档流

中,不占据任何位置,而后者只是隐藏,元素依然在文档流中,占据着位置。

css中把一个div设置display: none属性,等到display: block的时候会有一个换行的效果,我不想换行

官方文档:block 此元素将显示为块级元素,此元素前后会带有换行符。

inline 默认。此元素会被显示为内联元素,元素前后没有换行符。

所以把block改成inline就不会出现换行了

display中的none,block,inline等属性

dispaly默认属性是none

block是块!就是说占据浏览器的一整行

inline是内联

举个例子:

如果要做一个竖形的导航栏

html

head

style

type="text/css"

a

{

display:block;

}

/style

/head

body

a

href="#"a/a

a

href="#"b/a

a

href="#"c/a

a

href="#"d/a

a

href="#"e/a

a

href="#"f/a

/body

/html

a属性的默认属性是inline

用display方法把a的默认属性改为了block

第一个a占据一行

谁能帮我解释一下Dreamweaver中的CSS的display属性的none、block、inline等都用在什么场合?

dispaly?:none?-------隐藏元素

? ? ? ? ? :block?-------块级元素

? ? ? ? ? :inline?-------内联元素

? ? ? ? ? :inline-block?-------?行内块元素

这几个都是比较常用到的。

? ? ? none这个值可以从它了解释来说也不难理解就是隐藏某些东西,比如说Tab切换就会用到这个值如图?第三格的内容显示了?第一、第二内容隐藏,当鼠标经过哪个时哪个就显示?而其中两个就隐藏就是用到这个属性的none值。

? ? ? block这个值可以有两种理解:

①上面说到的隐藏,既然说到隐藏那就有显示,所以block可以理解为显示;

②第二种理解重要点——块级元素,所谓块级元素用另一个简单的理解就是在浏览器里面显示整一块,它会随着浏览器的变大而变宽,变小面变窄,在同一级别的不管你在它后面添加再多的内容,也只是会在它的下面显示出来而不绝对不会在同一块内显示,比如说div、p、h1~h6等等标签都是块级元素,

块级元素还有一种特殊的地方就是可以定义height和width,只有该标签为默认的块级元素和被定义了这个属性的block值?才可以定义高和宽。

? ? ? inline这个值是内联元素的意思,上面说到是一块一块占满整一行的,那有没有可以在一行内显示多个这样的内容的,答案是有的就是这个值inline;内联元素就是可以在一行内有足够的空间的情况下它都会排成一排,不会换行,比如:a、span、b、em、strong、del、i、img、等等很多标签属于内联元素,

内联元素是不支持定义高和宽的,所以要想定义高和宽的时候,就必须要写dispaly:block只有这样把内联变成块级元素才可以定高和宽。

? ? ? inline-block这个值?是行内块元素;上面有说过想定义高和宽就一定要块级元素,想要在排成一排就要内联元素,那我想要排成一排又想定义高和宽的方法有没有,答案是有的,可以用到inline-block这个值?,这个行内块元素是指这个其实是内联元素但是它具有定义高和宽这两个属性。

这个值唯一一个不足的地方就是IE6不支持这个值,如果是想排成一排又可以定高和宽还有兼容IE6的就要配合到float了

? 当你读懂了CSS就什么知道了,display这几个常用的值意思就是这

(责任编辑:IT教学网)

更多

推荐Flash动画制作教程文章