行内元素：span  ,a,  ,strong , em,  del,  ins。特点：在一行上显示；不能直接设置宽高；元素的宽和高就是内容撑开的宽高。

块元素：div,h1-h6,p,ul,li。特点：独占一行；可以设置宽高；注释：嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。

行内块元素(内联元素)：input  img。特点：在一行上显示，也可设置其宽高。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        div {

            width: 300px;

            height: 100px;

            background-color: red;

        }

        p {

            height:50px;

            background-color: #00ffff;

        }

    </style>

</head>

<body>

    <div>

        <p></p>

    </div>

</body>

</html>

上述代码演示了父元素div里嵌套了一个子元素p，p在没有设置宽度的情况下，默认的接受了父div的宽度。

行内元素转块元素：display：block。行业元素配置之后，将会拥有块元素的所有属性。可以独占一行，并可以设置宽高。

块元素转行内元素：display:inline。块元素配置之后，将会拥有行业元素的所有属性。不在拥有设置宽高的属性，也不会独占一行。

块元素和行内元素转行内块元素：display:inline-block。配置之后，既可以在一行上显示，也可以设置宽高。

html——行内元素、块元素、行内块元素的更多相关文章

  1. html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。

    html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...

  2. css position 和 块级/行内元素解释

    一.position 属性: static:元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. relative:元素框偏移某个距离.元素仍保 ...

  3. html元素两种分类。替换元素和不可替换元素；块级元素和行内元素

    根据元素本身特点来分类: 替换元素替换元素根据其标签和属性来决定元素的具体显示内容.有<img><input><textarea><select>< ...

  4. 块级&行内元素总结

    一.块级元素与行内元素的区别 块级元素与行内元素有几个关键区别: 格式 默认情况下: 块级元素会新起一行: 行内元素不会以新行开始. 内容模型 一般块级元素可以包含行内元素和其他块级元素.这种结构上的 ...

  5. 【CSS3】---块状元素、内联元素(又叫行内元素)和内联块状元素

    元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...

  6. 【css】主要的块状元素(block element)和内联元素(inline element行内元素)

      内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用   display可以强制转换行内元素和块状元素,还可以取消显示none   块元素(bloc ...

  7. 行内元素的上下margin 和 img元素的上下margin

    行内元素的特点有: 1.与其他元素在同一行 2.宽度(width).高度(height).内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bott ...

  8. web兼容学习分析笔记--块级、内联、内联块级元素

    一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inli ...

  9. HTML中为何p标签内不可包含div标签?那哪些块元素里面不能放哪些块元素呢？

    先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联元素</span>的差别</p> <p>测试一下<div& ...

  10. HTML元素被定义为块级元素或内联元素。那么什么是块级元素，什么是内联元素呢

    块级元素(block)特性: 块级元素在浏览器显示时,通常会以新行来开始(和结束). 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制;就像以前用到的 ...

随机推荐

  1. 次小生成树 判断 unique MST

    Given a connected undirected graph, tell if its minimum spanning tree is unique. Definition 1 (Spann ...

  2. 洛谷—— P1187 3D模型

    https://www.luogu.org/problem/show?pid=1187 题目描述 一座城市建立在规则的n×m网格上,并且网格均由1×1正方形构成.在每个网格上都可以有一个建筑,建筑由若 ...

  3. 根据View找控制器

    - (UIViewController*)viewController { for (UIView* next = [self superview]; next; next = next.superv ...

  4. heap实现

    //STL提供的是Max heap,使用vector作为底部容器 //push_heap算法:首先将元素放到堆所对应的数组的末端,然后从该节点开始向上调整, //若当前结点键值比父结点大,则兑换位置, ...

  5. 3.3－ISDN

    3.3-ISDN     综合业务数字网ISDN(Integrated Services Digital Network):     ISDN主要有两种接口类型:分为BRI(2B+D=2×64+16K ...

  6. Android Studio怎样改动快捷键

    在Android Studio中.如果你认为某个快捷键太复杂,要想改动.怎么改动呢,首先要找到这个快捷键,可是Android Studio搜索快捷键有一个bug,就是你不能依据快捷键来搜索相应的功能点 ...

  7. Android利用Volley异步载入数据完整具体演示样例(二)

    MainActivity例如以下: package cc.y; import android.app.Activity; import android.content.Context; import ...

  8. C#使用oledb连接excel运行Insert Into语句出现“操作必须使用一个可更新的查询”的解决的方法

    我错误发生时的环境:Windows 7,Framework 4.0,Microsoft Office 2007,VS2010,c# WinForm. 部分代码: string strConn = &q ...

  9. linux安装jmeter

    将jmeter安装包下载下来(部分linux版本),配置环境变量 jmeter下载地址:链接: https://pan.baidu.com/s/1_6-FmU6XjQH71Ngyh2Sx-A    提 ...

  10. zTree初体验（一）——小试牛刀

    zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大长处. --zTree官网 zTree v3.0 将核心代 ...