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

块状元素和行内元素的概念是在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. JS 中的布尔运算符 && 和 ||

    布尔运算符 && 和 ||的返回结果不一定是布尔值!由此来展开一定的研究及理解. 1.首先先介绍下常见的数据类型转化为bool后的值. (常用地方)在if表达式中,javascript ...

  2. LeetCode 544----Output Contest Matches

    During the NBA playoffs, we always arrange the rather strong team to play with the rather weak team, ...

  3. 多线程下载英文Google地图

    1. pom.xml文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&quo ...

  4. Flutter的教程:ListView

    本文学习一下列表widget,是最常见的需求 在Flutter中,用ListView来显示列表项,支持垂直和水平方向展示,通过一个属性我们就可以控制其方向 1.水平的列表 2.垂直的列表 3.数据量非 ...

  5. Week3——书上的分析

    1.long before=System.currentTimeMills();      long after=System.currentTimeMills(); 该l两句是分别记录了开始过滤和结 ...

  6. lua5.3+luasocket

    今天安装了luasocket,遇到了很多错误,百度并没有什么针对lua5.3的版本安装luasocket的文章,在这里记录一下. 1.下载lua5.3 下载到了lua-5.3.5.tar.gz版本的l ...

  7. react实例：理解dva构建项目的原理

    请点击相应的步骤查看详情 我们首先搭建一个 dva Demo  项目(请参考react快速构建一个应用项目),然后逐步完成以下内容: 结构划分 设计 Model 组件设计方法 组件设计实践 添加 Re ...

  8. pjax 和 ajax 的区别

    pjax 是一个 jQuery 插件,它通过 ajax 和 pushState 技术提供了极速的(无刷新 ajax 加载)浏览体验,并且保持了真实的地址.网页标题,浏览器的后退(前进)按钮也可以正常使 ...

  9. ElasticSearch入坑指南之概述及安装

    ---恢复内容开始--- ElasticSearch入坑指南之概述及安装 了解ElasticSearch ElasticSearch(简称ES)基于Lucene的分布式全文检索引擎.使用ES可以实现近 ...

  10. Tomcat6.0下的jsp、servlet和javabean的配置

    第一步:下载jdk和tomcat: 第二步:安装和配置你的jdk和tomcat:执行jdk和tomcat的安装程序,然后设置按照路径进行安装即可.1.安装jdk以后,需要配置一下环境变量,在我的电脑- ...