CSS学习之标签模式转换

怡然一记 • 2022-10-15 • 前端开发, 学习笔记 • 253 阅读

CSS学习之标签模式转换

在HTML学习中，我们知道有三种元素，分别是：

  • 行内元素，其中常见的有:
<a herf="" art=""></a> <!--链接标签-->
<em></em> 斜体
<strong></strong> 加粗
等等.....
  • 块元素，常见的有：
<div></div> 块元素
<p></p>  段落
h1-h6 1-6级标题
<ol></ol><ul></ul> 有序列表和无序列表
等等.....
  • 还有特殊的行内块元素： 
    <img src="" art=""/> 图像标签
<input type="text"/> 输入框标签
等等.....

他们也有各自的特性:

  1. 行内元素特性

不能设置宽高，宽高取决于自身内容，不独占一行，多个行内元素左右排列，一行显示不下时会自动换行

  1. 块级元素特性

独占一行，可以设置宽高，如果不设置宽高则默认宽默认为父级标签宽度，高度由内容撑开，若没有内容，则高度为空

  1. 行内块元素特性：

他之所以叫行内块，是因为他占据块级元素的特性和行内元素的特性，可以设置宽高，不独占一行，多个行内块元素左右排列，一行显示不下会自动换行

 

我们知道了，行内元素是没有办法直接设置宽高的，因为内容的大小就是盒子的大小，那么假如我插入一张图片，而图片的大小不符合我实际要求，那么怎么去实现控制img标签大小呢？

这时我们就用到了标签模式转换的方法。

首先介绍他的用法：

display: inline block inline-block ;

方法解释：

方法 属性 解释
display inline 设置当前元素为行内元素
display block 设置当前元素为块级元素
display inline-block 设置当前元素为行内块元素

实践：

首先我们知道img标签是行内元素是无法直接对其设置宽高的，所以我们通过对其模式的转换实现设置宽高：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta httpss-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素模式转换</title>
    <style>
        a {
            /*我们先对其模式进行转换,设置img元素为块级元素*/
            display: block ;
            height: 100px;
            widht: 200px;
           /* 设置背景颜色，显示的更加清楚 */
            background-color: blue;
        }
    </style>
</head>
<body>
    <a herf="https://baidu.com/">百度一下</a>
</body>
</html>

这样我们就实现了对行内元素进行设置宽高。

块级元素也可以转换为行内元素：

div {
    display: inline;
}

如果我们想既要是块级元素，又想让他一行显示那么就可以把块级元素变成行内块元素：

div {
    display: inline-block;
    height: 100px;
    widht: 100px;
    background-color: red;
}

 

 

怡然一记
CSS学习之标签模式转换
https://xsunhua.cn/251.html
THE END
分享
二维码
打赏
海报
CSS学习之标签模式转换
CSS学习之标签模式转换 在HTML学习中，我们知道有三种元素，分别是： 行内元素，其中常见的有: <a herf="" art=""></a> <!--链接标签--> ……
<<上一篇
下一篇>>
文章目录
关闭
目 录