一 . 先说说二者的本质区别吧：

       行级元素是可以和其他元素处于一行，不用必须另起一行。块级元素是每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。

二 .下面看看各自的特点：

    块级元素

1.元素的高度、宽度、行高和顶底边距都是可以设置的。

2.元素的宽度如果不设置的话，默认为父元素的宽度。

　　  3.块级元素即使设置了宽度,仍然是独占一行。

常见块级元素：address、blockquote、center、dir、div、dl、ul、ol、li、fieldset、form、form、*hn、hr、menu、noframes、frames、noscript、p、 pre、table等。

行级元素

       1.元素的高度、宽度及顶部和底部边距不可设置。

2.元素的宽度就是它包含的文字、图片的宽度，不可改变。

常见行级元素：a、abbr、acronym、b、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、samp、select、small、span、s、del、strike、strong、sub、sup、textarea、tt、u、var等。

纸上得来终觉浅，下面举个例子：

  1. <!DOCTYPE html>
    <html lang="en">
  2. <head>
    　　<meta charset="UTF-8">
  3.     <title>区别</title>
  4.     <style type="text/css">
  5.         .div1{
  6.  
  7.              background-color: blue;
    　　　　　　　　color: #fff;
  8.         }
  9.  
  10.         .span1{
  11.  
  12.             background-color: red;
    　　　　　　　color: #fff;
  13.         }
  14.  
  15.     </style>
  16.  
  17. </head>
  18. <body>
  19. 　　<div class="div1">我是块级元素1</div>
  1. 　　<div class="div1">我是块级元素2</div>
  1. 　　<span class="span1">我是行级元素1</span>
  1. 　　<span class="span1">我是行级元素2</span>

</body>
</html>

  1. 结果如下：
  2.  
  3. 三. 二者的转换

可以在css样式中用display:inline将块级元素设为行级元素

　　 同样，也可以用display:block将行级元素设为块级元素

代码示例如下：

<!DOCTYPE html>
<html lang="en">

  1. <head>
    　　<meta charset="UTF-8">
  2.     <title></title>
  3.     <style type="text/css">
  4.         .div1{
  1. 　　　　　　　background-color: blue;
    　　　　　　　color: #fff;
    　　　　　　　display：inline；        }
  1.         .span1{
  3.             background-color: red;
    　　　　　　　color：#fff；
  4.             display: block;
  5.         }
  7.     </style>
  9. </head>
  10. <body>
  11. 　　<div class="div1">我是块级元素1</div>
  12. 　　<div class="div1">我是块级元素2</div>
  13. 　　<span class="span1">我是行级元素1</span>
  14. 　　<span class="span1">我是行级元素2</span>

</body>
</html>

  1. 得到结果如图：

 四. 行级—块级元素   

如果又想设置高度、宽度、行高以及顶和底边距，又想元素处于一行，该怎么办呢？

此时就可以用 display:inline-block；行内块元素，既具有block的宽度高度特性又具有inline的同行特性。

css ——行级元素与块级元素解析的更多相关文章

  1. CSS行内元素和块级元素的居中

    一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...

  2. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  3. CSS标准文档流 块级元素和行内元素

    标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...

  4. 前端css之文本操作及块级元素和行内元素

    1.文本操作 1.1文本颜色(color) 颜色指定方式: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如:  red 1.2水平对齐方式 ...

  5. html行级元素和块级元素以及css转换

    之前有说过html的标签是有语义的,当然也就有一些默认的样式,比如标题有h1···h6,他们的字体由大至小一次递减,字体比一般字体要加粗. 这样也就有了行级元素和块级元素,下面来看看什么是行级元素什么 ...

  6. 初学css 行内元素与块级元素

    行内元素与块级元素直观上的区别 1.行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列.块级元素从新行开始结束接着一个断行. 2.块级元素可以包含行内元素和块级元素 ...

  7. C#基础-css行内元素、块级元素基础

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  8. css——行内元素和块级元素的具体区别与行内块元素

    (学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...

  9. CSS中的行内元素和块级元素

    我们在构造页面时,会发现有的元素是上下排列的,而有的则是横向排列的,这是为啥子呢   看看上图,我们也没给他设置啥子属性咋就不一样了,其实是因为每个元素都有默认的 display 属性,比如 div ...

  10. HTML 行内元素和块级元素的理解及其相互转换

    块级元素:div, p(段落), form(表单), ul(无序列表), li(列表项), ol(有序列表), dl(定义列表), hr(水平分割线), menu(菜单列表), table(表格).. ...

随机推荐

  1. 开个小灶——turtle 海龟图形

    turtle 海龟图形 turtle数据库是python语言中最流行的绘制函数图形的数据库,绘制笔头像个小海龟,因此一般称为 海龟图形.海龟数据库的导入   import turtle 1 画布大小设 ...

  2. 使用Python+turtle绘制动画重现龟兔赛跑现场

    问题描述: 在经典的龟兔赛跑故事中,兔子本来是遥遥领先的,结果因为骄傲,居然在比赛现场睡了一觉,醒来后发现乌龟已经快到终点了,于是赶紧追赶,无奈为时已晚,最终输掉了比赛.本文使用turtle绘制乌龟和 ...

  3. webAR涉及的技术

    1.技术体系 1.1技术体系整理   其中绿色底色的代表Demo中表现出的能力比较成熟,可以直接应用.   脑图地址:http://naotu.baidu.com/file/3392a895a9039 ...

  4. SSM中的Mybatis的操作

    一:整合日志含有log4j和logback logback是log4j的升级版他性能提升较大,有些甚至达到10倍以上,占的内存更小,slf4j能很好的整合它,还有很多数不胜数的优势 1.下载jar包, ...

  5. aop技术理解使用

    一.什么是AOP?   aop技术是面向切面编程思想,作为OOP的延续思想添加到企业开发中,用于弥补OOP开发过程中的缺陷而提出的编程思想.AOP底层也是面向对象:只不过面向的不是普通的Object对 ...

  6. shell 下生成使用UUID

    #!/bin/bash psd="/proc/sys/kernel/random/uuid" echo $(cat $psd)UUID=$(cat /proc/sys/kernel ...

  7. Java Integer常量池——IntegerCache内部类

    个人理解,不喜勿喷,欢迎指正. 首先看下面这段代码,猜一下输出结果是什么 Integer a = 10; Integer b = 10; System.out.println(a == b); a = ...

  8. mybatis源码解析之Configuration加载（五）

    概述 前面几篇文章主要看了mybatis配置文件configuation.xml中<setting>,<environments>标签的加载,接下来看一下mapper标签的解析 ...

  9. python之生成器与迭代器

    生成器 列表生成式:li = [i for i in range(10)] 将列表生成式中[]换成()即为生成器generator 生成器保存的对象不是具体的数,而是一种算法,一种推导式,调用__ne ...

  10. ISCSI

    感谢: https://www.cnblogs.com/wuchanming/p/4019660.html