0
点赞
收藏
分享

微信扫一扫

【CSS】标签显示模式 ② ( 行内元素 | 行内块元素 )


文章目录

  • ​​一、行内元素​​
  • ​​1、行内元素简介​​
  • ​​2、行内元素特点​​
  • ​​3、代码示例​​
  • ​​二、行内块元素​​
  • ​​1、行内块元素简介​​
  • ​​2、行内块元素特点​​
  • ​​3、代码示例​​






一、行内元素



1、行内元素简介



行内元素 可以 在一行中 同时放置多个

  • 链接标签 : ​​<a>​
  • 行内标签 : ​​<span>​
  • 文字相关标签 : ​​<em>​​​ , ​​<i>​​​ , ​​<strong>​​​ , ​​<b>​​​ , ​​<del>​


2、行内元素特点



行内元素特点 :

  • 单行多个 : 在 一行 中 , 可以 设置显示多个 行内元素 ;
  • 宽高无效 : 行内元素 的 宽高 设置是 无效的 , 以 子内容 的大小来确定 ;
  • 默认宽度 : 行内元素 的 宽度 是 其本身 的 宽度 ;
  • 容器特性 : 行内元素 作为 容器 , 只能 存放 文本 或 行内元素 , 不能存放 块级元素 ;


在 链接 标签 ​​<a>​​ 中 , 不能包含 其它 链接 , 否则会产生冲突 ;



3、代码示例



代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>块级元素</title>
<base target="_blank"/>
<style>
span {
/* 宽度 200 像素 */
width: 200px;
/* 高度 200 像素 */
height: 100px;
/* 左边距 2 像素 */
margin-left:2px;
/* 背景黑色 */
background-color: black;
/* 文字绿色 */
color:green;
}
</style>
</head>
<body>
<span>行内元素1</span>
<span>行内元素2</span>
</body>
</html>

显示效果 :

【CSS】标签显示模式 ② ( 行内元素 | 行内块元素 )_css

为 span 标签设置的 宽高 都是无效的 , 设置的 200 x 200 像素的宽高 , 显然没有成功 , 行内元素的宽高只取决于 元素 本身的宽高 ;






二、行内块元素



1、行内块元素简介



行内块元素 标签 是 特殊的标签 , 可以在 一行内显示多个 , 但是同时也可以为其设置 宽高属性 和 对齐属性 ;

  • 图片标签 : ​​<img>​
  • 表单标签 : ​​<input>​
  • 单元格标签 : ​​<td>​​​ , 表格 ​​table​​​ 中的 行 ​​tr​​​ 标签 中的 单元格 ​​<td>​​ 标签 ;


2、行内块元素特点



行内块元素特点 :

  • 显示样式 : 行内块元素 默认 都在一行中显示 , 每个元素之间会自动添加间隔 ;
  • 宽高设置 : 行内块元素 的 默认宽高 是 元素本身的宽高 , 但是也可以设置宽高 ;
  • 样式设置 : 行内块元素 可以 设置 宽度 , 高度 , 内边距 , 外边距 , 行高 等属性 ;


3、代码示例



代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>块级元素</title>
<base target="_blank"/>
<style>
img {
/* 宽度 200 像素 */
width: 200px;
}
</style>
</head>
<body>
<img src="images/image1.png" alt="">
<img src="images/image2.png" alt="">
<img src="images/image3.png" alt="">
</body>
</html>

显示效果 :

  • 没有设置图片宽度时的样式 : 显示的是图片原本的宽高 ;
  • 【CSS】标签显示模式 ② ( 行内元素 | 行内块元素 )_css_02

  • 设置了图片宽度的样式 : 显示的 图片宽度 是 设置的 200 像素宽度 ;

【CSS】标签显示模式 ② ( 行内元素 | 行内块元素 )_css_03


举报

相关推荐

0 条评论