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. rbd的数据在哪里

    创建一个rbd [root@mytest ~]# rbd create test1 --size 4000 查看rbd信息 [root@mytest ~]# rbd info test1 rbd im ...

  2. 自行实现的jar包中,日志库的适配实现

    ​ 日常情况下,我们自己都会自行实现一些基础的jar包,如dao包.service包或一些其他完成特定功能的jar包.如果没有一套调试日志信息,出现问题时想查找问题非常不方便.可能大多数小伙伴都会有自 ...

  3. SQL Server 常用近百条SQL语句(收藏版)

    1. sqlserver查看实例级别的信息,使用SERVERPROPERTY函数 select SERVERPROPERTY ('propertyname') 2. 查看实例级别的某个参数XX的配置 ...

  4. arm-linux校时和时钟同步

    # 将时间写到系统 date 2020.08.25-14:02:00 # 将时间同步到硬件时钟芯片 hwclock -f /dev/rtc1 -w # 将时间从硬件时钟芯片同步到系统 hwclock ...

  5. SpringIOC基础知识总结

    目录 1.BeanFactory和ApplicationContext的区别: 2.实例化bean的三种方式: ⽅式⼀:使⽤⽆参构造函数 ⽅式⼆:使⽤静态⽅法创建 ⽅式三:使⽤实例化⽅法创建 3.Be ...

  6. php批量转换时间戳

    //批量转换时间戳 array_map(array($this, 'myfunction'),'时间戳数组'); //如 array('time1'=>11,'time2'=>2222); ...

  7. beef抓包简析

    搭建完了beef就想简答的抓下包分析下 这是第一个包,追踪它 返回demo页面,并发现其中的脚本 window.location.protocol表示协议http, window.location.h ...

  8. cmd编译java代码为什么总是说找不到main方法;请园子里大神指点迷津!!!

    编写源代码如下: cmd,编译路径:E: cd Notepad cd src javac Character.java jvav Character 运行结果: 实在是找不到问题点,请评论区给予指导啊 ...

  9. linux qt 5.12.6 编译mysql驱动

    环境:ubuntu 18.4 x64.qt 5.12.6 问题:安装后是没有mysql的驱动的 解决过程: 各种搜索,先后安装了mysql mysql-client,mysql-server,和各种l ...

  10. Android ALSPS驱动分析

    一.alsps的初始化函数和重要结构体 epl2182_init // Epl2182.c (kernel-3.10\drivers\misc\mediatek\alsps\epl2182-new) ...