CSS之display样式属性

最新推荐文章于 2024-09-29 20:42:21 发布

唱给你听、

最新推荐文章于 2024-09-29 20:42:21 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/zzxv587/article/details/90700794

版权

display样式属性

display属性有很多，这里主要有4种常用的属性分别为

none:此元素不会被显示
block:将元素显示为块级元素，此元素前后会有换行符
inline:默认。此元素会被显示为内联元素，元素前后没有换行符
inline-block：行内块元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a{	
				border: 1px solid red;
				text-decoration: none;
				/*1.block*/
				display: block;
				height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<!--2.inline-->
		<div style="border: 1px solid red;display: inline;">
			百度一下
		</div>
		<br /><br />
		<!--3.block-->
		<span style="border: 1px solid red;display: block;">
			百度一下
		</span>
		<a href="http://www.baidu.com" style="background: #FFFF00;">百度一下</a>
		<a href="http://www.baidu.com" style="background: #008000;">百度一下</a>
		<a href="http://www.baidu.com" style="background: #0000FF;">百度一下</a>
		<!--4.none-->
		<p style="display: none; border: 1px solid red ;">百度一下</p>
	</body>
</html>

结果
在这里插入图片描述

inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内块元素</title>
    <style>
        p{
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>
    <p>
        行内块元素
    </p>
</body>
</html>

对于块级元素
p标签选择器添加inline-block之前
在这里插入图片描述
p标签选择器添加inline-block之后

对于行内元素

由于行内元素被边界包裹无法指定所占的长度和宽度，使用display的inline-block属性之后可以调整行内元素所占的长度和宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内块元素</title>
    <style>
        span{
            border: 1px solid red;
            /*display: inline-block;*/
            height: 50px;
            width: 100px;
        }
    </style>
</head>
<body>
    <span>
        行内块元素
    </span>
</body>
</html>

结果
在这里插入图片描述

这里虽然使用选择器给span标签指定了宽度和高度但是并没有作用
把注释去掉之后就可以指定宽度和高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内块元素</title>
    <style>
        span{
            border: 1px solid red;
            display: inline-block;
            height: 50px;
            width: 100px;
        }
    </style>
</head>
<body>
    <span>
        行内块元素
    </span>
</body>
</html>

在这里插入图片描述