网页CSS样式——详述常用display样式属性：none block inline inline-block

本文链接：https://blog.csdn.net/CandidBoy/article/details/90354031

一、display样式属性定义

设置元素生成的框的类型，该属性有多个值

二、四个常用样式属性的详述

1、none

描述：此元素不会被显示

示例如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>none</title>
	</head>
	<body>
		<!-- 块级元素 -->
        <ol style="display: none">
        	<li>有序列表项1</li>
            <li>有序列表项2</li>
        </ol>

        <!-- 行内元素 -->
        <textarea rows="3" style="display: none"></textarea>
	</body>
</html>

结果如下：
在这里插入图片描述

2、block

描述：此元素将显示为块级元素，此元素前后会带有换行符

示例如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行内元素</title>
	</head>
	<body>
		<a href="https://www.baidu.com" style="display: block">百度一下，你就知道</a>
        <img src="https://www.baidu.com/img/bd_logo1.png" width="100px" height="50px" style="display: block"/>
        <span style="display: block">span标签</span>
        <input type="button" value="提交" style="display: block"/>
        <select style="display: block">
        	<option>选项1</option>
            <option>选项2</option>
        </select>
        <textarea rows="3" style="display: block"></textarea>
	</body>
</html>

结果如下：
在这里插入图片描述

3、inline

默认。此元素会被显示为内联元素，元素前后没有换行符

示例如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>块级元素变为行内元素</title>
	</head>
	<body>
    	<table style="display: inline">
        	<tr>
            	<td>表1</td>
            </tr>
        </table>
        <table style="display: inline">
        	<tr>
            	<td>表2</td>
            </tr>
        </table>
        
		<p style="display: inline">段落文本1</p>
        <p style="display: inline">段落文本2</p>
        
        <ol style="display: inline">
        	<li style="display: inline">有序列表一项1</li>
            <li style="display: inline">有序列表一项2</li>
        </ol>
        <ol style="display: inline">
        	<li style="display: inline">有序列表二项1</li>
            <li style="display: inline">有序列表二项2</li>
        </ol>
        
        <ul style="display: inline">
        	<li style="display: inline">无序列表一项1</li>
            <li style="display: inline">无序列表一项2</li>
        </ul>
        <ul style="display: inline">
        	<li style="display: inline">无序列表二项1</li>
            <li style="display: inline">无序列表二项2</li>
        </ul>
        
        <form style="display: inline">
        	form标签1
        </form>
        <form style="display: inline">
        	form标签2
        </form>
        
        <div style="display: inline">div标签1</div>
        <div style="display: inline">div标签2</div>
        
       	<hr width="50%" style="display: inline"/>
        <hr width="100%" style="display: inline"/>
        
        <h3 style="display: inline">3级标题1</h3>
        <h3 style="display: inline">3级标题2</h3>
        
        <h4 style="display: inline">4级标题1</h4>
        <h4 style="display: inline">4级标题2</h4>
	</body>
</html>

结果如下：
在这里插入图片描述

4、inline-block

行内块元素（CSS2.1新增的值）

示例如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>inline-block</title>
	</head>
	<body>
		<a href="https://www.baidu.com" style="width:300px;border:1px solid;">百度一下，你就知道</a>
		<a href="https://www.baidu.com" style="display: inline-block;width:300px;border:1px solid;">百度一下，你就知道</a>
		<a href="https://www.baidu.com" style="display: block;width:300px;border:1px solid;">百度一下，你就知道</a>
		<a href="https://www.baidu.com" >百度一下，你就知道</a>
	</body>
</html>