block

块级元素特点:

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(很霸道,一个块级元素独占一行)

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

inline

内联元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

inline-block

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点。

inline-block 元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度、行高以及顶和底边距都可设置。

CSS: inline、block和inline-block的区别的更多相关文章

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

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

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

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

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

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

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

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

  5. CSS中block,inline和block-inline的区别(转载)

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

  6. 2017-08-20 block,inline和inline-block概念和区别

    display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...

  7. block,inline,inline-block的区别

    block: 英语翻译过来是“块”意思,就跟小时候玩过的积木方块一样,一块一块往上搭. inline: 英语翻译过来就是“内联”的意思,内联不好理解,我的理解就是行内元素: block和inline都 ...

  8. display:inline-block,block,inline的区别与用法

    一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置   margi ...

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

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

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

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

随机推荐

  1. vue自由拖拽、缩放组件

    github地址:https://github.com/kirillmurashov/vue-drag-resize 安装: npm i -s vue-drag-resize 使用: <temp ...

  2. bootstrap的自适应 和细节点

    bootstrap的自适应尽量少用绝对宽度px来定义大小,这会导致缩小屏幕宽度时相冲突,多使用百分比来改变位置.. 遇到不能用margin和padding来改变位置时,首先应该想到绝对定位和相对定位( ...

  3. [PHP] 使用PHP在mongodb中进行count查询

    在php7的mongodb扩展中,当要查询某个集合在某个条件下的数据个数时,可以使用下面的方式来获取. 比原生的命令要复杂许多 比旧版mongo扩展也复杂许多 需要使用到MongoDB\Driver\ ...

  4. git系列之---将本地的项目添加到码云仓库

    1.前情: 本地写的 Demo 传到码云上面进行维护. 2.操作步骤: git init   将本地文件初始化为git 仓库,文件件会多一个 .git 文件夹[版本库]: git add .   或者 ...

  5. redis之master.slave主从复制

    简介 主机数据更新后根据配置和策略,自动同步到备机的master/slave机制,master以写为主,slave以读为主 从库配置 配置从库,不配主库 配置从库: 格式: slaveof 主库ip ...

  6. navicat连接异常 authentication plugin 'caching_sha2_password' 问题解决

    mysql 8.0 默认使用 caching_sha2_password 身份验证机制 -- 从原来的 mysql_native_password 更改为 caching_sha2_password. ...

  7. ELK学习003:Elasticsearch启动常见问题

    一.Caused by: java.lang.RuntimeException: can not run elasticsearch as root 这个错误,是因为使用root用户启动elastic ...

  8. export和export default的区别

    export和export default的区别一.export的使用1.直接输出export let words = ‘hello world!!!’export function output() ...

  9. include 和require 区别

    include和require的区别  1.include() 包含文件 2.include_once(filename)如果已经包含,则不再执行include_once 3.requirerequi ...

  10. 把shp文件处理成Android可以识别中文的版本

    针对ArcGIS10.2版本的解决办法(默认中文编码为OEM): 假设现在有一个shp图层文件“图层.shp”,在ArcGIS10.2中可以正常打开,属性表中有中文内容,以此为例进行设置 1.拷贝一个 ...