行内元素和块级元素
时间:2022-07-24
本文章向大家介绍行内元素和块级元素,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
行内元素和块级元素
HTML
可以将元素种类分为行内元素、块级元素和行内块级元素三种,在使用过程中可以通过CSS
的display
属性相互转换。
行内元素
行内元素对应的CSS
样式设置为display: inline;
。
特点
- 元素排在一行
- 封闭后不会自动换行
- 不能指定高度与宽度
- 可以使用
line-height
来指定高度 - 外边距对于水平方向有效,垂直方向无效
- 内边距对于水平方向正常有效,垂直方向只有效果,对其他元素无任何影响
示例
<span>行内元素1</span> <!-- 排列在一行 -->
<span>行内元素2</span> <!-- 排列在一行 -->
<span>行内元素3</span> <!-- 排列在一行 -->
<style type="text/css">
span{
width: 1000px; /* 指定宽度无效果 */
height: 1000px; /* 指定高度无效果 */
color: #333;
background: #eee;
padding: 100px 20px; /* padding对于水平方向正常有效,垂直方向只有效果,对其他元素无任何影响 */
margin: 100px 20px; /* margin水平方向有效,垂直方向无效 */
}
</style>
常见行内元素
<a>
、<span>
、<b>
、<big>
、<i>
、<small>
、<tt>
、<abbr>
、<acronym>
、<cite>
、<code>
、<dfn>
、<em>
、<kbd>
、<strong>
、<samp>
、<var>
、<bdo>
、<br>
、 <img>
、<iframe>
、<map>
、<object>
、<q>
、<script>
、<sub>
、<sup>
、<button>
、<input>
、<label>
、<select>
、<textarea>
块级元素
块级元素对应的CSS
样式设置为display: block;
。
特点
- 独占一行
- 封闭后自动换行
- 默认宽度为
100%
- 可以指定宽度和高度
- 内外边距对于四个方向有效
示例
<div>块级元素1</div> <!-- 独占一行 -->
<div>块级元素2</div> <!-- 自动换行 -->
<style type="text/css">
div{
width: 100px; /* 不指定则默认宽度100% */
height: 100px; /* 可以指定高度 */
color: #333;
background: #eee;
padding: 10px 20px; /* padding的设置在四个方向都有效 */
margin: 10px 20px; /* margin的设置在四个方向都有效 */
}
</style>
常见块级元素
<div>
、<address>
、<article>
、<aside>
、<audio>
、<blockquote>
、<canvas>
、<dd>
、<dl>
、<fieldset>
、<figcaption>
、<figure>
、<footer>
、<form>
、<h1>~<h6>
、<header>
、<hgroup>
、<hr>
、<noscript>
、<ol>
、<output>
、<p>
、<pre>
、<section>
、<table>
、<tfoot>
、<ul>
、<video>
行内块级元素
行内块级元素对应的CSS
样式设置为display: inline-block;
。
特点
- 可以指定宽度和高度
- 内外边距对于四个方向有效
- 元素排在一行,但是会有空白缝隙
示例
<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
<style type="text/css">
input{
width: 100px; /* 可以指定宽度 */
height: 100px; /* 可以指定高度 */
padding: 10px 20px; /* padding的设置在四个方向都有效 */
margin: 100px 20px; /* margin的设置在四个方向都有效 */
}
</style>
常见行内块级元素
<input>
、<img>
、<button>
、<iframe>
、<textarea>
、<select>
代码示例
<!DOCTYPE html>
<html>
<head>
<title>行内元素与块级元素</title>
<style type="text/css">
div{
width: 100px; /* 不指定则默认宽度100% */
height: 100px; /* 可以指定高度 */
color: #333;
background: #eee;
padding: 10px 20px; /* padding的设置在四个方向都有效 */
margin: 10px 20px; /* margin的设置在四个方向都有效 */
}
span{
width: 1000px; /* 无法指定宽度 */
height: 1000px; /* 无法指定高度 */
color: #333;
background: #eee;
padding: 100px 20px; /* padding对于水平方向正常有效,垂直方向只有效果,对其他元素无任何影响 */
margin: 100px 20px; /* margin水平方向有效,垂直方向无效 */
}
input{
width: 100px; /* 可以指定宽度 */
height: 100px; /* 可以指定高度 */
padding: 10px 20px; /* padding的设置在四个方向都有效 */
margin: 100px 20px; /* margin的设置在四个方向都有效 */
}
</style>
</head>
<body>
<section>
<div>块级元素1</div> <!-- 独占一行 -->
<div>块级元素2</div> <!-- 自动换行 -->
</section>
<section >
<span>行内元素1</span> <!-- 排列在一行 -->
<span>行内元素2</span> <!-- 排列在一行 -->
<span>行内元素3</span> <!-- 排列在一行 -->
</section>
<section >
<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
</section>
</body>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://developer.mozilla.org/zh-CN/docs/Web/HTML
https://blog.csdn.net/zhanglir333/article/details/79178370
https://www.jeffjade.com/2015/06/24/2015-06-24-css-block-inline/
- 2018春节抢票攻略:不仅仅是12306微信小程序启用
- Android新手之旅(9) 自定义的折线图
- Android新手之旅(11) 在现有页面中插入新的view
- Docker容器学习梳理--容器间网络通信设置(Pipework和Open vSwitch)
- 温故而知新:Asp.Net中如何正确使用Session
- Android新手之旅(13) listview中数据重复的问题
- 温故而知新:HttpApplication,HttpModule,HttpContext及Asp.Net页生命周期
- proxy_pass反向代理配置中url后面加不加/的说明
- Android新手之旅(10) 嵌套布局
- C#代码也VB
- Docker容器学习梳理--SSH方式登陆容器
- Docker网络解决方案-Flannel部署记录
- Nginx的location配置规则梳理
- 统计代码行数的方法梳理
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法