CSS的display小记


     最近开始了解一些CSS的基本用法,巩固下自己的前端知识积累。
     我们经常在样式中做类似如下的定义:

display:inline
display:block
display:none

     这里的 display:inline 可以让块级元素,变为行内元素,且元素前后没有换行符;比如:

<div> DIV1 </div> 
<div> DIV2 </div> 

默认情况下,这2个div各占一行,也就是显示为上下两行,当加上样式后:

<div style= "display:inline "> DIV1 </div> 
<div style= "display:inline "> DIV2 </div>

这样2个div就能显示在同一行了。说实话,我以前都是用浮动来控制的,嘿嘿嘿。

      和 display:inline 对应的是 display:block。block 将元素显示为块级元素,且元素前后会带有换行符。比如,span就是行内元素,如果加了display:block 样式之后,这2个span就会分两行显示了:

<span style= "display:block "> SPAN1 </span> 
<span style= "display:block "> SPAN2 </span> 

     display:inline经常用在将多个div像span一样显示在一行,或者在 <ul> 中 多个<li>显示为一行,因为ul也是块级元素,一个li占一行。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM