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. ab使用详解—如何使用apache性能测试工具进行压力测试

    作为后端工程师,除了实现业务需求之外,需要考虑的就是自己写的服务,在大并发下是否能正常运行了.但是,在一般开发情况下,没那么多大并发情况让你测试,那该怎么办呢? 这时候,我们就可以用到apache的压 ...

  2. Android Studio 3.6 正式版终于发布了

    Google 下载地址 百度云 下载地址 密码:epl9 如题,Android Studio 3.6 正式版终于发布了,值得兴奋呀,毕竟 3.5 大版本更新也已经差不多半年了,撒花撒花!这次更新又更新 ...

  3. windows下修改tomcat的startup.bat脚本文件后台运行

    1.修改startup.bat文件 rem Get remaining unshifted command line arguments and save them in the set CMD_LI ...

  4. 利用url地址获取你需要的参数,window.location系列

    这是我要获取url中一个code的参数值所以用了如下的方法GetQueryString(name) { let reg = new RegExp('(^|&)' + name + '=([^& ...

  5. gradle与android studio 关系及gradle配置

    前言 我们一般开发android 使用android studio ,android studio 安装的时候,会帮我们做两件事,配置好自己的jdk. 实际上,使用的其实不是我们在path中配置的jd ...

  6. 20200117 .net 001

    第一部分:面向对象 封装 继承(里氏转换) 多态第二部分:值类型.引用类型.字符串操作第三部分:集合文件操作第四部分:正则表达式第五部分:XML操作第六部分:委托.事件第七部分:反射. 1.变量的命名 ...

  7. linux系统下apache服务的启动、停止、重启命令

    本文章简单的介绍了关于linux下在利用命令来操作apache的基本操作如启动.停止.重启等操作,对入门者不错的选择.本文假设你的apahce安装目录为 usr local apache2,这些方法适 ...

  8. 企业应用开发的大趋势,65%的应用开发将通过低代码完成 ZT

    全球知名的咨询公司Gartner于近日发表了最新版的<低代码开发平台魔力象限>,并在报告中指出,到2024年65%的应用开发工作都将通过低代码的方式完成.Gartner长期关注软件开发领域 ...

  9. Html介绍,认识html标签

    什么是网页?网页就是我们我们提前写好的代码样式经过浏览器的渲染展示出来的样式效果.其实我们常说的上网就是浏览各式各样的网页,这些网页都是由html标签组成,下面就是一个简单的网页,效果图如下: 简单看 ...

  10. jQuery---小火箭返回顶部案例

    小火箭返回顶部案例 1. 滚动页面,当页面距离顶部超出1000px,显示小火箭. 封装在scroll函数里,当前页面距离顶部为$(window).scrollTop >=1000 小火箭显示和隐 ...