HTML第十四次_快内行元素-CSDN博客

本文链接：https://blog.csdn.net/weixin_54989803/article/details/115113385

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		 <style>1
		 div{
		 	/*转换成行内元素*/
		 	display: inline;     /*inline:行内元素*/
		 	background-color: green;
		 }
		 p{
		 	background-color: red;
		 }
		 /*1*/
		 li{
		 	background-color: black;
		 }
		 /*2*/
		 .li2{
		 	width: 200px;
		 	height: 500px;
		 }
		 .li3{
		 	background-clip: deeppink;
		 }
		 /*行内元素:
		 1.一行显示多个;
		 2.设置with,height无效;
		 3.默认的宽高是内容的宽高;*/  
		 a{
		 	/*转换块元素*/
		 	display: block;
		 	width: 1000px;
		 	height: 200px;
		 	background-color: yellow;
		 }
		 span{
		 	background-color: skyblue;
		 }
		 </style>
	</head>
	<body>
		<!--元素显示模式：快元素、行内元素、行内块元素-->
		  <p style="color:green;font-size: 20px;">5464</p>
		  <div>盒子1</div>
		  <div>盒子2</div>
		  <ul>
			<li>111</li>
			<li class="li2">222</li>
			<li class="li3">333</li>
			<li>444</li>
		  </ul>
		  <a href="#">链接</a>
		  <a href="#">链接</a>
		  <a href="#">链接</a>
		  <span>文字内容</span>
		  <span>文字内容</span>
		  <span>文字内容</span>
		  <!--行内块元素  inline-block-->
		  <input type="text"style="width: 200px;height: 50px;" />
		  <input type="text" />
		  <input type="text" />
    </body>
</html>





权重：
ID的权重是100
类的权重是10
标签的权重是1
样式最后使用权重大的

块元素的特点
比较霸道，自己独占一行；
可以控制width、helght、对其属性；
宽度默认是容器（父及级元素宽度）的100%；
库元素内可以包含行内元素或块元素。

文字类的标签内不能使用块元素，比如<p>,<h1>-<h6>等标签
主要用于存放文字，因此标签内不能放块级元素。

转换成行内元素：display: inline；
inline：内行元素

转换成块元素：display: block;
block:块

转换成行内块元素：display: inline-block;
inline-block:行内块