• css 内联与块


    内联元素可以理解为不能直接设置宽度和高度元素,比如span,你为他设置宽度和高度没有效果,除非你把它设置成块级元素。

    如下面的代码把display:block;属性值去掉的话,宽度和高度都不会起作用了。

    1
    <span style="100px;height:100px;display:block;"></span>

    margin可以控制内联和块级元素的间距,而不光是内联元素。

    主要注意他们之间的转换问题,如块级元素加float属性会变为内联元素。

    --------------------------------------------------------------------------------------------------------------------

    display使用的最多属性值为:block(块级元素),inline(内联元素),inline-block(内联块元素)

    通俗易懂的说:

    块级元素(block):可以设置宽高,margin,padding值等;

    1
    2
    <div>我是块级元素DIV!</div>
    <p>我是块级元素P!</p>

    上面的显示的结果:

    1
    2
    我是块级元素DIV!
    我是块级元素P!

    内联元素(inline):不可以设置宽高,margin,padding值等;

    1
    2
    <span>我是内联元素SPAN!</span>
    <em>我是内联元素EM!</em>

    上面显示的结果(会在一排显示,这时你设置的宽高,margin,padding值都不起作用):

    1
    我是内联元素SPAN!我是内联元素EM!

    内联块元素(inline-block):可以设置宽高,margin,padding值

    1
    2
    <span>我是内联元素SPAN!</span>
    <em>我是内联元素EM!</em>

    css:

    1
    span,em { padding0 5pxdisplay: inline-block;}

    上面显示的效果会在一排,但是同时宽高,margin,padding值也起作用;

    1
     我是内联元素SPAN!  我是内联元素EM!
    645405967@qq.com
  • 相关阅读:
    简单工厂模式_C#_设计模式
    单例模式_C#设计模式
    快速排序_排序算法_算法
    关于缓存C#
    网络编程的4种IO模型
    一些自己总结
    驱动漏洞中的__try和ProbeForRead
    poj2318
    poj1113
    poj 1904
  • 原文地址:https://www.cnblogs.com/allensun-193/p/5496611.html
Copyright © 2020-2023  润新知