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

块状元素和行内元素的概念是在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. redis中文

    Redis 是完全开源免费的,遵守BSD协议,先进的key - value持久化产品.它通常被称为数据结构服务器,因为值(value)可以是         字符串(String),         ...

  2. CentOS7系列--5.3CentOS7中配置和管理Kubernetes

    CentOS7配置和管理Kubernetes Kubernetes(k8s)是自动化容器操作的开源平台,这些操作包括部署,调度和节点集群间扩展.如果你曾经用过Docker容器技术部署容器,那么可以将D ...

  3. asp.net mvc +easyui 实现权限管理（二）

    一写完后,好久没有继续写了.最近公司又在重新开发权限系统了,但是由于我人微言轻,无法阻止他们设计一个太监版的权限系统.想想确实是官大一级压死人啊, 没办法我只好不参与了 让他们去折腾. 我就大概说一下 ...

  4. 导出PDF乱码

     客户问题: 客户环境 LINUX系统weblogic10.3.0.0 用weblogic自带 JDK160_05 导出PDF中文字体全是口 解决方法: 客户的说他们的测试服务器和生产服务器环境是 ...

  5. maven 超级pom位置、maven命令、构件、下载位置、手动打包位置、中央仓库ip

    1.超级pom位置 ----> 解压M2_HOME/lib/maven-model-builder-3.5.4.jar 2.运行maven 命令实际上是运行了 java 命令,因为maven插件 ...

  6. redis介绍（2）简单安装

    我分两种方式讲解 window 下载地址:https://github.com/MSOpenTech/redis/releases. Redis 支持 32 位和 64 位.这个需要根据你系统平台的实 ...

  7. Django Redis配合Mysql验证用户登录

    1.redis_check.py # coding:utf-8 import pymysql import redis import sys def con_mysql(sql): db = pymy ...

  8. 【转】grep -v grep

    1.grep 是查找含有指定文本行的意思,比如grep test 就是查找含有test的文本的行 2.grep -v 是反向查找的意思,比如 grep -v grep 就是查找不含有 grep 字段的 ...

  9. 【Java】操作Sqlite数据库

    首先在https://github.com/xerial/sqlite-jdbc下载jar包 import java.sql.Connection; import java.sql.DriverMan ...

  10. gitbook 入门

    安装 gitbook 插件 npm install gitbook-cli -g 或者 yarn global add gitbook-cli 初使化目录 gitbook init 会发现目录下面多了 ...