zoukankan      html  css  js  c++  java
  • 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占一行。

    作者:牦牛
    出处:http://maoniu602.cnblogs.com/
    关于:我等因无形而恐惧,于是挥下刀刃,以假面之名......
    说明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    奔跑的绵羊js
    13.差分
    12.子矩阵的和
    11.前缀和
    10.高精度除法
    9.高精度乘法
    8.高精度减法
    7.高精度加法
    6.数的三次方根
    5.数的范围
  • 原文地址:https://www.cnblogs.com/maoniu602/p/2924564.html
Copyright © 2011-2022 走看看