10 CSS_display属性

1 display阐述

文本级标签：h1~h6 ; p ; stuong/em ; span ; a ; img

排版级标签：br/hr ; div ; ul/ol/dl ; li ; input ; table ; select ; option ; form

  • CSS中的元素分类

    • 块级元素
    <div> <ul> <ol> <p> <h> <table> <form>
    • 行内元素
    <a> <span> <em> <strong> <label>
    • 行内块元素
    <input> <img>

  • 块级元素特点

    • 独占一行
    • 可以设置宽高，不设置默认父标签100%宽带

  • 行内元素特点

    • 在一行内显示
    • 不能设置宽高，默认宽高为文本内容占据的宽高

  • 行内块元素的特点

    • 在一行内显示
    • 可以设置宽高

行内元素和块级元素的区别

  • 块级元素

    • 独占一行
    • 可以设置宽高，不设置默认父标签100%宽带

  • 行内元素

    • 在一行内显示

    • 不能设置宽高，默认宽高为文本内容占据的宽高

块级元素和行内元素的分类

在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。

从HTML的角度来讲，标签分为：

  • 文本级标签：p、span、a、b、i、u、em。
  • 容器级标签：div、h系列、li、dt、dd。

　　PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。

现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：

  • 行内元素：除了p之外，所有的文本级f标签，都是行内元素。p是个文本级，但是是个块级元素。
  • 块级元素：所有的容器级标签都是块级元素，还有p标签。

display属性：

块级元素：display：block

行内元素：display：inline

行内块元素：display：inline-block

块级元素和行内元素的相互转换

我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。


块级元素可以转换为行内元素：

一旦，给一个块级元素（比如div）设置：

display: 
inline;

那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

  • 此时这个div不能设置宽度、高度；
  • 此时这个div可以和别人并排了

行内元素转换为块级元素：

同样的道理，一旦给一个行内元素（比如span）设置：

display: block;

那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：

  • 此时这个span能够设置宽度、高度
  • 此时这个span必须霸占一行了，别人无法和他并排
  • 如果不设置宽度，将撑满父亲

PS:标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：

  • （1）浮动
  • （2）绝对定位
  • （3）固定定位

2 块级元素

块级元素特点

  • 独占一行
  • 可以设置宽高，不设置默认父标签100%宽度
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>元素分类</title>
	<style type="text/css">
		div{
			background-color: red;
			width: 200px;
			height: 200px;
		}
		p{
			background-color: green;
		}
	</style>
</head>
<body>
	<div>MJJ</div>
	<p>我是一个段落</p>
	<h3>mjj</h3>
	<ul>
		<li>小米商城</li>
	</ul>

</body>
</html>

image


3 行内元素

行内元素特点

  • 在一行内显示
  • 不能设置宽高，默认宽高为文本内容占据的宽高
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>元素分类</title>
	<style type="text/css">
		a,span{
			font-size: 30px;
			background-color: purple;
			width: 200px;  /*无效*/
			height: 200px;  /*无效*/
		}
	</style>
</head>
<body>
	<a href="#">百度一下</a>
	<span>小圆菜</span>

</body>
</html>

image


4 行内块元素

行内块元素的特点

  • 在一行内显示
  • 可以设置宽高
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>元素分类</title>
	<style type="text/css">
		input{
			width: 200px;
			height: 50px;
		}
		img{
			width: 100px;
		}
	</style>
</head>
<body>
	<input type="username" name="">
	<input type="password" name="">
	<img src="images/11.jpg">

</body>
</html>

image

5 display属性

display可以指定元素的显示模式，它可以把行内元素修改成块状元素，也可以把别的模式的元素改成行内元素。diisplay常用的值有四个。

语法：

display: inline-block;  	// 改为行内块属性
display: block;		 	// 声明当前元素的显示模式为块状元素
display: inline;		// 声明当前元素的显示模式为行内元素
display: none;			// 声明当前元素的显示模式为隐藏 

text-align: center;  /*水平居中*/
line-height: 40px;  /*垂直居中*/

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>display属性</title>
	<style type="text/css">
		div{
			background-color: red;
			width: 200px;
			height: 200px;
			display: none;  /*元素隐藏*/
		}
		a,span{
			background-color: green;
			width: 100px;
			height: 40px;
			display: inline-block;  /*改为行内块属性*/

			/*text-align：水平居中
			line-height: 垂直居中*/
			text-align: center;
			line-height: 40px;
		}
	</style>
</head>
<body>
	<div>我是一个块</div>
	<span>MJJ</span>
	<a href="#">小圆圈</a>
</body>
</html>
posted @ 2022-08-04 17:27  角角边  Views(93)  Comments(0)    收藏  举报