【CSS3】块级元素与行内元素的区别
一、行内元素与块级函数的三个区别
行内元素的特点:
- 和其他元素都在一行上;
- 高,行高及外边距和内边距部分可改变;
- 宽度只与内容有关;
- 行内元素只能容纳文本或者其他行内元素。
- 行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效
块级元素
- 总是在新行上开始,占据一整行;
- 高度,行高以及外边距和内边距都可控制;
- 宽带始终是与浏览器宽度一样,与内容无关;
- 它可以容纳行内元素和其他块元素。
二、行内元素转换为块级元素
display:block (字面意思表现形式设为块级)
三、行内元素与块级元素
<address> | 定义地址 |
<caption> | 定义表格标题 |
<dd> | 定义列表中定义条目 |
<div> | 定义文档中的分区或节 |
<dl> | 定义列表 |
<dt> | 定义列表中的项目 |
<fieldset> | 定义一个框架集 |
<form> | 创建 HTML 表单 |
<h1> | 定义最大的标题 |
<h2> | 定义副标题 |
<h3> | 定义标题 |
<h4> | 定义标题 |
<h5> | 定义标题 |
<h6> | 定义最小的标题 |
<hr> | 创建一条水平线 |
<legend> | 元素为 fieldset 元素定义标题 |
<li> | 标签定义列表项目 |
<noframes> | 为那些不支持框架的浏览器显示文本,于 frameset 元素内部 |
<noscript> | 定义在脚本未被执行时的替代内容 |
<ol> | 定义有序列表 |
<ul> | 定义无序列表 |
<p> | 标签定义段落 |
<pre> | 定义预格式化的文本 |
<table> | 标签定义 HTML 表格 |
<tbody> | 标签表格主体(正文) |
<td> | 表格中的标准单元格 |
<tfoot> | 定义表格的页脚(脚注或表注) |
<th> | 定义表头单元格 |
<thead> | 标签定义表格的表头 |
<tr> | 定义表格中的行 |
<a> | 标签可定义锚 |
<abbr> | 表示一个缩写形式 |
<acronym> | 定义只取首字母缩写 |
<b> | 字体加粗 |
<bdo> | 可覆盖默认的文本方向 |
<big> | 大号字体加粗 |
<br> | 换行 |
<cite> | 引用进行定义 |
<code> | 定义计算机代码文本 |
<dfn> | 定义一个定义项目 |
<em> | 定义为强调的内容 |
<i> | 斜体文本效果 |
<img> | 向网页中嵌入一幅图像 |
<input> | 输入框 |
<kbd> | 定义键盘文本 |
<label> | 标签为 input 元素定义标注(标记) |
<q> | 定义短的引用 |
<samp> | 定义样本文本 |
<select> | 创建单选或多选菜单 |
<small> | 呈现小号字体效果 |
<span> | 组合文档中的行内元素 |
<strong> | 语气更强的强调的内容 |
<sub> | 定义下标文本 |
<sup> | 定义上标文本 |
<textarea> | 多行的文本输入控件 |
<tt> | 打字机或者等宽的文本效果 |
<var> | 定义变量 |
<button> | 按钮 |
<del> | 定义文档中已被删除的文本 |
<iframe> | 创建包含另外一个文档的内联框架(即行内框架) |
<ins> | 标签定义已经被插入文档中的文本 |
<map> | 客户端图像映射(即热区) |
<object> | object对象 |
<script> | 客户端脚本 |
【CSS3】块级元素与行内元素的区别的更多相关文章
- python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)
昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...
- HTML中块级元素和行内元素的总结和区分。
HTML标签 html标签定义: 是由一对尖括号包裹的单词构成,例如: <html>. 标签不区分大小写<html> 和 <HTML>, 推荐使用小写. 标签分为两 ...
- HTML中块级元素与行内元素
一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...
- CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- CSS学习笔记——盒模型,块级元素和行内元素的区别和特性
今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- html块级元素与行内元素
1.关于行内元素和快元素的说明: 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display ...
- css块级元素和行内元素详细解析
块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div p form ul ol li 等: 常见的行内元素:span stronh em; ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
随机推荐
- 借用mysql 或者其他数据库 处理MSSQL 2016前处理导入特殊字符
MSSQL 2016支持了utf8编码的文件,之前处理比较麻烦的bcp 方式导入特殊字符一下子就方便了. 但是之前的版本,处理起来还是有一点麻烦.这次处理使用的数据库版本是sql server 201 ...
- 《Python编程从入门到实践》第二章_变量和简单数据类型
什么是变量呢? 举例: >>> message = "Hello,Python!" >>> print (message) Hello,Pyth ...
- Deep Q-Network 学习笔记(一)—— Q-Learning 学习与实现过程中碰到的一些坑
这方面的资料比较零散,学起来各种碰壁,碰到各种问题,这里就做下学习记录. 参考资料: https://morvanzhou.github.io/ 非常感谢莫烦老师的教程 http://mnemstud ...
- Python模块之subprocess--使用Popen来调用系统命令
当我们需要调用系统的命令的时候,最先考虑的os 模块.用os.system()和os.popen()来进行操作.但是这两个命令过于简单,不能完成一些复杂的操作,如给运行的命令提供输入或者读取命 令的输 ...
- cesium自定义气泡窗口infoWindow后续优化篇
http://www.cnblogs.com/giserhome/p/6248858.html该篇文章实现的自定义气泡窗口是基于修改cesium源代码基础上,这种做法只是援兵之计,凑合应付的,投机取巧 ...
- XCOM2中敌对生物设计分析(Aliens篇)
Aliens Aliens作为游戏设定中入侵的外星人,有各式外貌及奇特的战斗方式,掌握一些高能科技或利用精神力量进行攻击 Sectoid 使用灵能战斗的外星人,并无高级版本,初级便会使用精神控制,生命 ...
- 【Netty】TCP粘包和拆包
一.前言 前面已经基本上讲解完了Netty的主要内容,现在来学习Netty中的一些可能存在的问题,如TCP粘包和拆包. 二.粘包和拆包 对于TCP协议而言,当底层发送消息和接受消息时,都需要考虑TCP ...
- 响应式、手机端、自适应 百分比实现div等宽等高的方法
在百分比布局中, 有时候会遇见一个头疼的问题,就是如果某个布局是正方形的话,我们在这种情况下考虑到适应各种媒体尺寸,又不能给它定固定的宽高. 之前遇见过纯色布局的结果我就用纯色图片代替实现的,现在有了 ...
- 仿淘宝,京东红包雨(基于Phaser框架)
本红包雨项目是基于HTML5的游戏框架Phaser写的,最终形成的是一个canvas,所以性能很好,但是必须要说的是这个框架比较大,压缩后也有700K左右,所以请慎用. 代码地址: https://g ...
- workday3~4
这两天算是把一个模块的功能做完了,功能是数据统计,即按输入的时间统计X小时各个服务器status的数量以及各个服务器的信息,学到了不少东西,为了避免忘记,先记录,有空再整理一下. 1.时间戳的问题 选 ...