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. 一个基于NodeJS开发的APP管理CMS系统

    花了大概3周独立开发了一个基于NodeJS的CMS系统,用于公司APP的内容管理( **公司APP?广告放在最后 ^_^ ** ,管理员请理解~~~ )晚上看了部电影还不想睡,闲着也是闲着就作下小小总 ...

  2. 操作系统 cmd mini OS

    #include <stdio.h>#include <stdlib.h>#include <string.h> void word(char *a){ if(st ...

  3. Internet History, Technology and Security (Week 4)

    Week 4 History: Commercialization and Growth We are now moving into Week 4! This week, we will be co ...

  4. 累计进度条 PSP 饼图

    累计进度条   PSP   饼图 每周例行报告 本周PSP 类别 任务 开始时间 结束时间 被打断时间 总计工作时间 2016年9月24日 读书 构建之法-6.7章 19:00 20:00 2 58m ...

  5. MacOS & .DS_Store

    MacOS & .DS_Store .DS_Store === Desktop Services Store https://en.wikipedia.org/wiki/.DS_Store h ...

  6. linux下tomcat、jenkins环境搭建

    1.安装JDK  我不列出来了,自行百度 java -version 2.安装tomcat (1)将下载的tomcat压缩包 tar -zxvf apache-tomcat-8.5.29.tar.gz ...

  7. Python学习---日期时间

    在Python里面日期时间的功能主要由几个模块提供:time,calendar,datetime,date等 time主要用到的功能函数: #!/usr/bin/python3 # coding:ut ...

  8. CF915E Physical Education Lessons

    题意: Alex高中毕业了,他现在是大学新生.虽然他学习编程,但他还是要上体育课,这对他来说完全是一个意外.快要期末了,但是不幸的Alex的体育学分还是零蛋! Alex可不希望被开除,他想知道到期末还 ...

  9. Visual Studio 2013中UML建模功能

    1.新建项目-->模版-->建模项目 2.右键项目,添加新建项,, 3.自己摸索吧.

  10. 【刷题】BZOJ 3295 [Cqoi2011]动态逆序对

    Description 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计 ...