CSS学习之标签模式转换

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> <!--链接标签--> ……
<<上一篇
下一篇>>
文章目录
关闭
目 录