zoukankan      html  css  js  c++  java
  • inline、block与inline-block

    参考了一些资料集其他人的博客,梳理一下inline、block与inline-block三个概念。

        高度 宽度 举例
    block 在新行上开始 高度,行高以及顶和底边距都可控制 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>
    inline 和其他元素都在一行上 高,行高及顶和底边距不可改变 宽度就是它的文字或图片的宽度,不可改变 <span>, <a>, <label>, <input>, <img>, <strong> 和<em>
    inline-block 对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

    ie浏览器不支持inline-block属性,使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表症。IE下,对块元素设置display:inline-block属性时,块元素仅仅是被display:inline-block触发了layout,而它本就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。解决:

    display:inline-block;

    *display:inline;

    *zoom:1;

  • 相关阅读:
    underscorejs
    使用CORS:跨域两三事
    line-height的小技巧
    深入探讨ES6生成器
    ES6生成器基础
    响应式网页
    javascript代码复用(四)-混入、借用方法和绑定
    javascript代码复用模式(三)
    javascript代码复用模式(二)
    jQuery基础事件
  • 原文地址:https://www.cnblogs.com/yangfang228/p/5951282.html
Copyright © 2011-2022 走看看