行内元素 inline，行内块元素 inline-block，块级元素 block 的区别

  • （可通过 display 属性相互切换） （三个都会自动换行）

padding 会挤压设置的宽高，实际宽高=设置宽高-padding eg. width:300px; padding:10px;则实际的盒子宽度=300-10-10=280px

  • inline：

    • 不会独占一行，
    • 没有宽高，宽高根据内容的变化而变化
    • margin 只可设置左右，无上下。
    • 可设置 padding 的上下左右

  • inline-block:

    • 不会独占一行
    • 有宽高
    • margin，padding 都有上下左右

  • block:

    • 独占一行
    • 有宽高，设置宽后仍独占一行
    • margin，padding 都有上下左右

display 属性区别的更多相关文章

  1. CSS 基础 例子 display属性：block、inline和inline-block的区别

    HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...

  2. 深入理解display属性

    display 属性在网页布局中很常见,但是之前一直不了解他的各个属性的区别,只是简单的使用block.none属性,对于其他属性都不清楚,今天详细的学习和实践display属性的各个方面 定义 di ...

  3. Code笔记之：CSS+HTML display 属性

    display属性值:none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-bl ...

  4. display & visibility区别

    http://www.cnblogs.com/zhangran/archive/2012/08/29/2662459.html 说明:在学习css的过程中由于其中包含太多的元素.属性等等,总有许多是自 ...

  5. 转: 详解css中的display属性

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

  6. 块级元素行内元素以及display属性

    1.什么叫做标签语义化? ->合理的标签做合适的事情 ->HTML中常用的标签都有哪些? (块状标签和行内标签) ->块状标签和行内标签的区别? (常用的有8条区别) 1)内联元素: ...

  7. css常用属性之display属性

    1.dispaly属性之一:块级标签转行内便签display: inline(内容有多大,就展示多大(用F12看区别)) 2.display属性之二:行内便签转块级标签:diaplay: block ...

  8. Display属性学习总结

    HTMl元素根据表现形式,常见的可以分为两类. (1)块元素(block) (2)行内元素(inline). 当然,除了以上两种元素类型外,还有inline-block.table-cell等元素类型 ...

  9. CSS学习笔记：display属性

    目录 一.display属性概述 1. 块级元素和行内元素的区别 2.常见的块级元素和行内元素 3. display属性常见的属性值 二.测试display取各属性值的效果 1. 测试inline和b ...

  10. 边框 display属性 盒子模型 浮动 溢出 定位 z-index

    目录 边框 隐藏属性 钓鱼网站 display visibility 盒子模型 调整方式 浮动 溢出 圆形头像的制作 定位 z-index属性 边框 /*border-left-width: 5px; ...

随机推荐

  1. git prior sync failed; rebase still in progress

    方案一: 将这个git直接删掉,rm common/ -rf 然后再回到项目根目录repo sync 方案二: git rebase --abort

  2. 一篇教会你写90%的shell脚本

    原文链接  : https://zhuanlan.zhihu.com/p/264346586 shell是外壳的意思,就是操作系统的外壳.我们可以通过shell命令来操作和控制操作系统,比如Linux ...

  3. <CONTAINING_RECORD宏>引发的<结构体深度剖析(内存对齐，对齐参数，偏移量)>

    什么是结构体内存对齐?为什么要对齐?怎样对齐? 结构体内存对齐:元素是按照定义顺序一个一个放到内存中去的,但并不是紧密排列的. 从结构体存储的首地址开始,每个元素放置到内存中时,它都会认为内存是按照自 ...

  4. flutter SafeArea和SliverSafeArea，适应特殊屏幕

    现如今的手机已经不能提供给应用程序规整的矩形界面了,一些带圆角或者是刘海屏让应用程序的布局更加复杂,甚至是需要单独适配,这对开发者来来太糟糕了. 因此SafeArea控件应用而生,SafeArea通过 ...

  5. 使用layui+jQuery实现点击数据修改，即点即改。

    使用layui+jQuery实现点击数据修改即可修改 首先要用到layui的官网手册 地址:https://www.layui.com/ 注意1.  此功能是在使用layui展示数据的基础上实现 3. ...

  6. （0514）python学习-思维导图

  7. 杂：python获取所有盘符简单粗暴版

    def _test_p_get_all_driver():    l = []    for i in range(97, 123):        d = chr(i) + ':\\'        ...

  8. MyBatis_03(核心配置文件解析)

    核心配置的文件的"详解" -->(优化,核心配置文件) "核心配置文件的前言": 核心配置文件中的标签必须按照固定的顺序 ---> ("有 ...

  9. 提取可执行文件中的调试信息 objcopy --only-keep-debug app app.debug

    https://blog.csdn.net/CaspianSea/article/details/17269977 set-debug-directory show-debug-directory i ...

  10. SpringBoot整合MyBatis-Plus详细使用方法

    SpringBoot整合mp 一.添加依赖pom.xml <dependency> <groupId>mysql</groupId> <artifactId& ...