display:block

    block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。

    block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

    block元素可以设置margin和padding属性。

display:inline

    inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

    inline元素设置width,height属性无效。

    inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

    简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

CSS--block inline inline-block的更多相关文章

  1. css中inline、block、inline-block的区别

    http://www.cnblogs.com/fxair/archive/2012/07/05/2577280.html display:inline就是将元素显示为块级元素. block元素的特点是 ...

  2. css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括

    *知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...

  3. CSS——display(Block none inline等)属性的用法

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...

  4. CSS基础:block,inline和inline-block

    css的display属性是前端开发中非常常见的属性,本文简单介绍下其中比较常用的属性值,即block.inline和inline-block. HTML组件中呈现一片空白区域的组件都可当盒模型(bo ...

  5. css display block 和 inline

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  6. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

  7. css(二) block,inline和inline-block概念和区别

    转: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-leve ...

  8. Css 中的 block,inline和inline-block概念和区别

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

  9. css菜鸟学习之block,inline和inline-block概念和区别

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

  10. HTML/CSS:block,inline和inline-block概念和区别

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

随机推荐

  1. vue中keep-alive使用时,注意要点

    <keep-alive exclude="QRCode,NewsInfor,VipRecordDetail"> <router-view></rout ...

  2. JMeter-正则表达式(Json中取value的部分值)

    2019-04-26问题:返回的json中提取短信验证码614930 { : "total":2, : "totalPage":1, : "rows& ...

  3. 跨平台技术实践案例: 用 reactxp 重写墨刀的移动端

    Authors:  Gao Cong, Perry Poon Illustrators:  Shena Bian April 20, 2019 重新编写,又一次,我们又一次重新编写了移动端应用和移动端 ...

  4. ubuntu默认使用python2,更改默认使用python3

    直接执行这两个命令即可: sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 100 sudo upd ...

  5. python之单例模式

    #单例模式:有时需要写出高性能的类,那么会采用单例模式.通俗的解释就是类只创建一次实例,贯穿整个生命周期,实现了高性能. #1.模块化单例#所谓的模块化就是一个单独的.py文件来存储类,这样就是单例模 ...

  6. c# 有序链表合并 链表反转

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

  7. 第四周Java作业

    老师说让用二维数组找最大,也就是最大和块,要求必须挨着,我其实不会写这个程序,所以我只能把自己的思路写出来 我觉得可以大问题缩小,我的思路是先把四个数一个正方形来进行计算,然后六个数矩形,把他化成两个 ...

  8. POJ 3162 bit区间查询最值+树形DP

    POJ 3162 『题目链接』POJ 3162 『题目类型』bit区间查询最值+树形DP ✡Problem: 一棵n个节点的树.wc爱跑步,跑n天,第i天从第i个节点开始跑步,每次跑到距第i个节点最远 ...

  9. asp.net 去掉小数点后面多余的0,本身为0则不显示

    很多时候,比如gridview内,不想现实从数据库带出的多余小数 ,比如 4.01000 ,可显示为 4.01 如果是 0.00000, 则显示为空白 /// <summary> /// ...

  10. [React Native] change port when running react native

    Two ways to do that. First, use this module to do that, https://github.com/ktonon/react-native-port- ...