美文网首页
块级元素,行级元素理解和应用

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

作者: 年轻不青年 | 来源:发表于2019-05-30 11:18 被阅读0次

块级元素

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可以将元素设置为块-行级元素。

相关文章

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

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

  • HTML块级元素和行内元素

    一、从概念的角度来看块级元素和行级元素咱们可以理解为: 块级元素一般都是新起一行,可以容纳行内元素和其他块级元...

  • HTML.CSS

    基本标签 浏览器主流和内核 css权重 伪元素: 颜色代码 行级元素 块级元素 行级块元素: 行级元素如何转换成行...

  • 【前端笔记3.0】标签元素类型

    HTML标签元素有三种不同类型:块级元素,行级元素(内联元素),行级块元素 块级元素特点:独占一行、内容决定高度、...

  • CSS中块级元素(block)和行内元素(line)

    HTML中的元素可分为两种类型:块级元素和行级元素 块级元素:block 每个块级元素默认占一行高度,一行内添加一...

  • 盒子模型

    块级元素 默认情况下,块级元素会另起一行,并尽可能的充满整个容器。块级元素可以包含行内元素和其他块级元素,相比于行...

  • 块级、内联、替换、非替换元素的区别

    块级元素 块级元素,一般都是从新行开始,它可以容纳行内元素和其他块元素,常见块级元素比如 、 、 等。 这个...

  • 小问题记录

    块级元素与行内元素 默认情况下,块级元素会新起一行。 一般块级元素可以包含行内元素和其他块级元素。 行内元素 默认...

  • 块级元素和行级元素

    1、块级元素 行级元素? 块级(block)元素的特点: ①总是在新行上开始; ②高度,行高以及外边距和内边距都可...

  • 行级元素和块级元素

    前端中,CSS将html元素分为两种,一种行级元素,一种块级元素细分也可以将其分为三种:行级元素,块级元素,内联块...

网友评论

      本文标题:块级元素,行级元素理解和应用

      本文链接:https://www.haomeiwen.com/subject/vthmtctx.html