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"/> 输入框标签 等等.....
他们也有各自的特性:
- 行内元素特性
不能设置宽高,宽高取决于自身内容,不独占一行,多个行内元素左右排列,一行显示不下时会自动换行
- 块级元素特性
独占一行,可以设置宽高,如果不设置宽高则默认宽默认为父级标签宽度,高度由内容撑开,若没有内容,则高度为空
- 行内块元素特性:
他之所以叫行内块,是因为他占据块级元素的特性和行内元素的特性,可以设置宽高,不独占一行,多个行内块元素左右排列,一行显示不下会自动换行
我们知道了,行内元素是没有办法直接设置宽高的,因为内容的大小就是盒子的大小,那么假如我插入一张图片,而图片的大小不符合我实际要求,那么怎么去实现控制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



共有 0 条评论