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. apache/tomcat安装过程略

    apache/tomcat安装过程略 一些变量 apache安装目录 APACHE_PREFIX=/Data/app/apache apache配置文件 APACHE_CONF=/etc/httpd/ ...

  2. RJM8L151F6P6温度枪方案对比

    疫情当下,温度计.呼吸机.监护仪.制氧机等医疗产品的生产供应至关重要,红外温度计属于非接触式测温,它是利用物体热辐射与物体温度之间的关系来工作的. 红外测温仪是一种将红外技术与微电子技术相结合的新型温 ...

  3. JavaScript中基本数据类型之间的转换

    在JavaScript中共有六种数据类型,其中有五种是基本数据类型,还有一种则是引用数据类型.五种基本数据类型分别是:Number 数值类型.String 字符串类型.Boolean 布尔类型, nu ...

  4. Linux 简介、目录结构

    Linux是类 Unix 操作系统. 根据原生程度可分为: 内核版本 发行版本:一些公司.组织在内核版的基础上进行二次开发 根据市场需求可分为: 服务器版:没有好看的界面,在终端操作,类似于dos 桌 ...

  5. 基于S2SH开发学生考勤管理系统 附源码

    开发环境: Windows操作系统开发工具:Eclipse+Jdk+Tomcat+mysql数据库 运行效果图 源码及原文链接:http://javadao.xyz/forum.php?mod=vie ...

  6. 一套很有意思的C语言测试题目

    网络上逛博客,发现了一套很有意思的测试题目: https://kobes.ca/ 大家有兴趣可以做一下,考一些关于C语言使用的细节: 中文翻译参考: https://www.cnblogs.com/l ...

  7. 关于js获取元素在屏幕中的位置的方法

    针对我们获取元素在页面中的位置的问题,我们还是用老师一峰老师的方法来解决吧 下面上HTML代码 <div class="left_footer"> <p data ...

  8. Python基础之程序暂停

    当我们执行某些程序时,由于机器速度很快导致肉眼无法直接看到执行结果时程序便停止运行.这时候我们迫切需要在程序中暂停,专业术语叫做阻塞.下面列举几种常用的程序暂停方法: input()用法:直接在欲等待 ...

  9. 1.泛型(Generic)

    一.泛型 泛型就是封装,将重复的工作简单化 1.泛型方法 public static void Show<T>(T tParameter) { Console.WriteLine(&quo ...

  10. 剑指offer-面试题51-数组中的逆序对-归并排序

    /* 题目: 求给定数组的逆序对数. */ /* 思路: 归并排序. */ #include<iostream> #include<cstring> #include<v ...