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. mysql参数总结

    1.innodb_old_blocks_pct 确定modpoint位置,默认37,(3/8=37%)可以通过这个调整young与old比. innodb_old_blocks_time:当有大的查询 ...

  2. Javaer 进阶必看的 RocketMQ ,就这篇了

    每个时代,都不会亏待会学习的人. 大家好,我是 yes. 继上一篇 头条终面:写个消息中间件 ,我提到实现消息中间件的一些关键点,今天就和大家一起深入生产级别消息中间件 - RocketMQ 的内核实 ...

  3. python-基础入门-1

    Python的打印为   print,等价于c语言的printf 1 print "hello again" 就能打印出hello again,简简单单,就这么一句. 我用的vsc ...

  4. Python Api接口自动化测试框架 代码写用例

    公司新来两个妹子一直吐槽这个接口测试用例用excel维护起来十分费脑费事,而且比较low(内心十分赞同但是不能推翻自己),妹子说excel本来就很麻烦的工具,于是偷偷的进行了二次改版. 变更内容如下: ...

  5. php数组学习记录01

    array_change_key_case array_change_key_case - 将数组中的所有键名修改为全大写或小写 <?php $input_array = array(" ...

  6. flink:StreamGraph转换为JobGraph

    1 转换基本流程 2 简单来看可以分为两部分: 第一部分是通过一些util.translator.generator等类将职责进行解耦.托管和分离,期间涉及FlinkPipelineTranslati ...

  7. 分析 5种分布式事务方案,还是选了阿里的 Seata(原理 + 实战)

    好长时间没发文了,最近着实是有点忙,当爹的第 43 天,身心疲惫.这又赶上年底,公司冲 KPI 强制技术部加班到十点,晚上孩子隔两三个小时一醒,基本没睡囫囵觉的机会,天天处于迷糊的状态,孩子还时不时起 ...

  8. Codeforces Round #668 (Div. 2) D. Tree Tag 题解(博弈)

    题目链接 题目大意 给你一颗树,Alice在a点,Bob在b点,Alice最多走da步,Bob最多走db步,两人轮流走路.要你判断经过无数次追赶后,Alice是否可以追上Bob,两人进行的都是最优策略 ...

  9. 集群--lvs

    快一个月没有更新博客了,最近一段时间在忙世界技能大赛网络系统系管理这个项目,没有太多的时间,我百忙之中更新一下.最近赛题中有说到集群这个,lvs这个东西(我也该学学这个了,一直停留在基础部分,是时候学 ...

  10. 如何测试一个APP

    1.是否支持各种手机系统 2.是否会因为分辨率而出错 3.不同机型能否安装 4.老旧机型 能否通用 5.广告时长 6.测试能否登陆注册 7.卸载时是否会发生意外 8.安装时会不会误认为带病毒 9.用户 ...