• css学习inlineblock详解及dispaly:inline inlineblock block 三者区别精要概括


    *知识储备:

    内联元素:是不可以控制宽和高、margin等;并且在同一行显示,不换行。


    块级元素:是可以控制宽和高、margin等,并且会换行。

    1.inline-block 详解

    (1)一句话就是在CSS中通过display:inline-block对一个对象指定inline-block属性,可以将对象呈递为内联对象,但是对象的内容作为块对象呈递。

    在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,height属性;而内联对象元素前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满,对inline元素设置width,height属性无效。
    我们有个时候既希望元素具有宽度高度特性,又具有同行特性,这个时候我们可以使用inline-block

    (2)浏览器兼容性问题:

    那么为了能够让所有浏览器支持display:inline-block,综合一下,最终的实现代码如下:
    display:inline-block; /*一方面Firefox3 beta、IE8 beta、Opera、Safari 支持,另一方面下触发IE下inline 元素的 hasLayout*/
    display:-moz-inline-stack; /* Firefox 的私有属性,需要时还必须用到position:relative解决上面提到的bug */
    zoom:1; /*同样是IE 下触发 hasLayout*/
    *display:inline; /*一旦IE 下触发了 hasLayout,设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似*/

    2.dispaly:inline inline-block block 三者区别精要概括

    inline:使用此属性后,元素会被显示为内联元素,元素则不会换行。
    block:使用此属性后,元素会被现实为块级元素,元素会进行换行。
    inline-block:是使元素以块级元素的形式呈现在行内。意思就是说,让这个元素显示在同一行不换行,但是又可以控制高度和宽度,这相当于内敛元素的增强。

  • 相关阅读:
    【转】#pragma pack(push,1)与#pragma pack(1)的区别
    emwin 之变量定义位置
    【转】C语言字符串与数字相互转换
    【转】用emWin进度条控件做个表盘控件,效果不错
    emwin 之消息 WM_INIT_DIALOG
    emwin 之使用键盘数据发送函数的注意事项
    emwin 解决在A窗口上新建B窗口后‘只激活’B窗口问题
    【转】数学与编程——求余、取模运算及其性质
    hdu4831 Scenic Popularity(线段树)
    2014年百度之星程序设计大赛
  • 原文地址:https://www.cnblogs.com/jerry666/p/5223409.html
Copyright © 2020-2023  润新知