inline

  1. 共享一行
  2. 不能修改width、height属性，大小由内容撑开
  3. padding属性 top、right、bottom、left设置都有效；margin属性只有left、right设置有效

block

  1. 独占一行，默认与父元素同宽
  2. 可以修改width、height属性
  3. padding、margin四个方向的值设置均有效

inline-block

  1. 共享一行
  2. 可以修改width、height属性
  3. padding、margin四个方向的值设置均有效

flex

  1. 独占一行
  2. 将对象作为弹性伸缩盒显示

inline-flex

  1. 共享一行
  2. 将对象作为内联块级弹性伸缩盒显示

display: inline、block、inline-block、flex和inline-flex的更多相关文章

  1. display:block、display:inline与displayinline:block的概念和区别

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

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

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

  3. 关于display的属性：block和inline-block以及inline的区别，float相关说明

    首先是block和inline的区别,说通俗点block就是让其形成块级元素,而且其前后都会有换行符:而inline的话就是让元素设置为内联样式(对其设置的宽高都没有什么卵用,不产生效果,但是颜色效果 ...

  4. 当inline元素包裹block元素时会发生什么

    经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...

  5. Initialization failed for block pool Block pool（转载）

    2014-06-18 20:34:59,622 FATAL org.apache.hadoop.hdfs.server.datanode.DataNode: Initialization failed ...

  6. html中的块元素(Block)和内联元素(Inline)(转)

    我们首先要了解,所有的html元素,都要么是块元素(block).要么是内联元素(inline).下面了解一下块元素.内联元素各自的特点: 块元素(block)的特点: 1.总是在新行上开始:2.高度 ...

  7. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

  8. flex:1和flex:auto详解

    flex:1和flex:auto详解 首先明确一点是, flex 是 flex-grow.flex-shrink.flex-basis的缩写. flex-grow属性定义项目的放大比例,默认为0,即如 ...

  9. inline元素、block元素

    inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...

  10. 块元素block，内联元素inline; inline-block;

    block:块元素的特征 div ol li 等: 1.只有高度不设置宽度的时候默认撑满一行: 2.默认块元素不在一行: 3.支持所以CSS命令: inline:内联元素的特征 span i stro ...

随机推荐

  1. 初入Java坑，然后又入产品坑

    之前工作了一年,从事Java相关工作,不小心深得领导器重,跑去演讲.写文档.与客户沟通等,最后应公司需要,转往产品坑,坑坑相连,何时逃坑. 最近一直在学习产品经理必备工具Axure,发现这真是一个神奇 ...

  2. 正则表达式获取字符串的input标签的属性值

    直接上正则表达式: (?<=\<input.*value=\").*?(?=\") 字符串如下: <form action="https://www.b ...

  3. sql 工具类function

    --判断是否为整数 create or replace function is_number(param VARCHAR2) return NUMBER is v_num NUMBER; begin ...

  4. linux（10）linux vi/vim

    前言 所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在. 但是目前我们使用比较多的是vim编辑器. vim 具有程序编辑的能力,可以主动的以字体颜色辨别语法的 ...

  5. vulnhub靶机练习-Os-hackNos-1，超详细使用

    第一次写自己总结的文章,之后也会有更新,目前还在初学阶段. 首先介绍一下靶机,靶机是 vulnhub Os-hackNos-1 简介: 难度容易到中, flag 两个 一个是普通用户的user.txt ...

  6. workflow定时任务部分失败

    workflow遇到一个问题,每天定时任务导致部分失败,截图如下 目前这个问题现场出现过是重启wf解决的 ,但是也给研发排查了,根本原因不清楚,不确保现场还会再遇到.

  7. 利用github+hexo搭建的博客

    用github+hexo新建了一个博客,欢迎来访,如果想要搭建类似框架的博客,可以联系我. 新博客地址:只为自由书写的博客

  8. 【洛谷 p3372】模板-线段树 1（数据结构--线段树）

    题目:已知一个数列,你需要进行下面两种操作:1.将某区间每一个数加上x:2.求出某区间每一个数的和. 解法:如题,模版题.需要加上 lazy 标记,也就是我的 upd.lazy 标记的思路就是对一个结 ...

  9. hdu3247Resource Archiver (AC自动机+最短路+状压dp)

    Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 100000/100000 K (Java/Others) Total Submis ...

  10. Java 窗口 小马图像窗口

    写在前面: eclipse接着爽到 全是借鉴的,东改西改,而且记不住原网址了 两个月前写的,忘了思路,嗯,It just works 运行效果: 图像随便选(放到*jar所在目录*\\pictures ...