行内元素 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. react native SectionList组件实现多选

    如下图所示: 代码如下: import React, { useRef, Component } from 'react'; import { Platform, Text, View, TextIn ...

  2. git远程分支回退到某个版本

    1.找到要回退的版本号(右击项目--> Git --> Show History -->选中要回退的版本-->Copy Revision Number): 2.打开idea的T ...

  3. Ubuntu 20.04 ：“a start job is running for hold until boot process finishes”

    A start job is running for Hold until boot process finishes up (xxx min xxx s/no limit) ubuntu20.04开 ...

  4. 莫凡Python 3

    莫凡Python 3 新建模板小书匠 CNN 卷积神经网络 参考资料 https://morvanzhou.github.io/tutorials/machine-learning/keras/2-3 ...

  5. 15、java递归解决迷宫问题

    递归真是一个.看着简单,听着简单,写不出来,想不到.以前也不是不理解递归,也不是看不懂递归的代码,但说实话真的很难想到自己去用这个递归也很难理清楚这个递归到底从哪里开始到哪里结束,将哪个步骤作为 一个 ...

  6. KingbaseES V8R3集群维护案例之---pcp_node_refresh应用

    案例说明: 在一次KingbaseES V8R3集群切换分析中,运维人员执行了pcp_node_refresh,导致集群发生了failover的切换.此文档对pcp_node_refresh工具做了应 ...

  7. ubuntu 的 apt 命令

    工作原理 apt 全称 advanced packaging tool 是 ubuntu 下的包管理工具 apt 采用集中式仓储机制来管理软件,有 软件安装包 和 软件安装列表 两部分完成. 使用 a ...

  8. Node.js 源码解读 EventLoop

    之前断断续续开发过一些 Node.js 的项目,但只仅限于使用它实现一些功能,没有过多对底层深入的研究.现在因为公司大前端组内的服务端渲染直出.BFF(Backend For Frontend) 等需 ...

  9. postgresql添加系统表报错

    1.添加系统表后,执行make install报如下错误,未自动生成下面两个文件cp: cannot stat './catalog/ux_user_status_d_compatible.h': N ...

  10. usb 2.0枚举过程

    device枚举过程: hub枚举过程: