行内元素：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. tyvj1117 拯救ice-cream

      背景 天好热……Tina顶着那炎炎的烈日,向Ice-cream home走去……可是……停电了……冰淇淋们躺在Ice-cream home的冰柜里,慢慢地……慢慢地……融化…………你说,她能赶在冰 ...

  2. spark之scala快速入门

    scala和java都是在jvm之上的语言,相对来讲,scala热度比较低,其实并不是一个特别好的语言选择. 原因倒不是因为scala本身的缺点,而是使用人群不够多,论坛和社区不够活跃.这就跟社交软件 ...

  3. Spring Cloud（4）：Feign的使用

    基于上一篇文章:https://www.cnblogs.com/xuyiqing/p/10867739.html 使用Ribbon实现了订单服务调用商品服务的Demo 下面介绍如何使用Feign实现这 ...

  4. java中普通的顶级类是不能使用static关键字修饰的。只有内部类可以使用static修饰，也可以不使用staitc关键字修饰。

    java中普通的顶级类是不能使用static关键字修饰的.只有内部类可以使用static修饰,也可以不使用staitc关键字修饰. java中的类可以是static吗?答案是可以.在java中我们可以 ...

  5. J2SE基础:5.面向对象的特性2

    Final的使用 final在类之前 表示该类是终于类.表示该类不能再被继承. final在方法之前 表示该方法是终于方法,该方法不能被不论什么派生的子类覆盖. final在变量之前 表示变量的值在初 ...

  6. Android系统编译时遇到的几个.mk的疑惑。

    在Android4.2的源代码Build/prduct_config.mk里面遇到几个疑惑: # Convert a short name like "sooner" into t ...

  7. 加壳学习笔记(三)-简单的脱壳思路&amp;调试思路

    首先一些windows的经常使用API:   GetWindowTextA:以ASCII的形式的输入框   GetWindowTextW:以Unicaode宽字符的输入框   GetDlgItemTe ...

  8. Fedora下搭建LAMP开发环境

    LAMP是Linux + Apache + MySQL +PHP/Python的缩写,是一组常用来搭建动态网站服务器的开源软件.它们本身都是各自独立的程序,但是因为开源并且常放在一起使用,所以拥有了越 ...

  9. POJ--3164--Command Network【朱刘算法】最小树形图

    链接:http://poj.org/problem?id=3164 题意:告诉n个点坐标,m条边表示两个点之间有路.从1点開始建立一个有向图最小生成树. 朱刘算法模板题 =============== ...

  10. hdu3488Tour KM算法

    //给一个有向图, //找出若干环,使得这些环覆盖全部点且每一个点仅仅能在一个环中 //问所得的全部环的全部边权值之和的最小值为多少 //对于每一个点仅仅有一个入度和一个出度.那么将每一个点拆成 // ...