这两天在准备实习的面试和笔试，准备复习一下这些基础的概念，避免自己处于一种仅脑袋理解嘴巴不能表述出来的状态。

块状元素和行内元素的概念是在css页面布局这个地方出现。主要是将html标签按照一定的特性分成2类：块状元素和行内元素（内联元素）。

首先概念上理解一下：

块状元素：

  块状元素（Block element），字面理解就是一个方块嘛，它一般是其它元素的容器元素，可以容纳块状元素和行内元素，它默认是不会和其它元素同一行的，即相当于两个块状元素写一块是垂直布局的。最常用块状元素是div和p。

<html>

	<head>

		<title>DOM</title>

		<!-- Date: 2015-03-12 –>

	</head>

	<style>

	.box01{

		width:30px;

		height:30px;

		background-color:#293344;

	}

	.box02{

		width:50px;

		height:50px;

		background-color:#993889;

	}

	.box03{

		width:80px;

		height:80px;

		background-color:#652399;

	}

	</style>

	<body>

		<div class="box01"></div>

		<div class="box02"></div>

		<div class="box03"></div>

	</body>

</html>
css样式只是设计了div的宽度和高度以及背景颜色。
效果如下：

行内元素：

行内元素（Inline element）又称内联元素，个人觉得行内元素能让人更通俗一些去理解。行内元素一般基于语义元素，它只能够容纳文本以及其它的行内元素。常见的行内元素有 超链接a、span、图片元素img（记得图片是行内元素，我刚开始总会将img记成块状元素，可能是因为图片一大块的这样会让我混淆，但是img是属于行内替换元素(Replace inline element)，属于inline element类的。

行内元素跟块状元素的差异基本是，行内元素并不从新的一行开始，水平方向会一个个接着。每个块状元素会从新的一行开始。

       <body>

		<img src="pic01.png" style="border:1px solid black;">

		<a href="http://www.cnblogs.com/magicgua">www.cnblogs.com/magicgua</a>

		<input type="text" />

	</body>
效果如下：
你们快看哪！它们真的没有换行！

强调一下：当css对内联元素定义这两属性中的一种之后，这些行内元素会具有块状元素属性！例如会重新的一行开始，就像后面跟了一个换行符一样。

1、display：block;

2、float:left/right;

小例子：

<style>

		img{

			display: block;

			width: 300px;

			height:300px;

		}

		a{

			display: block;

			border:2px solid red;

			width: 300px;

			height:100px;

		}

</style>

	</head>

	<body>

		<img src="pic01.png" style="border:1px solid black;">

		<a href="http://www.cnblogs.com/magicgua">www.cnblogs.com/magicgua</a>

		<input type="text" />

	</body>

效果如下

当我对img还有a添加display: block;之后，它们就像块状元素一样，从新的一行开始了，而且具有了width,heigh属性！自己去试试，如果仅仅是行内元素，你不去设置它为display: block; 是没有办法设置它的宽高的，它显示的宽度和告诉就是图片被保存的高度和宽度，就像对于img来说是比较不方便的。所以，这是个很好用的属性。

css布局中关于 块状元素和行内元素的区分的更多相关文章

  1. css 块状元素与行内元素(内联元素)的理解

    块状元素: 它一般是其他元素的容器元素,可以容纳块状元素和行内元素,它默认是不会和其他元素同一行的,即相当于两个块状元素写一起是垂直布局的.最常用的是div和p 行内元素: 行内元素又称内联元素,它只 ...

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

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

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

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

  4. css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

  5. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  6. Web前端开发最佳实践（6）：过时的块状元素和行内元素

    前言 前端程序员在学习HTML的过程中,肯定接触过页面元素的两个基本类型:块状元素和行内元素,也有大量的技术文章或者教程在介绍这两个概念.但这两个HTML元素相关的概念从字面上却和CSS样式有着很深的 ...

  7. [HTML/CSS]盒子模型，块级元素和行内元素

    目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...

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

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

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

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

随机推荐

  1. css sprites的原理和作用

    CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...

  2. Spring Boot—19Cache

    pom.xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  3. idea 忽略显示文件

    最后填写的时候,参考原有参数,1.在末尾加分号2.形式为*.xxx

  4. 微信小程序接入腾讯云IM即时通讯（会话列表）

    会话列表功能概述: 登录 :先用自己的账号登录腾讯云: 获取会话列表 :登录之后再获取会话列表: 更新未读消息数量 :获取会话列表之后更新未读消息数量 WXML代码(自己写的将就看一下) <vi ...

  5. pycharm安装激活及简单设置

    (1)在激活界面的License server输入:http://idea.liyang.io/:或者:点击help→Register→License sever ,输入http://idea.liy ...

  6. MongoDB用户配置

    MongoDB学习笔记—权限管理 阅读目录 1.MongoDB权限介绍 2 MongoDB添加管理员账户 3 MongoDB开启用户权限验证 4 MongoDB的roles角色简单介绍 5 Mongo ...

  7. [CENTOS7] 加入Windows域

    This following article is a snapshot from: https://www.rootusers.com/how-to-join-centos-linux-to-an- ...

  8. 向服务器post或者get数据返回

    #region 向服务器端Get值返回 /// <summary> /// 向服务器端Get返回 /// </summary> ///<see cref="Au ...

  9. Azure Cosmos DB 使用费用参考

    之前在学习Cosmos DB 中SQL API(DocumentDB) 的时候,也就是之前做的一些笔记,看到有使用费用的一些介绍,就有兴趣的去了解了下,做了一下简单的总结. 想了解更多或是购买使用的还 ...

  10. Hadoop HBase概念学习系列之HBase的Shell（步骤非常清晰）（二十四）

    这部分知识点,是必须要熟练玩转的! 见 5 hbase-shell + hbase的java api 的进入HBase Shell   强烈建议,先看我上面的这篇博文,是实实际际的步骤. 另外,附上一 ...