CSS-显示模式

最新推荐文章于 2024-05-07 15:15:45 发布

guardwhy

最新推荐文章于 2024-05-07 15:15:45 发布

阅读量92

点赞数

本文链接：https://blog.csdn.net/hxy1625309592/article/details/109696363

版权

1.1 div和span标签

1.1.1块级元素

块级元素会独占一行。

p div h ul ol dl li dt dd

1.1.2行内元素

行内元素不会独占一行。

span buis strong em ins del

1.1.3 区别

块级元素

独占一行。
如果没有设置宽度, 那么默认和父元素一样宽。
如果设置了宽高, 那么就按照设置的来显示。

行内元素

不会独占一行
如果没有设置宽度, 那么默认和内容一样宽
行内元素是不可以设置宽度和高度的

行内块级元素

为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS元素的显示模式</title>
  <style type="text/css">
	div{
		background: red;
		width: 100px;
		height: 100px;
	}
	span{
		background: green;
		width: 100px;
		height: 100px;
	}

	img{
		width: 100px;
		height: 100px;
	}
  </style>
</head>
<body>
	<div>kobe是MVP</div>
	<p>james总决赛亚军</p>
	<h3>NBA总决赛</h3>
	
	<hr/>
	<span>Curry三分王</span>
	<b>朱芳雨是拳王</b>
	<strong>哈哈哈哈</strong>
	<hr/>

	<img src="images/test.jpg" alt="">
	<img src="images/test.jpg" alt="">
</body>
</html>

执行结果

1.2 CSS元素的显示模式

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS元素显示模式转换</title>
  <style type="text/css">
	div{
		display: inline;
		background: red;
		width: 100px;
		height: 100px;
	}

	span{
        display: block;
        background: green;
        width: 100px;
        height: 100px;
	}
	.p1{
        background: blue;
        width: 100px;
        height: 100px;
        display: inline-block;
	}
	.p2{
        background: rebeccapurple;
        width: 100px;
        height: 100px;
        display: inline-block;
	}
  </style>
</head>
<body>
  <!--
  设置元素的display属性

  display取值
	  block 块级
	  inline 行内
	  inline-block 行内块级

快捷键
	di display: inline;
	db display: block;
	dib display: inline-block;
  -->
  <div>我是div1</div>
  <div>我是div2</div>

  <span>我是span标签1</span>
  <span>我是span标签2</span>

  <p class="p1">段落1</p>
  <p class="p2">段落2</p>
</body>
</html>

执行结果