inline元素、block元素、inline-block元素
inline 内联元素:是不可以控制宽和高、margin等;并且在同一行显示,不换行,直到该行排满。
block 块级元素:是可以控制宽和高、margin等,并且会换行。块级对象元素会单独占一行显示,多个block元素会各自新起一行。
inline-block 内联块级元素: 具有宽度高度特性,又具有同行特性(一行内显示)
常見的inline元素:span,a,strong,em等。
常見的block元素:div,p,h1到h6,form,ul,ol等。
常見的inline-block元素:img,input等。
注意:
(1)块级元素的默认长度是它父元素的长度。
(2)块级元素能包含块级元素,内行元素。
(3)行内元素不能包含块级元素吗。
(4)行内元素能包含其他行内元素。
参考:
https://www.cnblogs.com/jerry666/p/5223409.html
https://www.jianshu.com/p/37de1610a1e1
inline元素、block元素、inline-block元素的更多相关文章
- html中的块元素(Block)和内联元素(Inline)(转)
我们首先要了解,所有的html元素,都要么是块元素(block).要么是内联元素(inline).下面了解一下块元素.内联元素各自的特点: 块元素(block)的特点: 1.总是在新行上开始:2.高度 ...
- display:inline与display:block——行内元素显示与块级元素显示
display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...
- block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素
block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...
- 块级元素和行内元素的区别 (block vs. inline)
块级元素 (display: block) 独占一行,多个block元素会各自新起一行.默认情况下,block元素的宽度会填满父元素的宽度. 可以设置width, height属性.但是,即使设置了w ...
- 【学习笔记】block、inline(替换元素、不可替换元素)、inline-block的理解
本文转载 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).blo ...
- block(块级元素)和 inline(内联元素) 的区别
block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...
- 【Web】block、inline、inline-block元素与background属性概述(案例实现社交账号注册按钮效果)
步骤三:社交账号注册按钮效果 文章目录 步骤三:社交账号注册按钮效果 案例的演示与分析 CSS属性与HTML标签 块级元素 内联元素 行内块级元素 CSS的display属性 CSS中的背景图片属性 ...
- display:inline-block,block,inline元素的区别
1.display:block将元素显示为块级元素,从而可以更好地操控元素的宽高,以及内外边距,每一个块级元素都是从新的一行开始.2.display : inline将元素显示为行内元素,高度,行高以 ...
- 使用float和display:block将内联元素转换成块元素的不同点
使用float和display:block将内联元素转换成块元素的不同点 使用float和display:block将内联元素转换成块元素的不同点:内联元素可以转换成块级元素,常用的方法比如可以为内联 ...
- block,inline-block,行内元素区别及浮动
1.block: 默认占据一行空间,盒子外的元素被迫另起一行 2.inline-block: 行内块盒子,可以设置宽高 3.行内元素: 宽度即使内容宽度,不能设置宽高,如果要设置宽高,需要转换成行内块 ...
随机推荐
- Hadoop生态集群MapReduce详解
一.概述 MapReduce是一种编程模型,这点很重要,仅仅是一种编程的模型,而不是具体的软件.在hadoop中,HDFS是分布式的文件存储系统,而MapReduce是一个分布式的计算框架.用于大规模 ...
- [openjudge-贪心]删数问题
题目描述 题目描述 键盘输入一个高精度的正整数N,去掉其中任意k个数字后剩下的数字按原左右次序将组成一个新的正整数.编程对给定的N和k,寻找一种方案使得剩下的数字组成的新数最小. 输出应包括所去掉的数 ...
- [openjudge-动态规划]鸣人的影分身
题目描述 描述 在火影忍者的世界里,令敌人捉摸不透是非常关键的.我们的主角漩涡鸣人所拥有的一个招数--多重影分身之术--就是一个很好的例子. 影分身是由鸣人身体的查克拉能量制造的,使用的查克拉越多,制 ...
- python报错之OSError
刚刚练一下xlrd模块的时候,竟然报错了! 百度了一下,才知道,是自己直接复制粘贴导致的:最好直接搜索\u202a才找到解决办法 所以只需从写换个地方复制路径或则重新手动输入一次就解决了 参考链接:h ...
- 精练代码:一次Java函数式编程的重构之旅
摘要:通过一次并发处理数据集的Java代码重构之旅,展示函数式编程如何使得代码更加精练. 难度:中级 基础知识 在开始之前,了解"高阶函数"和"泛型"这两个概念 ...
- Linux基础命令---cancel取消打印任务
cancel cancel指令用来取消已经存在的打印任务. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.openSUSE.SUSE. 1.语法 ...
- 移动端热更新方案(iOS+Android)
PPT资源包含iOS+Android 各种方案分析:https://github.com/qiyer/Share/blob/master/%E7%83%AD%E6%9B%B4%E6%96%B0%E5% ...
- 使用SVN提交代码,快速简单的换地址方法
1.找到你项目所在的文档,然后删除.svn文件,如下图: 2.然后在使用小乌龟的图标,进行项目的导入,界面如下: 3.然后输入SVN库的地址,点击ok界面如下: 4.同步到eclipse的方法是,复制 ...
- Dart编程语言入门
Dart基础入门语法介绍,详细说明可以查看相关视频<Dart编程语言入门>. 变量与常量 变量 1.使用 var 声明变量,默认值为 null var a;//null a = 10; 2 ...
- 如何利用cURL和python对服务端和web端进行接口测试
工具描述 cURL是利用URL语法在命令行方式下工作的文件传输工具,是开源爱好者编写维护的免费工具,支持包括Windows.Linux.Mac等数十个操作系统,最新版本为7.27.0,但是我推荐大家使 ...