重温内联元素(行内元素)与块级元素的区别

对于html和CSS的知识,总感觉自己有很多欠缺,因为之前写过一些页面,很多标签样式都自我感觉理解了。所以就没有耐心的去寻找基本书打打基础,以至于现在让我写一个静态页面都感觉有点心里发虚。既然没有耐心看书,就老老实实的记录下每次发现的新东西,也算一点一点补基础吧。废话不多,直奔主题。

内联元素与块级元素的区别

块级元素

  • 独占一行,默认情况下,宽度等于父元素的宽度
  • 可以设置height、width
  • 可以设置margin、padding
  • 对应属性display:block

内联元素

  • 相邻的内联元素会排成一行,直至一行排不下才会换行,宽度随元素内容的变化而变化
  • 不可以设置height、width,设置了也无效
  • 只可以设置margin-left、margin-right、padding-left、padding-right属性,其他属性不会起边距效果
  • 对应属性display:inline

行内块元素

  • 相邻的行内块元素排成一行
  • 可以设置height、width
  • 可以设置margin、padding属性
  • 对应属性:display:inline-block

常见的块级元素:

<address>        定义地址
<caption>        定义表格标题
<dd>        定义列表中定义条目
<div>        定义文档中的分区或节
<dl>        定义列表
<dt>        定义列表中的项目
<fieldset>        定义一个框架集
<form>        创建表单元素
<h1><h2><h3><h4><h5><h6>        标题元素
<hr>        水平线
<legend>        给fieldset元素定义标题
<li>        定义列表项目
<noframes>        为那些不支持框架的浏览器显示文本,放置于frameset标签内
<noscript>        为那些不支持脚本的浏览器显示文本
<ol>        有序列表
<ul>        无序列表
<p>        定义段落
<pre>        定义预格式化文本
<table>        定义表格
<tbody>        定义表格主体
<td>        表格中的标准单元格
<tr>        表格中的行
<tfoot>        表格中的页脚
<th>        定义表头单元格
<thead>        定义表格的表头

常见的内联元素

<a>        可定义锚以及超链接
<abbr>        表示一个缩写形式
<acronym>        表示只取title中首字母的缩写形式
<b>        字体加粗
<big>        大号字体加粗
<br>        换行
<cite>        引用进行定义
<em>        定义为强调的内容
<i>        斜体文本效果
<img>        向网页中嵌入一张图像
<input>        输入框
<kbd>        定义键盘文本
<label>        为input进行标记/标注
<q>        定义短的引用

<small>        呈现小号字体效果
<span>        组合文档中的行内元素
<strong>        语气更强的强调内容
<sub>        定义下标文本
<sup>        定义上标文本
<textarea>        多行文本输入控件
<tt>        打字机或者等宽的文本效果

值得注意的是,<input>和<img>都是行内元素,但是它们是可以设置宽和高的,因为他们都属于替换元素。

陈健的个人博客,记录生活所见所感、学习笔记。专注于Web前端_SEO教程_读书心得。

2 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回主页看更多
狠狠的抽打博主 支付宝 扫一扫