zoukankan      html  css  js  c++  java
  • 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:是使元素以块级元素的形式呈现在行内。意思就是说,让这个元素显示在同一行不换行,但是又可以控制高度和宽度,这相当于内敛元素的增强。

  • 相关阅读:
    06-python基础-基本数据类型介绍
    05 python开发的IDE之一--pycharm以及基本的运算符
    04 python基础-变量及如果语句的作业
    03 python基础-变量
    02 python的安装及分类
    es6的标签整体引用及引入变量
    django之auth组件【知识点补充】
    BootStrap让两个控件在一行显示(label和input同行)
    django 将view视图中的对象传入forms表单验证模块中
    Django ajax异步请求分页的实现
  • 原文地址:https://www.cnblogs.com/jerry666/p/5223409.html
Copyright © 2011-2022 走看看