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. 浅谈!DOCTYPE声明的作用？严格模式与混杂模式的区别？

    !DOCTYPE的作用: DOCTYPE是Document Type(文档类型)的缩写,<!DOCTYPE>声明必须是html文档的第一行,位于<html>标签之前.<! ...

  2. 输入一个URL到页面呈现其中发生的过程-------http过程详解

    在我们点击一个网址,到它能够呈现在浏览器中,展示在我们面前,这个过程中,电脑里,网络上,究竟发生了什么事情. 服务器启动监听模式 那我们就开始了,故事其实并不是从在浏览器的地址栏输入一个网址,或者我们 ...

  3. 2017年第八届蓝桥杯【C++省赛B组】

    1.标题: 购物单 小明刚刚找到工作,老板人很好,只是老板夫人很爱购物.老板忙的时候经常让小明帮忙到商场代为购物.小明很厌烦,但又不好推辞. 这不,XX大促销又来了!老板夫人开出了长长的购物单,都是有 ...

  4. 互评beta版本 - hello word!【空天猎】

    基于NABCD评论作品 1.Need需求:市面上同类型的手机及PC端飞行射击类游戏有很多,所以从需求方面来说,这款游戏的潜在客户非常有局限性.近些年较火的飞行射击类游戏,例如腾讯14年发行的<全 ...

  5. Task 8 找水王

    任务: 三人行设计了一个灌水论坛.信息学院的学生都喜欢在上面交流灌水,传说在论坛上有一个“水王”,他不但喜欢发帖,还会回复其他ID发的每个帖子.坊间风闻该“水王”发帖数目超过了帖子数目的一半. 如果你 ...

  6. 进阶系列（5）—— C#XML使用

    一.XML介绍 XML文件是一种常用的文件格式,例如WinForm里面的app.config以及Web程序中的web.config文件,还有许多重要的场所都有它的身影.Xml是Internet环境中跨 ...

  7. 防止DDoS攻击，每5分钟监控本机的web服务，将目前已经建立连接的IP计算出来，且实现top5。再此基础上，将并发连接超过50的IP禁止访问web服务

    netstat -lntupa | grep ":80" | grep ESTABLISHED | awk '{print $5}' | awk -F: '{print $1}' ...

  8. 个人作业-Week 3

    案例分析:必应词典 IOS客户端 调研&评测 一.功能性bug bug 1: 症状:在使用拍照翻译这一功能时,只能对图片中的句子逐行进行翻译.即一个中间有换行的句子会被当成两个句子进行翻译. ...

  9. selenium异常问题汇总（持续更新版）

    webdriver启动firefox时如果遇到以下错误,则说明selenium的版本和firefox不兼容了,升级selenium版本就好 org.openqa.selenium.firefox.No ...

  10. Nfs的简单了解

    近期在上传公司课件课程,上传的思路是,在45服务器上建立44服务器的nfs的连接,然后将43服务器上的课件拷贝到建立好的nfs上,再运行课件解析工具,解析整理好的excel即可完成课程的上传.在45服 ...