inline-block 与 inline 的区别：

　　inline-block 与inline 效果类似，但是inline-block是可以设定宽度和高度的！！而行内元素（也就是inline）是无法设置宽度和高度的，因宽度和高度仅仅对块元素生效。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .a{

            width: 200px;

            background-color: grey;

        }

    </style>

</head>

<body>

<div class="a"><p>hello world</p></div>

<span class="a">hello world</span>

</body>

</html>

浏览器显示结果：

css--display属性中inline-block与inline的区别的更多相关文章

  1. CSS中的display属性（none,block,inline,inline-block,inherit）

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

  2. css display属性详解

    css display属性在对css做layout设计时非常重要,它的值有以下几种: Value Description Play it inline Default value. Displays ...

  3. Css 中的 block，inline和inline-block概念和区别

    1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现 ...

  4. CSS display 属性

    实例 使段落生出行内框: p.inline { display:inline; } 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOCTYPE,则 Internet Explor ...

  5. CSS display属性的值及作用

    display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|tab ...

  6. 把display 属性改为block样式变化问题

    可能的值 值 描述 none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-blo ...

  7. CSS Display属性与盒模型

    由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box ...

  8. CSS display属性学习

    ---恢复内容开始--- http://www.w3school.com.cn/cssref/pr_class_display.asp 所有主流浏览器都支持 display 属性,如IE,Firefo ...

  9. css display属性

    C:内联元素加上display:block后被块级化.块级元素一般是其他元素的容器,可容纳内联元素和其他块状元素,块级元素排斥其他元素与其位于同一行,width和height起作用.因此,可以定义其宽 ...

  10. CSS display 属性详解

    定义display 属性设置是否及如何显示元素. 继承性: No 说明 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不 谨慎会很危险,因为可能 ...

随机推荐

  1. Dao DaoImp

    DAO层:DAO层主要是做数据持久层的工作,负责与数据库进行联络的一些任务都封装在此,DAO层的设计首先是设计DAO的接口,然后在Spring的配置文件中定义此接口的实现类,然后就可在模块中调用此接口 ...

  2. No.11_功能规格说明书

    功能规格说明书 • 基本目标 为用户提供更加便捷和人性化的闹钟提醒服务,以群组为单位规划时间安排与分配,对于个人用户,实现个人的设置闹钟,取消闹钟的操作,这些操作将会上传至数据库,并被同步到所有的客户 ...

  3. Beta 冲刺1

    队名:日不落战队 安琪(队长) 过去两天完成了那些任务 修改个人信息界面. 修改手写涂鸦界面. 接下来的任务 改进手写涂鸦,加入其他功能. 还剩下的任务 社交模块功能. 遇到的困难 无. 有哪些收获和 ...

  4. struts2 jsp提交对象数据要这么干

    不要每个属性都 setter getter .. 这样页面很难看... 直接 把对象变成一个成员变量会比较好. Java code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  5. 第一次spring冲刺第8天

    针对这几天出现的问题,我们团队做了用户需求讨论. 1.客户类型:工作者为主,其他类型都适用的计算器软件 2.需求与满足:他们想要的是能使用简单,并且适用于工作上 3.满足度:最好后台可以提供意见反馈, ...

  6. Week2-作业一——《构建之法》三章精读之想

    Week2-作业一——精读<构建之法> 前言 其实我本人是不经常看书的,电子书倒是看了不少,实体书真的不经常看,但是为了这次作业的需求,我还是选择静下心来阅读一下这本<构建之法> ...

  7. appium遇到问题总结（不断更新）

    问题1 执行脚本 报错: java.lang.NoSuchMethodError: org.openqa.selenium.remote.ErrorHandler.<init>(Lorg/ ...

  8. [转帖]InfiniBand 主流厂商 和 产品分析

    InfiniBand 主流厂商 和 产品分析   Mellanox成立于1999年,总部设在美国加州和以色列,Mellanox公司是服务器和存储端到端连接InfiniBand解决方案的领先供应商.20 ...

  9. Nginx和Apache区别

    Nginx VS  Apache 相同点: 1.都是HTTP服务器软件 2.功能上都采用模块化结构设计 3.都支持通用的语言接口,如PHP.Perl.Python等 4.支持正向.反向代理.虚拟主机. ...

  10. Spyder & Python

    Spyder & Python https://pypi.org/project/spyder/ Spyder is a powerful scientific environment wri ...