探究行内元素和块级元素

探究行内元素和块级元素

探究行内元素和块级元素

CSS


html中元素主要分为行内元素和块级元素

行内元素

  • 不独占一行
  • 书写完成后不会自动换行
  • 没有宽和高

块级元素

  • 独占一行
  • 书写完会自动换行
  • 宽和高可以修改

还有一种特殊的元素叫作行内块级元素

描述
none此元素不会被显示。
block此元素将显示为块级元素,此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block行内块元素。(CSS2.1 新增的值)
list-item此元素会作为列表显示。

块级元素和行内元素的分类

html中的块级元素:


标签描述
<address>定义地址。
<article>定义文章。
<aside>定义页面内容之外的内容。
<audio>定义声音内容。
<blockquote>定义长的引用。
<canvas>定义图形。
<caption>定义表格标题。
<dd>定义定义列表中项目的描述。
<div>定义文档中的节。
<dl>定义定义列表。
<dt>定义定义列表中的项目。
` 定义元素的细节。 
<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>定义可能的换行符。

实例

我们书写几个span标签
此处输入图片的描述

可以看到几个span都出现在了一行内

我们再书写几个div标签
此处输入图片的描述

可以看到div已经垂直了(不在一行内)
继续:我们给div添加一个刚才提到的特殊元素:行内块级元素inline-block
此处输入图片的描述

此处输入图片的描述
此时div会变成行内块级元素,同时宽和高也在
因此 inline-block既有行内元素水平排列的特点,也有块级元素设置宽高的特点

  • 仔细看上图,会发现水平方向有一个bug,有一个间隔 空闲时间可以去百度下hack~
  • 解决办法:
  • margin:-3pxposition:relitive;left:-3px;

关于行内元素和块级元素先谈这么多,听说认真阅读并点赞的你,代码敲的最6哦~
有兴趣的小伙伴可以加我微信,一起讨论~; V-x: dandanshen987

有一天,当你明白"小白" +"勤奋"的时候,你就会成为大牛

转载于:https://my.oschina.net/u/4130326/blog/3047274

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值