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

一、display样式属性定义

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

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

1、none

描述:此元素不会被显示

示例如下:



<html>
	<head>
		<meta charset="UTF-8">
		<title>nonetitle>
	head>
	<body>
		
        <ol style="display: none">
        	<li>有序列表项1li>
            <li>有序列表项2li>
        ol>

        
        <textarea rows="3" style="display: none">textarea>
	body>
html>

结果如下:
网页CSS样式——详述常用display样式属性:none block inline inline-block_第1张图片

2、block

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

示例如下:



<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>选项1option>
            <option>选项2option>
        select>
        <textarea rows="3" style="display: block">textarea>
	body>
html>

结果如下:
网页CSS样式——详述常用display样式属性:none block inline inline-block_第2张图片

3、inline

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

示例如下


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

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

4、inline-block

行内块元素(CSS2.1新增的值)

示例如下:



<html>
	<head>
		<meta charset="UTF-8">
		<title>inline-blocktitle>
	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>

结果如下:
网页CSS样式——详述常用display样式属性:none block inline inline-block_第3张图片

三、注意

行级元素和块级元素可以通过display样式属性实现互相转换以实现换行或使用块级元素才有的CSS样式

你可能感兴趣的:(网页CSS样式——详述常用display样式属性:none block inline inline-block)