块级元素,行级元素理解和应用

块级元素

1.块级元素独占一行,之后的元素也只能另起一行,相邻的两个块级元素不能共用一行。

2.块级元素其元素的高度,宽度,行高和顶部底部边距都是可以设置的。

3.元素的宽度如果不设置的话,默认为父元素的宽度。

4.块级元素对应的属性为display:block

常见块级元素有:

  <address>   <article>  <p>

<aside>//定义内容之外的内容.可作为标题的解释内容或副标题. 不会自动缩进

<audio>//音频标签 <blockquote> 定义较长的引用内容,有首行缩进。

<canvas>//绘图标签 。

<caption>定义表格标题,

<dd>表格中的项目描述 <div> 定义文档流中小结,盒子模型标签 。<dl>定义列表标签。<dt>定义列表中的项目标题

<details>定义元素的细节  <fieldset>定义单中元素的边框  <figcaption>定义figure元素的标题,<figure>定义媒介内容的分组,以及标题。

<footer> 定义section 或page的页脚  <form> 表单 <h1> -<h6>定义html标题  <header> <hr>定义水平线

<legend>定义fieldset元素的标题   <li>定义列 <menu> 定义列表或菜单 //所有主流浏览器均不支持 menu 元素。

<meter>定义预定义范围内的度量 <nav>定义导航 <noframes>定义针对不支持的框架的用户的替代内容

<noscript> 定义针对不支持客户端脚本的用户的替代内容

<ol> 定义有序列表,<output> 定义输出的一些类型

<pre>预格式标签 <section> 部分段落标签 <table>表格 <tbody>表格主内容 <td>表格列  <tfoot> 脚注标签 <th>表格表头标签 

<thead> 表格表头内容标签 <time> 日期标签 <tr> 表格行标签 <ul>无序列表标签

行级元素 

1.可以与其他元素共用一行,不必另起一行。

2.行级元素的高度,宽度,顶部,底部的边距不能设置。

3.元素的宽度就是它包含的文字图片的宽度,不可改变。

4.行内元素对应的属性为display :inline

常见的行级元素:

<a> <abbr> 缩写标签 <acronym>定义只取首字母的缩写 <b>加粗 <bdo>文字方向

<big>大号文本 <br>简单的折行 <button>按钮 <cite>引用

<code> 代码标签 <command> 命令按钮 <dfn> 项目描述标签//尽量少用 <del> 定义删除文本 

<em> 定义强调文本 <i>斜体 <img>定义图像 <input>定义输入 <kbd>定义键盘 <label>input的标注

<mark>定义有记号的文本 <pregress>定义任何类型的任务的进度 <q>定义短应用 <samp> 计算机代码样本

<select> 下拉列表 <small> 小号文本 <span> 文档节 <strong> 强调文本标签 <sub> 定义下标文本 <sup>上标文本

<textarea> 文本框 

行级元素和块级元素的相互转换

display:inline 可以将块级元素转换为行级元素,display:block可以将行级元素转换为块级元素。

display:inline-block可以将元素设置为块-行级元素。

转载于:https://www.jianshu.com/p/530a1aa5e31d

猜你喜欢

转载自blog.csdn.net/weixin_34293141/article/details/91286880