最近初学CSS时对块级元素与行级元素有时会产生混淆，写篇博客记录一下自己对其的理解。

先从概念上来看：

块级元素

特点：1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。

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

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

常见的块级元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

行级元素

特点：1.可以和其他元素处于一行，不用必须另起一行。

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

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

说了半天的概念举个例子说明一下：

<html>

<head>

    <title>区别</title>

    <style type="text/css">

        .div1{

             background-color: red;

        }

        .span1{

            background-color: yellow;

        }

    </style>

</head>

<body>

<div class="div1">我是块级元素1</div>
<div class="div1">我是块级元素2</div>
<span class="span1">我是行级元素1</span>
<span class="span1">我是行级元素2</span>
</body> </html>

结果如下：

如果可以很清晰的看出块级元素直接占了一行并且宽度和父元素的宽度一样，而行级元素可以两个一起占一行，并且行级元素的宽度与其内的文字等宽。

行级元素与块级元素的转换

如果想将块级元素与行级元素相互转换，该怎么办呢？

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

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

代码示例如下：

<html>

<head>

    <title></title>

    <style type="text/css">

        .div1{

            background-color: red;

            display: inline;;

        }

        .span1{

            background-color: yellow;

            display: block;

        }

    </style>

</head>

<body>

<div class="div1">我是块级元素1</div>

<div class="div1">我是块级元素2</div>

<span class="span1">我是行级元素1</span>

<span class="span1">我是行级元素2</span>

</body>

</html>

得到的结果如图：

可见，原来的块级元素展示为了行级元素，原来的行级元素展示为了块级元素。

行级-块级元素

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

此时就可以用display:inline-block将元素设置为行级-块级元素。

CSS中的块级元素与行级元素的更多相关文章

  1. CSS中的块级元素（block）与行内元素（inline）

    css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块 ...

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

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  3. CSS中的块级元素，行内元素，行内块元素

    博客转载于:https://blog.csdn.net/swebin/article/details/90405950 块级元素 block 块级元素,该元素呈现块状,所以他有自己的宽度和高度,也就是 ...

  4. CSS里常见的块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  5. CSS块级元素与行级元素（转载）

    块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P".“form"这个块元素比较特殊,它只能用来容纳其他块元素. 如果没有css的作用,块元素会顺序以 ...

  6. CSS学习笔记——盒模型，块级元素和行内元素的区别和特性

    今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...

  7. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  8. css块级元素和行内元素详细解析

    块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div  p  form ul ol li 等: 常见的行内元素:span stronh em; ...

  9. 【CSS系列】块级元素和行内元素

    块级元素: 块级元素生成一个元素框,默认会填充其父元素的内容区,旁边不能有其他元素,换句话说,它在元素框之前和之后生成了“分隔符”. 列表项是块级额元素的一个特例,除了表现方式与其他块元素一致,列表项 ...

随机推荐

  1. 2016 系统设计第一期 （档案一）MVC 引用 js css

    @Styles.Render("~/Bootstrap/css/bootstrap-theme.css") @Scripts.Render("~/jQuery/jquer ...

  2. EXTJS 资料 Ext.Ajax.request 获取返回数据

    下面是一个登陆页面调用的EXTJS login function,通过 url: '/UI/HttpHandlerData/Login/Login.ashx',获取返回登陆账户和密码! Ext.onR ...

  3. 像Linq一样来使用Graphics

    Linq的链式编程用起来总是那样畅快淋漓,可惜在C#中并不是每时每刻都能有这么畅快的感觉,其中使用Graphics的时候就是,每次用Graphics绘制大量图形时尤其如此.GDI+的API功能很强大, ...

  4. Delphi XE5 android popumenu

    实现下拉菜单式的效果,本代码是国外的网站上下载的..,不是原创. 源码下载地址 :  http://files.cnblogs.com/nywh2008/popumenu.rar

  5. 【数学】[BZOJ 3884] 上帝与集合的正确用法

    Description 根据一些书上的记载,上帝的一次失败的创世经历是这样的: 第一天, 上帝创造了一个世界的基本元素,称做“元”. 第二天, 上帝创造了一个新的元素,称作“α”.“α”被定义为“元” ...

  6. 团体程序设计天梯赛-练习集L1-014. 简单题

    L1-014. 简单题 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 这次真的没骗你 —— 这道超级简单的题目没有任何输入. ...

  7. linux 深入检测io详情的工具iopp

    1.为什么推荐iopp iotop对内核及python版本都有一定要求,有时候无法用上,这时候就可以使用iopp作为替代方案.在有些情况下可能无法顺利使用iotop,这时候就可以选择iopp了.它的作 ...

  8. Web Api 入门

    http://www.cnblogs.com/developersupport/p/WebAPI-Security.html http://www.cnblogs.com/r01cn/archive/ ...

  9. [itint5]单词游戏

    http://www.itint5.com/oj/#36 此题在数据大些,而且全是A的情况下会超时(因为要匹配到很后面才false).通过利用数组本身作为visited标示,而且使用string引用, ...

  10. SQLite入门与分析(四)---Page Cache之事务处理(2)

    写在前面:个人认为pager层是SQLite实现最为核心的模块,它具有四大功能:I/O,页面缓存,并发控制和日志恢复.而这些功能不仅是上层Btree的基础,而且对系统的性能和健壮性有关至关重要的影响. ...