CSS中的块级元素与行级元素
最近初学CSS时对块级元素与行级元素有时会产生混淆，写篇博客记录一下自己对其的理解。
先从概念上来看：
块级元素
特点：1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。
2.元素的高度、宽度、行高和顶底边距都是可以设置的。
3.元素的宽度如果不设置的话，默认为父元素的宽度。
常见的块级元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
行级元素
特点：1.可以和其他元素处于一行，不用必须另起一行。
2.元素的高度、宽度及顶部和底部边距不可设置。
3.元素的宽度就是它包含的文字、图片的宽度，不可改变。
说了半天的概念举个例子说明一下：
<html>
<head>
<title>区别</title>
<style type="text/css">
.div1{ background-color: red;
} .span1{ background-color: yellow;
} </style> </head>
<body>
<div class="div1">我是块级元素1</div>
<div class="div1">我是块级元素2</div>
<span class="span1">我是行级元素1</span>
<span class="span1">我是行级元素2</span>
</body> </html>
结果如下：
如果可以很清晰的看出块级元素直接占了一行并且宽度和父元素的宽度一样，而行级元素可以两个一起占一行，并且行级元素的宽度与其内的文字等宽。
行级元素与块级元素的转换
如果想将块级元素与行级元素相互转换，该怎么办呢？
可以在css样式中用display:inline将块级元素设为行级元素
同样，也可以用display:block将行级元素设为块级元素
代码示例如下：
<html>
<head>
<title></title>
<style type="text/css">
.div1{
background-color: red;
display: inline;;
} .span1{ background-color: yellow;
display: block;
} </style> </head>
<body>
<div class="div1">我是块级元素1</div>
<div class="div1">我是块级元素2</div>
<span class="span1">我是行级元素1</span>
<span class="span1">我是行级元素2</span> </body>
</html>
得到的结果如图：
可见，原来的块级元素展示为了行级元素，原来的行级元素展示为了块级元素。
行级-块级元素
如果又想设置高度、宽度、行高以及顶和底边距，又想元素处于一行，该怎么办呢？
此时就可以用display:inline-block将元素设置为行级-块级元素。
CSS中的块级元素与行级元素的更多相关文章
- CSS中的块级元素（block）与行内元素（inline）
css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块 ...
- CSS中的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- CSS中的块级元素，行内元素，行内块元素
博客转载于:https://blog.csdn.net/swebin/article/details/90405950 块级元素 block 块级元素,该元素呈现块状,所以他有自己的宽度和高度,也就是 ...
- CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- CSS块级元素与行级元素（转载）
块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P".“form"这个块元素比较特殊,它只能用来容纳其他块元素. 如果没有css的作用,块元素会顺序以 ...
- CSS学习笔记——盒模型，块级元素和行内元素的区别和特性
今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...
- CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- css块级元素和行内元素详细解析
块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div p form ul ol li 等: 常见的行内元素:span stronh em; ...
- 【CSS系列】块级元素和行内元素
块级元素: 块级元素生成一个元素框,默认会填充其父元素的内容区,旁边不能有其他元素,换句话说,它在元素框之前和之后生成了“分隔符”. 列表项是块级额元素的一个特例,除了表现方式与其他块元素一致,列表项 ...
随机推荐
- C#网络编程(1)
1.Purpose 1.什么是网络编程 2.TCP/IP协议 3.什么是套接字 4.多线程深入理解 二.Basic Concept 1.网络编程:主要实现进程(线程)相互之间的通信和基本的网络应用原理 ...
- Ubuntu上部署C# 网站 步骤简单记录
对于刚接触linux的同学,由于命令不熟悉,所以要想在上面部署C#网站,容易迷茫,可以参考此简易步骤: 安装 mono: apt-get install mono 按tab搜索 找到mono相关的组 ...
- W25Q32的使用
一.W25Q32简介 W25Q32是华邦公司推出的大容量“SPI FLASH” 产品. 1.容量 32M-Bit/4M-byte(4,194,304) 2.存储结构 页:256-bytes 扇区:4 ...
- js模拟触发事件
html标签元素封装着实用的[事件],但在很多时候,需要[模拟触发事件],比如 [按钮单机事件] 可以实实在在点击按钮触发该事件,但体验而言,很多时候需要js逻辑处理让实现 触发事件的效果这时就用 ...
- CSS定义字体间距 字体行与行间距
CSS定义字体行间距 line-height:xxpx; CSS定义字体间距 下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 属性 属性含义 属性值 Word-s ...
- IntelliJ IDEA 部署Tomcat及创建一个web工程
一.部署Tomcat 二.新建一个web工程 1.新建一个Project 2.现在建立一个简单的web工程,所以只勾选下面选中的,此外,本版本(IntelliJ IDEA 14.1.5只支持3.1版本 ...
- js注册登录审核
<script type="text/javascript"> $(function(){ $("#sendSms").click(function ...
- 30分钟让你了解MongoDB基本操作
今天记录下MongoDB的基本操作,这只是最基本的,所以是应该掌握的. 数据库 数据库是一个物理容器集合.每个数据库都有自己的一套文件系统上的文件.一个单一的MongoDB服务器通常有多个数据库. 集 ...
- 解决win8 64位提示MSVCP71.DLL等组件缺失
把压缩包里面的DLL解压,只需要把其实缺失DLL复制到C:\Windows\SysWOW64即可.压缩包包含MSVCP70.DLL.MSVCP71.DLL.MSVCR70.DLL.MSVCR71.DL ...
- hdu 3864 D_num
思路:给一个数n,是否只有4个约数(包括1),也就是找3个大于1的约数. 而任何一个数都可由质数表示,所以对于给定的数,只需要进行质因数分解.这里有 2种情况:如果有3个一样的质因数,则满足条件:否则 ...