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. GDOI 2022 普及组游记

    To LuoguDAY -1 期中考成绩下来了,全无了除了历史 (96) 和生物 (95) 还能看,剩下的-,语文 101.5 ,少错一道选择和断句就 107.5 了,居然比雌兔还低 数学少错一道选择 ...

  2. YII自定义第三方扩展

    cat.php <?php /** * Created by PhpStorm. * Date: 2016/5/25 * Time: 15:23 */ namespace vendor\anim ...

  3. 使用Docker-compose来封装celery4.1+rabbitmq3.7服务，实现微服务架构

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_115 大家都知道,Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统,在之前的一篇文章中:python3.7+Torn ...

  4. .NET静态代码织入——肉夹馍（Rougamo） 发布1.1.0

    肉夹馍(https://github.com/inversionhourglass/Rougamo)通过静态代码织入方式实现AOP的组件,其主要特点是在编译时完成AOP代码织入,相比动态代理可以减少应 ...

  5. Java8新特性: CompletableFuture详解

    CompletableFuture实现了CompletionStage接口和Future接口,前者是对后者的一个扩展,增加了异步回调.流式处理.多个Future组合处理的能力,使Java在处理多任务的 ...

  6. 使用java随机生成有个性的用户名,LOL地名+水浒传,合计2808个有意思的用户名

    * 随机生成用户名 * 取水浒传108好汉名字 * 取LOL地名26个,组合而成 * 一共可以生成2808个不同特色的用户名 如果你在上网的时候,用户名难取的话,这里有很多可选择的用户名,现提供100 ...

  7. Ubuntu 20.04安装Docker

    Docker学习系列文章 入门必备:十本你不容错过的Docker入门到精通书籍推荐 day1.全面的Docker快速入门教程 day2.CentOS 8.4安装Docker day3.Windows1 ...

  8. 完成 DolphinScheduler 新手任务赢好礼活动 | 倒计时3 天

    想轻松参与 DolphinScheduler 项目贡献吗? 想获得 500 元京东购物卡吗? 参与活动,有机会得更多活动奖励! 活动截止至6月30日 了解更多详情: 在你参与 DolphinSched ...

  9. Apache DolphinScheduler 如何从 1.2.1 升级到 1.3.4

    关于 Apache DolphinScheduler Apache DolphinScheduler(incubator) 于 17 年在易观数科立项, 19 年 8 月进入 Apache 孵化器,已 ...

  10. git submodule 实战

    1.git submodule指什么 关于git submodule是什么,可以看下面这个链接. https://www.cnblogs.com/hwx0000/p/14146838.html 2.g ...