1).块状元素:(div,p,form,ul,ol,li) ,独占一行,默认情况width为100%

2).行内块状元素:(span,img,a),不会独占一行,相邻的元素一直排在同一行,排满了才会换行,不受..top..bottom的影响

3).display:行内,块状元素设置

display:block; ----将该元素设置为块状元素

display:inline-block;----将该元素设置为行内块状元素

  

 

display:block 和display:inline-block的区别和用法的更多相关文章

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

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

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

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

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

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

  4. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. display:inline、block、inline-block三者之间的区别

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

  6. [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 ...

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

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

  8. 区别CSS中display:box;inline;none以及HTML中 <frame> 标签<table> 标签的 frame 属性

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

  9. block,inline,inline-block的区别

    block: 英语翻译过来是“块”意思,就跟小时候玩过的积木方块一样,一块一块往上搭. inline: 英语翻译过来就是“内联”的意思,内联不好理解,我的理解就是行内元素: block和inline都 ...

  10. inline,block,inline-block解析

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

随机推荐

  1. Centos7中配置NIS:用户账号管理

    NIS:网络信息服务 Linux系统中用户按地域分两类:本地用户,远程用户(NIS.LDAP.AD)模式:C/S模式 ypbind是定义NIS服务器的客户端进程,一旦确定了服务器位置,客户端绑定到了服 ...

  2. C# 实例解释面向对象编程中的依赖反转原则

    在面向对象编程中,SOLID 是五个设计原则的首字母缩写,旨在使软件设计更易于理解.灵活和可维护.这些原则是由美国软件工程师和讲师罗伯特·C·马丁(Robert Cecil Martin)提出的许多原 ...

  3. md 中超链接的解析问题:解析`this.$set()`,`$`前要加空格或转义符 `\`

    在用 Editor.md 写文档时,插入超链接,发现一个奇怪的现象: 要想正确显示超链接,必须在 $ 前加空格或转义符 \

  4. Azure Devops(十五) 使用Azure的私有Maven仓库

    上一篇文章中,我们介绍了如何使用Azure的nuget仓库,今天我们来研究一下如何使用azure给我们提供的maven仓库. 首先,我们打开azureDevops,点击到制品界面,然后选择maven. ...

  5. JDBC与ODBC的区别

    JDBC简介JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,它是Java十三个规范之一.可以为多种关系数据库提供统一访 ...

  6. vue2自定义指令-加载指令v-loading和占位图指令v-showimg

    了解自定义指令的钩子函数 bind(){}:每当指令绑定到元素上的时候,就会立刻执行bind这个函数.只调用一次. 和css相关的操作,可以放在这个钩子函数中. inserted(){}:元素插入到D ...

  7. 巨变!a16z 关于新一代数据基础设施架构的深度洞察

    点击上方 蓝字关注我们 来源 | a16z 作者 | Matt Bornstein, Martin Casado,Jennifer Li 翻译 | 夕颜 作为未来最重要的基础设施之一,数据正在成为各行 ...

  8. 数据分表Mybatis Plus动态表名最优方案的探索

    一.应用场景 大家在使用Mybatis进行开发的时候,经常会遇到一种情况:按照月份month将数据放在不同的表里面,查询数据的时候需要跟不同的月份month去查询不同的表. 但是我们都知道,Mybat ...

  9. Luogu P3273 [SCOI2011]棘手的操作(左偏树)

    什么恶心东西啊,又水又烦 两个可并堆维护即可 #include <cstdio> #include <iostream> #include <cstring> #i ...

  10. html弹出二选一窗口,然后根据点击执行对应的js方法

    html弹出二选一窗口,然后根据点击执行对应的js方法 layer.confirm("我是弹出来的字", {btn:['确认','取消']}, function(){ ...方法1 ...