display:inline的用法

2021-03-12 22:04 jianzhan
<div> DIV1 </div>
<div> DIV2 </div>
这里DIV1和DIV2各自占1行,可是你给她们再加特性后变了
<div style= "display:inline "> DIV1 </div>
<div style= "display:inline "> DIV2 </div>
DIV1和DIV2这时候候显示信息在同1行了,试一试吧

和 display:inline 对应的是 display:block,block 会让运用了该 CSS 特性的 HTML 标识变为块级別元素,比如 SPAN 是行内显示信息的,可是你加了 display:block 特性就不1样了
<span style= "display:block "> SPAN1 </span>
<span style= "display:block "> SPAN2 </span>

display:inline较为經典的用法是用在 <ul> 下的 <li> 中
内联
block1般1个块占1行,除非float
inline是全自动排为1行,就象段内的文本1样,可变成多行。

display:inline 的功效是设定目标作为行内元素显示信息,
inline是内联目标的默认设置值(ps:内联目标便是不全自动造成换行的元素,例如span)
而大家1般用的div是块级元素,默认设置display特性是block,
但将div的display设定为inline的话,则好几个div能够象span1样显示信息在1行了。

提议楼主在网络上下个css协助手册
display特性
block :  CSS1 块目标的默认设置值。将目标强制性做为块目标呈递,为目标以后加上新行
none :  CSS1 掩藏目标。与 visibility 特性的hidden值不一样,其不为被掩藏的目标保存其物理学室内空间
inline :  CSS1 内联目标的默认设置值。将目标强制性做为内联目标呈递,从目标中删掉行
inline-block :  IE5.5 将目标呈递为内联目标,可是目标的內容做为块目标呈递。周围的内联目标会被呈递在同1行内
compact :  CSS2 未适用。分派目标为块目标或根据內容之上的内联目标
marker :  CSS2 未适用。特定內容在器皿目标以前或以后。要应用此主要参数,目标务必和 :after 及 :before 伪元素1起应用
inline-table :  CSS2 未适用。将报表显示信息为无前后左右换行的内联目标或内联器皿
list-item :  CSS2 将块目标特定为目录新项目。并能够加上可选新项目标示
table-caption :  CSS2 未适用。将目标做为报表题目显示信息
table-cell :  CSS2 未适用。将目标做为报表模块格显示信息
table-column :  CSS2 未适用。将目标做为报表列显示信息
table-column-group :  CSS2 未适用。将目标做为报表列组显示信息
table-header-group :  CSS2 将目标做为报表题目组显示信息
table-footer-group :  CSS2 将目标做为报表脚注组显示信息

display:inline 对应无法显示为 display:none
display:block 对应无法显示为 hidden
说通俗化点 款式为none的元素不占部位,而款式为hidden的元素尽管无法显示但還是占地区。