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. “Hello World!团队”Final发布—视频链接+文案+美工

    视频发布:http://www.bilibili.com/video/av17022373/ 文案加美工:http://www.cnblogs.com/chjy/p/7990116.html SkyH ...

  2. Daily Scrum (2015/10/29)

    今天晚上我们学霸项目的三个小组在一起开会,讨论如何能在后期使我们三个项目更好地结合在一起.为了三个小组的能够同时工作,不出现某一小组因需要其他小组成果而停滞的情况,我们决定围绕lucene,solr, ...

  3. Daily Scrumming* 2015.10.25（Day 6）

    一.总体情况总结 1.UI今日总结:初步设计了社团详情界面 2.后端今日总结:讨论并设计数据库,表内容,属性和相互联系等,并在rails的activeRecord和activeModel中实现,同时设 ...

  4. web 08 struts2入门 struts2配置 struts包

    电影网站:www.aikan66.com 项目网站:www.aikan66.com游戏网站:www.aikan66.com图片网站:www.aikan66.com书籍网站:www.aikan66.co ...

  5. Go Going软件需求规格说明书

    1.目标是什么,目标不包括什么? 我们软件的目标是让大学生走出校园,用最小的花费到更多的地方去,开阔视野,读万卷书再行万里路. 目标暂且不包括外校学生 2.用户和典型场景是什么? 用户:在校大学生 典 ...

  6. ORACLE_SQL

    --建立学生表create table Student (       Sno char(9) primary key,       Sname char(20)unique,       Sex  ...

  7. 软工实践-Beta 冲刺 （3/7）

    队名:起床一起肝活队 组长博客:博客链接 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过去两天完成了哪些任务 描述: 1.界面的修改与完善 展示GitHub当日代码/文档签入记 ...

  8. HDU 4336 Card Collector 期望dp+状压

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4336 Card Collector Time Limit: 2000/1000 MS (Java/O ...

  9. mongo导入导出命令

    1.导出工具:mongoexport     1.概念:         mongoDB中的mongoexport工具可以把一个collection导出成JSON格式或CSV格式的文件.可以通过参数指 ...

  10. 评论alpha发布

    第一组:新蜂小组 题目:俄罗斯方块 评论:很荣幸被邀请体验此游戏,感到加速下落时不是很灵敏,没有计分,页面不够美观(据说还在改善),整体框架已完成,基本功能已具备. 第二组:天天向上 题目:连连看 评 ...