block、inline、inline-block区别以及标签嵌套
1、block
将元素转为块元素,块元素占一行,可以设置宽和高。
2、inline
将元素转为行内元素,占一行,不可以设置宽和高。
3、inline-block
将元素设置为行内块元素,这时元素既可以设置宽和高,又占一行。但这时的元素之间会出现缝隙,解决办法:1)设置浮动 2)将父元素的font-size设置为0,子元素设置为实际大小
4、常见的几种元素
块级元素 :div、h系列、li、dt、dd、p
行内元素 :span、u、a、、em、b、i、u、em
行内块元素:input 、img 、button 、texterea 、label。
5、p标签不能包含div标签
块级元素和行内元素之间的嵌套,是块级可以嵌套行内元素和某些块级元素,而行内元素不能嵌套块级元素,可以嵌套文本和其他行内元素。但有几个特殊的块级元素只能包含行内元素, h1~h6、p、dt,因此p标签不能包含div元素,因为浏览器渲染的缘故,p包含div元素时会被渲染成:<p>xxx</p><div>xxxx</div><p></p>。
li 内可包含 div 标签
<li><div></div></li>
块级元素与块级元素并列、行内元素与行内元素并列
<div><h2></h2><p></p></div> 正确
<div><a href="#"></a><span></span></div> 正确
<div><h2></h2><span></span></div> 错误,行内元素与块级元素并列了
block、inline、inline-block区别以及标签嵌套的更多相关文章
- display:inline、block、inline-block 的区别
一.块级元素 与 行级元素 要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫 ...
- css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括
*知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline-block,block,inline的区别与用法
一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置 margi ...
- block,inline和inline-block概念和区别(转载)
转自: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-lev ...
- 2017-08-20 block,inline和inline-block概念和区别
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- display:inline、block、inline-block区别
display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...
- display:inline、block、inline-block的区别(摘抄)
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
随机推荐
- linux文件描述符、软硬连接、输入输出重定向
引用链接:https://blog.csdn.net/qq769651718/article/details/79459346 文件描述符的作用: 文件描述符是linux操作系统中特有的概念.其相当于 ...
- rgw使用boto3生成可以访问的预签名url
前言 如果想访问一个ceph里面的s3地址,但是又不想直接提供secrect key的时候,可以通过预签名的方式生成url 生成方法 下载boto3 脚本如下 cat s3.py import bot ...
- Golang中make的使用
内建函数 make 用来为 slice,map 或 chan 类型分配内存和初始化一个对象(注意:只能用在这三种类型上),跟 new 类似,第一个参数也是一个类型而不是一个值,跟 new 不同的是,m ...
- 查询SQL Server数据库使用的版本号信息
如何查询当前连接服务器的数据库版本号,使用以下语句执行即可: select @@version
- Android10_原理机制系列_AMS(ATMS)之应用的第一次启动的过程
概述 该篇基于Android 10的代码.在 AMS之AMS的启动---Android Framework(Android 10) 中已经介绍了,在Android 10中,activity的调度和管理 ...
- webpack : 无法加载文件 C:\Users\Eileen\AppData\Roaming\npm\webpack.ps1,因为在此系统上禁止运行脚本
报错内容: webpack : 无法加载文件 C:\Users\Eileen\AppData\Roaming\npm\webpack.ps1,因为在此系统上禁止运行脚本.有关详细信息,请参阅 http ...
- jboss反序列化漏洞实战渗透笔记
一.利用shodan,fofa或谷歌搜索关键字:8080/jmx-console/ 二.下载java反序列化终极测试工具进行验证漏洞 三.记住User Current Directory: C:\j ...
- Docker学习第三天(Docker数据卷管理)
1.Docker数据卷管理 在Docker中,要想实现数据的持久化(所谓Docker的数据持久化即数据不随着Container的结束而结束),需要将数据从宿主机挂载到容器中.目前Docker提供了三种 ...
- 面试官:小伙子,你给我说一下你对MySQL索引的理解吧
一.索引是什么? 索引是帮助MySQL高效获取数据的数据结构. 二.索引能干什么? 索引非常关键,尤其是当表中的数据量越来越大时,索引对于性能的影响愈发重要.索引能够轻易将查询性能提高好几个数量级,总 ...
- guitar pro 系列教程(十七):Guitar Pro怎么导入音色库?
前面的章节讲述了关于Guitar Pro相关功能的介绍以及使用,其中也有提到音色库,玩音乐的朋友都知道,音色库是一个乐器的必备,今天小编要跟大家讲的就是关于Guitar Pro音色库是如何导入进去的, ...