HTML中显示属性的属性值有哪些 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要介绍了HTML中显示属性的属性值有哪些,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

<强>显示在这里我说四个最常用的属性值内联,块,inlin-block,没有。

<强>首先我们来说一下内联(n内联元素):

该属性值为默认值。此元素会被显示为内联元素,元素前后没有换行符。一般不会设置这个属性值。个人理解,其实跟正常的行内元素没什么区别,用的比较多的还是块和inline-block。

<强>接着是块(块级元素)这个属性值:

这个属性值是比较有意思的,设置为块级元素独占一行,就换行来说和p标签的效果一样,但是这个属性值设置后,作为一个块级元素他就具备了宽,高,和别的块级元素的间距边缘着属性的设置,还有间距的设置填充,但是不能设置行高(行高)。

<强>还有inline-block(内联块)这个属性值:

这个属性值是比较强大的,本人刚开始学的时候基本上见到需要设置的只要不是换行的就会设置这个属性值,一来他可以作为块级元素,可以具有块的特性,另一方面,由于本人初学,对于居中的设置比较麻烦,所有使用这个属性值可以设置行高,从而使文字居中,方便易用。

对于这个导航栏的实现这几个属性很好用,主要用到块和inline-block这两个属性值,inline-block作为同一行的几个元素的实现,块做为元素间换行的实现。大家可以试试。

<强>对于最后一个没有这个属性值:

个人觉得用于隐藏元素比较方便,做那种鼠标浮动的时候更改显示的属性值来达到显示与隐藏元素的效果。

<强> HTML中显示一共有哪些比较常用的值呢,让我们一起来看看

HTML中显示在通常的项目开发中比较容易被使用的值主要有:

<李>

没有(元素不会被显示);

<李>

块(元素将显示为块级元素,元素前后会带有换行符);

<李>

内联(元素会被显示为内联元素,元素前后没有换行符);

<李>

inline-block(行内块元素.CSS2.1新增的值),

<李>

表(元素会作为块级表格来显示,类似& lt; table>,表格前后带有换行符);

<李>

作用是(元素会作为一个表格行显示,类似& lt; tr>);

<李>

表格单元(元素会作为一个表格单元格显示,类似& lt; td>和& lt; th>)。

<李>

显示实现的水平垂直居中!

利用位置和保证金进行元素水平垂直居中;想必大家还是比较熟悉,经常用的。但不知道你是否使用过显示:表与表格单元对元素进行水平垂直居中呢?

以下就是利用显示:表格单元进行元素水平垂直居中的的两种方法了:

<强> 1。利用显示:表与表格单元进行元素水平垂直居中

结构:

& lt; div类=皐rap"比; 　　& lt; div类=癰ox"祝辞　　& lt; div类=癱on"祝辞梦幻雪冰& lt;/div> 　　& lt;/div> 　　& lt;/div>

样式:

。包装{/*让元素以表格形式渲染*/显示:表; 　　身高:400 px; 　　宽度:400 px; 　　背景:#自由现金流量; 　　} 　　.box {/*让元素以表格的单元素格形式渲染*/显示:表格单元;/*使用元素的垂直对齐*/vertical-align:中间; 　　} 　　.con { 　　宽度:200 px; 　　身高:200 px; 　　保证金:0汽车; 　　背景:# 999; 　　}

优点:

这种方法不会像前面的两种方法一样,有高度的限制,此方法可以要据元素内容动态的改变高度,从而也就没有空间的限制,元素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。

缺点:

不足之处呢?这种方法只适合现代浏览器,在IE6-7下无法正常运行。

<强> 2。利用显示:表格单元进行元素水平垂直居中

结构:

& lt; div类=皐rap"比; 　　& lt; div类=癰ox"祝辞　　梦幻雪冰　　& lt;/div> 　　& lt;/div>

样式:

。包装{ 　　显示:表格单元; 　　宽度:400 px; 　　身高:400 px; 　　背景:#自由现金流量; 　　vertical-align:中间; 　　} 　　.box { 　　宽度:200 px; 　　身高:200 px; 　　保证金:0汽车; 　　背景:# 999; 　　}

优点:

这种方法的优点和方法三是一样的,不会有高度的限制。

缺点: