专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

很多后端开发不知道前端样式控制CSS显示模式以及之前的相互转换

ins518 2024-09-29 18:37:12 技术文章 185 ℃ 0 评论

块级元素

特点：有自己的宽高、独占一行。

行内元素

特点： 无宽高属性、同用一行。

行内块元素

特点 ：有宽高设置、同一行显示。

如果需要把行内元素转成块级元素就可以直接：

display:black;就可以了。

或者块转成行内块元素直接display: inline-block

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		  div{
			  border:1px solid black;
			  display: inline-block;
			  width: 400px;
			  height: 400px;
			/*  width: 169px;
			  height: 169px; */
			/*  width: 800px;
			  height: 400px; */
			/*  background-image: url(./img/logo_bz.jpg);
			  background-repeat: no-repeat;
			  //background-position: 300px;
			  background-size: contain;
			  background-attachment: fixed; */
			 /* background: #000000 url(./img/logo_bz.jpg) no-repeat center bottom/100%; */
		  } 
		   span{
			   display: inline-block;
			   width: 400px;
			   height: 200px;
		   }
		  
		  img{
			  width: 300px;
			  width:400px;
			  display: block;
		  }
		</style>
	</head>
	<body>
		<!--块级元素-->
		<div>biaoti</div>
			<div>biaoti</div>
			<!--行内元素一行共存多个 加宽搞无效，背景颜色是生效的-->
			<span>1111</span>
			<span>22222222222222222222</span>
			<!--行内块元素   一行共存多个  加宽高生效 的-->
			<img  src="./img/logo_bz.jpg"/>
			<img  src="./img/logo_bz.jpg"/>
	</body>
</html>

同学们可以自己开测试看看。平时工作中比较常用。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表