最近所接手的一个项目是一个前后端分离的项目,因为公司暂时抽调不出前端支援这个项目,所以我被临时抽调在这个项目中充当一个前端开发的一个角色.由于之前做过一年多的J2EE开发,所以对于前端开发还是很快能上手的.只是因为之前的html、css常用标签与用法在脑海里面已经很模糊了,所以导致在开发的过程中经常是不明其所以然,一个标签一个标签的、一个属性一个属性的试,导致开发效率极低,所以我打算趁国庆假期开始好好的复习巩固下,废话不多说,开始正文.
一.块级元素与行内元素的区别
1.1 在标准文档流里面,块级元素具有以下特点:
(1).块级元素总是在新行上开始,占据一整行,其宽度自动填满其父元素宽度,垂直向下排列.(注:若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列.)
(2).块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制.(注:块级元素即使设置了宽度,仍然是独占一行的)
(3).块级元素可以包含行内元素和其他块级元素.
1.2 在标准文档流里面,行内元素具有以下特点:
(1).行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的
(2).行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding可以随意控制;
(3).行内元素不能包含块级元素,只能容纳文本或者其他行内元素.
二.块级元素与行内元素的相互转换
行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block。
2.1 块级元素转换为行级元素:
2.2 行级元素转换为块级元素:
三.块级元素与行内元素的分类
3.1 常见块级元素与行内元素的分类:
3.2 基本块级元素与行内元素的分类:
html中的块级元素:
标签 | 描述 |
---|---|
<address> | 定义地址。 |
<article> | 定义文章。 |
<aside> | 定义页面内容之外的内容。 |
<audio> | 定义声音内容。 |
<blockquote> | 定义长的引用。 |
<canvas> | 定义图形。 |
<caption> | 定义表格标题。 |
<dd> | 定义定义列表中项目的描述。 |
<div> | 定义文档中的节。 |
<dl> | 定义定义列表。 |
<dt> | 定义定义列表中的项目。 |
<details> | 定义元素的细节。 |
<fieldset> | 定义围绕表单中元素的边框。 |
<figcaption> | 定义 figure 元素的标题。 |
<figure> | 定义媒介内容的分组,以及它们的标题。 |
<footer> | 定义 section 或 page 的页脚。 |
<form> | 定义供用户输入的 HTML 表单。 |
<h1> to <h6> | 定义 HTML 标题。 |
<header> | 定义 section 或 page 的页眉。 |
<hr> | 定义水平线。 |
<legend> | 定义 fieldset 元素的标题。 |
<li> | 定义列表的项目。 |
<menu> | 定义命令的列表或菜单。 |
<meter> | 定义预定义范围内的度量。 |
<nav> | 定义导航链接。 |
<noframes> | 定义针对不支持框架的用户的替代内容。 |
<noscript> | 定义针对不支持客户端脚本的用户的替代内容。 |
<ol> | 定义有序列表。 |
<output> | 定义输出的一些类型。 |
<p> | 定义段落。 |
<pre> | 定义预格式文本。 |
<section> | 定义 section。 |
<table> | 定义表格。 |
<tbody> | 定义表格中的主体内容。 |
<td> | 定义表格中的单元。 |
<tfoot> | 定义表格中的表注内容(脚注)。 |
<th> | 定义表格中的表头单元格。 |
<thead> | 定义表格中的表头内容。 |
<time> | 定义日期/时间。 |
<tr> | 定义表格中的行。 |
<ul> | 定义无序列表。 |
html中的行内元素:
标签 | 描述 |
---|---|
<a> | 定义锚。 |
<abbr> | 定义缩写。 |
<acronym> | 定义只取首字母的缩写。 |
<b> | 定义粗体字 |
<bdo> | 定义文字方向。 |
<big> | 定义大号文本。 |
<br> | 定义简单的折行。 |
<button> | 定义按钮 (push button)。 |
<cite> | 定义引用(citation)。 |
<code> | 定义计算机代码文本。 |
<command> | 定义命令按钮。 |
<dfn> | 定义定义项目。 |
<del> | 定义被删除文本。 |
<em> | 定义强调文本。 |
<embed> | 定义外部交互内容或插件。 |
<i> | 定义斜体字。 |
<img> | 定义图像。 |
<input> | 定义输入控件。 |
<kbd> | 定义键盘文本。 |
<label> | 定义 input 元素的标注。 |
<map> | 定义图像映射。 |
<mark> | 定义有记号的文本。 |
<objec> | 定义内嵌对象。 |
<progress> | 定义任何类型的任务的进度。 |
<q> | 定义短的引用。 |
<samp> | 定义计算机代码样本。 |
<select> | 定义选择列表(下拉列表)。 |
<small> | 定义小号文本。 |
<span> | 定义文档中的节。 |
<strong> | 定义强调文本。 |
<sub> | 定义下标文本。 |
<sup> | 定义上标文本。 |
<textarea> | 定义多行的文本输入控件。 |
<time> | 定义日期/时间。 |
<tt> | 定义打字机文本。 |
<var> | 定义文本的变量部分。 |
<video> | 定义视频。 |
<wbr> | 定义可能的换行符。 |
四.结束语
在创作这边文章的时候有借鉴一下文章,在此表示感谢: