将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,height属性;而内联对象元素前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满,对inline元素设置width,height属性无效。

我们有个时候既希望元素具有宽度高度特性,又具有同行特性,这个时候我们可以使用inline-block。在CSS中通过display:inline-block对一个对象指定inline-block属性,简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

CSS display:inline-block的元素特点:

将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。(准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性)

CSS display:inline-block的元素特点:的更多相关文章

  1. CSS——display(Block none inline等)属性的用法

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...

  2. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  3. CSS display:inline和float:left两者区别探讨

     本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...

  4. [CSS3] CSS Display Property: Block, Inline-Block, and Inline

    Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...

  5. css 给inline和inline-block元素设置margin和padding

    经过简单的测试,行内元素或者行内块元素的maring-left,margin-right,padding-left,padding-right都是可以正常表现的,下面来看一下剩下的margin-top ...

  6. css display:inline

  7. DIV CSS display(block,inline,none)的属性教程

    display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...

  8. 大话css之display的Block未解之谜(一)

    用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 b ...

  9. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

随机推荐

  1. Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果

    Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果 在一个项目中,用到了时间轴展示产品的开发进度,为了更好用户体验,想到了Facebook的timeline效果, 搜了一 ...

  2. SQLSERVER用无中生有的思想来替代游标

    SQLSERVER用无中生有的思想来替代游标 SQLSERVER用无中生有的思想来替代游标 昨天在MSDN论坛看到一个帖子,帖子中LZ需要根据某列的值把其他列的值插入到额外列 帖子地址:http:// ...

  3. WCF学习笔记之事务编程

    WCF学习笔记之事务编程 一:WCF事务设置 事务提供一种机制将一个活动涉及的所有操作纳入到一个不可分割的执行单元: WCF通过System.ServiceModel.TransactionFlowA ...

  4. Go语言Web框架gwk介绍4

    Go语言Web框架gwk介绍 (四)   事件 gwk支持事件系统,但并没有硬编码有哪些事件,而是采用了比较松散的定义方式. 订阅事件有两种方式: 调用On函数或者OnFunc函数 func On(m ...

  5. 使用 IDEA 创建 Maven Web 项目 (二)- 搭建 WEB 项目框架

    转为 Java Web 项目 将上一节中创建的 Maven 项目调整为 WEB 项目结构,步骤如下: 在 main 目录下,添加 webapp 目录. 在 webapp 目录下,添加 WEB-INF ...

  6. 关于C/C++中的“auto”

    C/C++ 98标准 C++03标准 意思完全一样:auto被解释为一个自动存储变量的关键字,也就是申明一块临时的变量内存.auto的出现意味着,当前变量的作用域为当前函数或代码段的局部变量,意味着当 ...

  7. Oracle-11g 中创建物化视图

    html,body { font-size: 15px } body { font-family: Helvetica, "Hiragino Sans GB", "微软雅 ...

  8. Linux界面自动化测试框架不完全汇总

    首先可参考wiki此文,非常详尽:https://en.wikipedia.org/wiki/List_of_GUI_testing_tools 以下是我调研并实验过的(实验环境ubuntu 16.0 ...

  9. docker网络解析

    Docker概念和默认网络 什么是Docker网络呢?总的来说,网络中的容器们可以相互通信,网络外的又访问不了这些容器.具体来说,在一个网络中,它是一个容器的集合,在这个概念里面的一个容器,它会通过容 ...

  10. LightOJ 1030 Discovering Gold

    期望,$dp$. 设$ans[i]$为$i$为起点,到终点$n$获得的期望金币值.$ans[i]=(ans[i+1]+ans[i+2]+ans[i+3]+ans[i+4]+ans[i+5]+ans[i ...