1.概念：

行内元素：又叫内联元素，内联元素只能容纳文本或者其他内联元素，常见的内联元素有<span><a>

块元素：块元素一般都是从新行开始，可容纳文本，其他内联元素和其他块元素，即使内容不能占满一行，块元素也要把整行占满。常见的块元素<div><p>

2.代码演示1：

（1）exam.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>块元素和行内元素</title>

<link rel="stylesheet" type="text/css" href="my.css" />

</head>

<body>

    <!--行内元素:<span>使用方法-->

    <span class="s1">span1</span>

    <span class="s1">span1 hello world</span>

    <span class="s1">span1 hello world</span>

    <!--块元素:<div>使用方法-->

    <div class="s2">div1</div>

    <div class="s2">div2</div>

</body>

</html>

（2）my.css文件

@charset "utf-8";

/* CSS Document */

.s1 {

    background-color:pink;

}

.s2 {

    background-color:gray;

}

效果图：

总结：

行内元素(inline element)：特点是只占内容的宽度，默认不会换行。

块元素(block element)：特点不管内容有多少，他要换行，同时占满整行。

3.代码演示2：

（1）exam.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>块元素和行内元素</title>

<link rel="stylesheet" type="text/css" href="my.css" />

</head>

<body>

    <!--行内元素:<span>使用方法-->

    <span class="s1">span1</span>

    <span class="s1">span1 hello world</span>

    <span class="s1">span1 hello world</span>

    <!--块元素:<div>使用方法-->

    <div class="s2">div1</div>

    <div class="s2">div2</div>

    <span class="s1">okok</span>

    <p class="s3">p1</p>

</body>

</html>

（2）my.css文件

@charset "utf-8";

/* CSS Document */

.s1 {

    background-color:pink;

}

.s2 {

    background-color:gray;

    width:100px;

}

.s3 {

    background-color:pink;

}

效果图：

虽然这里div1和div2阴影不沾满整行，但是这个块元素实际上是占满整行的

4.块元素和行内元素的区别

（1）行内元素只占内容的宽度，块元素内容不管内容多少要占全行。

（2）行内元素只能容纳文本和其他行内元素，块元素可以容纳文本，行内元素和块元素（与浏览器类版本和类型相关）

（3）一些css属性对行内元素不生效，比如margin,left,right, width,height.建议尽可能使用块元素定位。（与浏览器类版本和类型相关）

5.行内元素和块元素--互相转换

display:inline  --->转化为行内元素（比如div）

display:block ---->转化为块元素（比如a）

案例演示：

css笔记12：块元素和行内元素的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

  7. CSS标准文档流 块级元素和行内元素

    标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...

  8. CSS块级元素与行内元素

    CSS块级元素与行内元素 行内元素与块状元素 1.块级元素:可以设置 width, height属性.  行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化 ...

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

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

随机推荐

  1. Tkinter教程之Label篇

    本文转载自:http://blog.csdn.net/jcodeer/article/details/1811293 #Tkinter教程之Label篇'''1.Label的第一个例子text属性使用 ...

  2. HDFS体系结构

    HDFS的设计目标 检测以及快速恢复硬件问题. 流式的数据访问. 移动计算比移动数据的代价小. 简化一致性模型. 超大规模数据集 异构软硬件平台之间的可移植性. HDFS的结构模型HDFS是一个主从的 ...

  3. 深入理解jQuery插件开发（转）

    转自:http://blog.jobbole.com/30550/ 如果你看到这篇文章,我确信你毫无疑问会认为jQuery是一个使用简便的库.jQuery可能使用起来很简单,但是它仍然有一些奇怪的地方 ...

  4. .NET中获取字符串的MD5码

    C# 代码: 导入命名空间(需要在Web页面的代码页中引用) using System.Web.Security; 获取MD5码 string Password = FormsAuthenticati ...

  5. TreeMap实现原理

    摘要 研究项目底层代码时,发现项目中的数据的缓存用的是TreeMap来实现对数据的缓存管理.本片博文就TreeMap的源码.原理以及用法做一个探究 在用TreeMap之前我们要对TreeMap有个整体 ...

  6. 【转】浅析C语言的非局部跳转：setjmp和longjmp

    转自 http://www.cnblogs.com/lienhua34/archive/2012/04/22/2464859.html C语言中有一个goto语句,其可以结合标号实现函数内部的任意跳转 ...

  7. 【转】你真的了解iOS代理设计模式吗？

    转自:http://www.cocoachina.com/ios/20160317/15696.html 在项目中我们经常会用到代理的设计模式,这是iOS中一种消息传递的方式,也可以通过这种方式来传递 ...

  8. Maven仓库Nexus的安装配置

    1.下载nexus,最新版本是nexus-2.8.0-05   参考文章 下载nexus-latest-bundle.zip文件后,并解压到  D:\nexus下 配置nexus的环境变量:先配置NE ...

  9. [iOS微博项目 - 1.8] - 各种尺寸图片加载 & 控件不显示研究

    A. 图片的加载:  [UIImage imageNamed:@"home"];  加载png图片    一.非retina屏幕  1.3.5 inch(320 x 480)  * ...

  10. HDU 3966 Aragorn's Story (树链点权剖分，成段修改单点查询)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3966 树链剖分的模版,成段更新单点查询.熟悉线段树的成段更新的话就小case啦. //树链剖分 边权修 ...