1、display:block将元素显示为块级元素,从而可以更好地操控元素的宽高,以及内外边距,每一个块级元素都是从新的一行开始。
2、display : inline将元素显示为行内元素,高度,行高以及底边距不可改变,高度就是内容文字或者图片的宽度,不可以改变。多个相邻的行内元素排在同一行里,知道页面一行排列不下,才会换新的一行。
3、display:inline-block看上去值名inline-block是一个混合产物,实际上确是如此,将元素显示为行内块状元素,设置该属性后,其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block,使其既有block的宽度高度特性,又有inline的同行特性,在同一行内有不同高度内容的元素时,通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。

display:inline-block,block,inline元素的区别的更多相关文章

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

    一.块级元素 与  行级元素 要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫 ...

  2. HTML5 display:inline、block、inline-block的区别--备用

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

  3. display:inline、block、inline-block的区别(转)

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

  4. display:inline-block,block,inline的区别与用法

    一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置   margi ...

  5. display:inline、block、inline-block区别

    display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...

  6. display:inline、block、inline-block的区别(摘抄)

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

  7. display:inline、block、inline-block的区别 摘】

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

  8. (转载)display:inline、block、inline-block的区别

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

  9. block(块级元素)和 inline(内联元素) 的区别

    block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...

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

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

随机推荐

  1. 如何在SimpleNVR用Excel表格将通道配置简单化

    进入本世纪的第三个十年,流媒体们"绞尽脑汁",依靠技术不断提升用户的体验感.熟悉SimpleNVR的用户都知道,目前SimpleNVR已实现对接自有流媒体服务器平台,不限制观看人数 ...

  2. ARM汇编解决阶乘以及大小写转换

    环境以及硬件 一.硬件仿真基于 SAMSUNG's S3C44B0X 16/32-bit RISC microprocessor 芯片,仿真器为 J-LINK 二.编写指令软件为 Integrated ...

  3. 第三课 Dubbo设计中的设计模式

    责任链模式  责任链模式在Dubbo中发挥的作用举足轻重,就像是Dubbo框架的骨架.Dubbo的调用链组织是用责任链模式串连起来的. 责任链中的每个节点实现Filter接口,然后由ProtocolF ...

  4. 在linux 环境下 安装php

    最近打算学写一个php 脚本~ 到了虚拟机环境上发现~没有环境. 只有老老实实去装一个php环境咯. 第一步 去官网下一个包 记得一定要下载tgz格式的 第二步~当然是传上虚拟机上咯~任意目录都可以. ...

  5. C# 复制目录及其下文件

    public static void CopyDirectory(string sourceDirPath, string saveDirPath) { try { if (!Directory.Ex ...

  6. <C#任务导引教程>练习三

    /*Convert.ToInt("213165");int a=12345;string sn=a.ToString();//把a转换成字符串snint b=int.Parse(s ...

  7. 看动画学算法之:hashtable

    目录 简介 散列表的关键概念 数组和散列表 数组的问题 hash的问题 线性探测 二次探测 双倍散列 分离链接 rehash 简介 java中和hash相关并且常用的有两个类hashTable和has ...

  8. [loj3052]春节十二响

    首先可以发现对于两条链来说,显然是对两边都排好序,然后大的配大的,小的配小的(正确性比较显然),最后再加入根(根只能单独选)这个结果其实也可以理解为将所有max构成一条新的链,求出因此,对于每一个结点 ...

  9. [atAGC106E]Medals

    暴力二分答案+网络流,点数为$o(nk)$,无法通过 考虑Hall定理,即有完美匹配当且仅当$\forall S\subseteq V_{left}$,令$S'=\{x|\exists y\in V_ ...

  10. 数字逻辑实践4->面向硬件电路的设计思维--FPGA设计总述

    本文是对实验课上讲解的"面向硬件电路的设计思维"的总结,结合数字逻辑课本,进行提炼和整理. 主要来源是课件与本人整理,部分参考了网络大佬的博客. 本文主要介绍不同于之前软件设计思维 ...