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区别以及标签嵌套的更多相关文章

  1. display:inline、block、inline-block 的区别

    一.块级元素 与  行级元素 要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫 ...

  2. css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括

    *知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...

  3. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  4. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

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

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

  6. block,inline和inline-block概念和区别(转载)

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

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

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

  8. display:inline、block、inline-block区别

    display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...

  9. display:inline、block、inline-block的区别(摘抄)

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

随机推荐

  1. umask及文件默认和原始权限说明

    umask作用:设置了用户创建文件的默认权限.是权限的补码,一般在/etc/profile.$ [HOME]/.bash_profile或$[HOME]/.profile中设置umask值. 查看um ...

  2. git连接gitlab下载项目代码

    1.安装git 2.鼠标右键git bash here 3.命令行界面输入生成公钥命令 ssh-keygen -t rsa -C'gitlab用户名' 然后一直按enter键下一步生成公钥即可' 4. ...

  3. Python_字符串_方法

    #字典#把字符串中的字母提取出来改为大写并计数 a="aAsmr3idd4bgs7Dlsf9eAF" b1=[x for x in a if x.isalpha()] b=''.j ...

  4. RedHat Linux-配置YUM仓库

    范例:配置Yum仓库 Yum软件仓库的作用是为了进一步简化RPM管理软件的难度以及自动分析所需软件包及其依赖关系的技术.可以把Yum想象成是一个硕大的软件仓库,里面保存有几乎所有常用的工具,而且只需要 ...

  5. sql bypass waf fuzz python

    从freebuf copy过来的,先保存,有空再改 #encoding=utf-8 import requests url = "http://127.0.0.1/index.php?id= ...

  6. 《Machine Learning in Action》—— 懂的都懂,不懂的也能懂。非线性支持向量机

    说在前面:前几天,公众号不是给大家推送了第二篇关于决策树的文章嘛.阅读过的读者应该会发现,在最后排版已经有点乱套了.真的很抱歉,也不知道咋回事,到了后期Markdown格式文件的内容就解析出现问题了, ...

  7. java中高级面试利器(boot,cloud,vue前后端提升)

    https://github.com/Snailclimb/JavaGuide   Java知识大全(面试) https://github.com/doocs/advanced-java  Java工 ...

  8. pandas 对时间索引进行分割

    截取最近1个月时间,截取最近一段时间,进行统计分析 df.loc["2016-01-05":"2016-02-05",:].tail() 在index为有序数据 ...

  9. CorelDRAW极具创意的多边形工具

    这是一个简单的教程,它展示了使用三种基本的CorelDRAW工具打造的创意性成果:多边形工具.挑选工具和形状工具. CorelDRAW 可让您以非常直观的方式创建多边形.尽管多边形工具乍看起来并不像一 ...

  10. Word文档数据被误删了怎么办,还能恢复吗

    很多时候由于时间紧张或者是思路不想被打断,我们在编辑Word时不能及时的手动保存,一旦遇到电脑意外断电的情况可能就会导致编辑好的Word文档内容丢失.或者是文档编辑好了之后,Word提示是否保存时,误 ...