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. 解决 vuex mapGetters 语法报错 （Unexpected token ）

    在使用vuex2的mapGetters 和 mapActions 的方法时,借助 stage2 的 Object Rest Operator 特性,可以写出下面代码:  computed: { ... ...

  2. 微信公众号开发笔记1(nodejs开发)

    本篇记录了微信公众号开发的一些笔记 一.微信服务器与我们服务器的交流 微信开发者拥有自己的服务器,在我们服务器上可以与微信服务器进行交流.既然可以交流,那就必定需要前提条件(微信认证),也就是说,只有 ...

  3. Final冲刺贡献分

    小组名称:Hello World! 项目名称:空天猎 组长:陈建宇 成员:刘成志.刘耀泽.刘淑霞.黄泽宇.方铭.贾男男 一.贡献分数规则: (1)基础分:5 , 4 ,4 , 3 , 2 ,2 ,1. ...

  4. wcf的DataContractAttribute与DataMenmberAttribute

    文章:序列化和反序列化的几种方式(DataContractSerializer)(二) 介绍了序列化控制细节.哪些字段可以序列化,序列化后这些字段的名字.

  5. SqlHelper类的编写

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  6. 为phpstorm安装右侧代码预览工具

    打开设置界面,进入到plugins页面,然后再搜索codeglance,然后点击安装即可.

  7. SQLSERVER 使用XP开头的系统默认存储过程

    1. 根据官网上面的内容进行执行命令 EXEC xp_cmdshell 'dir *.exe'; 但是会报错 消息 ,级别 ,状态 ,过程 xp_cmdshell,行 [批起始行 ] SQL Serv ...

  8. ACM数论之旅9---中国剩余定理(CRT)（壮哉我大中华╰(*°▽°*)╯）

    中国剩余定理,又名孙子定理o(*≧▽≦)ツ 能求解什么问题呢? 问题: 一堆物品 3个3个分剩2个 5个5个分剩3个 7个7个分剩2个 问这个物品有多少个 解这题,我们需要构造一个答案 我们需要构造这 ...

  9. ng-include 上ng-controller 无法获取控件

    A.Html内容如下 <div> <div kendo-grid="testGrid" k-options="testOptions"> ...

  10. Windows安装ElastAlert问题总结

    1.运行时出现UnicodeDecodeError: ‘ascii’ codec can’t decode byte 0xb4 in position 0: invalid start byte 或  ...