行内元素 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. 那些年我们用过的xshell小彩蛋

    优化PS1变量 vi /etc/profile.d/ps1.sh _set_prompt () { #see: http://misc.flogisoft.com/bash/tip_colors_an ...

  2. 078_Sublime HaoIDE 搭建 Lightning Aura环境

    随着 Classic 不断的向 1 .HaoIDE->Setting->User Setting 请把以下内容copy进去,修改账号密码token以及项目名称,例子中列举了两个Projec ...

  3. 修改jar包内容

    列举jar包内容 # 列举jar包所有文件 jar tvf test.jar 从jar包中提取文件 # 从test.jar中提取test.jar/test.txt到test.txt jar xvf t ...

  4. java实现读取json文件指定字段值

    使用场景 现有一个大数据的json文件,每条数据有多层数据信息.现在想把其中某个字段提取并叠加计算. json文件格式 1 { 2 "MsgID":"111", ...

  5. 简单的自动清理TIM/QQ聊天垃圾文件方案

    我平时喜欢在后台挂着Tim,时间一长,我发现数据文件夹会越来越大,即使我没有看过这些消息(多为群聊消息),为了不再惦记清理垃圾文件,我整理了以下方案,可以每天清理一次7天前的文件. 1. 在磁盘任意位 ...

  6. Git探究

    Git Git是什么? Git是一个开源的分布式版本控制系统. 1.什么是版本控制? 字面意思,控制版本,存储.追踪目录和文件的修改历史.市面上有各式各样的版本控制工具,比较常用的SVN.Git等等. ...

  7. java中Atomic变量的实现原理是怎样的？

    转载自: Java3y https://www.zhihu.com/question/39130725/answer/1006948362 一.基础铺垫 首先我们来个例子: public class ...

  8. 为什么 .NET应用推荐使用 await、async异步编程？

    前言 1.什么是async/await? await和async是.NET Framework 4.5框架.C#5.0语法里面出现的技术,目的是用于简化异步编程模型. 2.async和await的关系 ...

  9. TP3.2.x判断手机端访问，同一个域名在PC和手机端展示不同模板(半独立式网站)

    首先介绍APP_STATUS内置常量,TP入口文件增加APP_STATUS 参数,  自动加载不同的项目配置文件,通过配置文件指向不同的模块 手机端访问时调用Wap手机模块,实现在手机端访问时展示出手 ...

  10. Linux环境下给python项目写个启停服务

    写个服务,写完后放在/lib/systemd/system路径下 update_rule.server [Unit] Description = TinyScan update rule [Servi ...