行内元素和块级元素
时间: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/
- Html与CSS快速入门01-基础概念
- 利用Fck的javascript-API创建fck编辑器
- ASPNET_WEBAPI快速学习02
- ExtJs学习笔记(17)_table布局
- Markdown快速入门
- JavaScript之apply()和call()的区别
- JavaScript之面向对象学习八(继承)
- JQuery快速入门
- JavaScript之面向对象学习七(动态原型模式、寄生构造函数模式、稳妥构造函数模式创建自定义类型)
- ExtJs学习笔记(16)_Form布局
- JavaScript之面向对象学习六原型模式创建对象的问题,组合使用构造函数模式和原型模式创建对象
- 未来几年苹果公司很可能“不务正业”,进军汽车无人驾驶界
- ExtJs学习笔记(15)_fit布局
- JavaScript之call()和apply()方法详解
- 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 数组属性和方法
- 你可能不知道的一些linux文件权限管理办法
- Laravel框架路由与MVC实例详解
- python实现学生管理系统开发
- 使用 chkconfig 和 systemctl 命令启用或禁用 Linux 服务的办法
- PHP defined()函数的使用图文详解
- 详解在Linux中清空或删除大文件内容的5种办法
- php和redis实现秒杀活动的流程
- CentOS 7中搭建NFS文件共享存储服务的完整步骤
- PHP检测一个数组有没有定义的方法步骤
- Yii2.0框架模型多表关联查询示例
- Yii2.0框架模型添加/修改/删除数据操作示例
- thinkphp5.1框架容器与依赖注入实例分析
- 在CentOS VPS上通过SSH安装 MySQL的办法图解
- 详解PHP 7.4 中数组延展操作符语法知识点
- linux下安装boost库的完整步骤记录