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

块状元素和行内元素的概念是在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. oracle sql 命令类别

    1.数据定义语言 DDL 有 create alter drop2.数据操纵语言 DML insert select delete update3.事务控制语言 TCL commit savepoin ...

  2. java jvm概述及工作过程中的内存管理

    java jvm 有分层的思想.   java类..java文件,源文件,源代码,源程序   编译器不能把源代码直接编译成0101,除非是java语言写的操作系统.   windows认识的可执行文件 ...

  3. Mac下驱动BCM20702A0 USB蓝牙

    偶然高了一个USB蓝牙,查到Mac下能识别,无法驱动,就去找了一下.方法很简单,就是把蓝牙的PID和VID加入到驱动里边去,具体方法和步骤如下: 1. 进入到/System/Libary/Extens ...

  4. RHEL7：如何配置I / O调度程序

    介绍 I / O调度程序用于优化磁盘上的读/写. RHEL 7中有三种类型的I / O调度程序(也称为I / O电梯): CFQ(C fullly F air Q ueuing)促进来自实时流程的I ...

  5. VUE入门准备------>ES6

    声明变量的方式:  var  let   const let  和 var的区别 var定义的变量是全局的会覆盖全局的定义 ; ;i<;i++){ console.log(i) } undefi ...

  6. Redis学习---CentOs/RedHat下Redis的安装

    redis是C语言开发,建议在linux上运行,本教程使用Centos6.4作为安装环境.      安装redis需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没有gcc环境,需要安装gc ...

  7. [沫沫金]JavaWeb企业信息系统，增加操作记录、数据库记录

    背景 系统出现数据莫名丢失,业务人员的反馈无法复现问题.纠结了很久,最终老板发话要记录操作,通过日志进行分析重现 环境 SSH框架 目标 1.记录访问了那个方法,使用的参数及返回的内容 2.记录新增. ...

  8. zabbix日常监控（监控缓存）

    实现的方法大体类似: 多谢博主的文章,免了不少时间! 摘抄博文地址:https://www.cnblogs.com/sixiweb/p/6893858.html https://www.cnblogs ...

  9. UserUI程序详解

    重要内容放前面:https://blog.csdn.net/yizhou2010/article/details/52837944 作者可关注 1.进行初始化,会用到AfxWinmain函数:创建当前 ...

  10. 个人作业——APP案例分析

    APP--饿了么:平台--Android 第一部分 调研, 评测 1 个人上手体验 首先送上APP截图一张: 相信很多学生都用过这个APP了,第一次使用都是因为新用户有大额的满减优惠才下载这个APP使 ...