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

时间:2022-10-09 17:02:43

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

在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. javascript星级评分(多个)

    JS打多个类型星级评分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  2. UDS&lpar;ISO14229-2006&rpar; 汉译&lpar;No&period;5 公共约定&rpar;

    ISO 14229遵循OSI Service Conventions(ISO 10731)(OSI服务公约)所述,并应用于诊断服务.这些约定指定相互作用与服务消费者和服务提供者.通过服务原语,信息数据 ...

  3. 用ConfigParser模块读写配置文件——Python

    对于功能较多.考虑用户体验的程序,配置功能是必不可少的,如何存储程序的各种配置? 1)可以用全局变量,不过全局变量具有易失性,程序崩溃或者关闭之后配置就没了,再者配置太多,将变量分配到哪里也是需要考虑 ...

  4. HTML5学习记录1-新特性

    新特性 HTML5 中的一些有趣的新特性: 1. 用于绘画的 canvas 元素 2. 用于媒介回放的 video 和 audio 元素 3. 对本地离线存储的更好的支持 4. 新的特殊内容元素,比如 ...

  5. &lbrack;cc150&rsqb; check palindrome of a singly linked list

    Problem: Implement a function to check if a singly linked list is a palindrome. 思路: 最简单的方法是 Reverse ...

  6. HDU 2570:迷瘴

    迷瘴 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submiss ...

  7. nginx flv点播服务器搭建

    首先选用Nginx+Nginx-rtmp-module作为点播服务器,安装文章:https://www.atlantic.NET/community/howto/install-rtmp-ubuntu ...

  8. 最课程阶段大作业之01:使用SVN实现版本控制

    版本控制在友军那里都是放在整个培训的最后阶段才开始讲的,但我们打算放到SE阶段.与其匆匆在项目实战阶段弄个半生不熟,然后进入实际工作中接受他人对你的怀疑,不如……早死早超生~~~. 可是,我们毕竟现在 ...

  9. JVM异常之:栈溢出*Error

    在java虚拟机规范中,虚拟机栈和本地方法栈都会出现*Error和OutofMemoryError,程序计数器是java虚拟机中唯一一块不会产生error的内存区域. 一.St ...

  10. Linux服务器---安装Tomcat

    安装Tomcat Tomcat作为web服务器实现了对servlet和jsp的支持,centos目前不支持yum方式安装.在使用Tomcat之前,确保你已经安装并配置好了jdk,而且jdk的版本要和t ...