行内元素 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. [vite] Internal server error: Invalid end tag.

    使用vue3+vite+ant搭建的前端框架 在开发页面的时候发现了一直报错: [vite] Internal server error: Invalid end tag. 找也找不到为什么,网上查的 ...

  2. 【SSO单点系列】（9）：CAS4.0 之客户端排除不需要过滤的路径

    客户端排除不需要过滤的路径 Web.xml <filter> <filter-name>CASFilter</filter-name> <filter-cla ...

  3. pycharm字体大小设置

    首先有两个方法 一个是滚轮放大缩小,一个是固定的字体大小. 调为固定的字体大小: 菜单栏:file--setting--editor--font--size 修改为需要大小字号,例如20,点击ok 滚 ...

  4. Jenkins+Git+Gitlab+Ansible 持续集成和自动部署

  5. [localhost-startStop-1]

    第一次遇到Tomcat在Linux服务器启动卡住的情况,情况很简单,tomcat启动以后卡在INFO: Deploying web application directory ......这句话,具体 ...

  6. JavaScript基本知识整理（基本包装类型）

    基本包装类型 为了方便地操作基本类型变量,ECMAScript规定了3个特殊引用类型分别是Boolean,Number和String. 这三种特殊引用类型同时具有基本类型和引用类型的功能,当我们读取一 ...

  7. global 函数

    x = 15 # 全局变量Gdef func_a(): print(x)def func_b(): print(x)def func_c(): global x # 在定义函数内声明x为全局变量后,才 ...

  8. jekins 入门

    环境安装 gitlab 安装 使用 docker 安装 gitlab docker run -d --name gitlab --restart always --hostname gitlab.zd ...

  9. ASPNETCORE托管/部署到WindowService的问题[服务显示正在启动]

    上述代码是asp.net core web api 3.1,使用Topshelf框架构建windows服务. 安装服务后,服务功能运行正常,但服务状态一直处于"正在启动",不能接收 ...

  10. SQL server数据库中nvarchar和varchar的区别

    先说结论: 存储内容含有汉字的使用nvarchar 存储内容全是英文没有汉字的使用varchar 1.varchar是非Unicode可变长度类型,nvarchar是Unicode可变长度类型. 2. ...