元素显示模式

最新推荐文章于 2024-05-09 02:13:52 发布

人心善变CTE

最新推荐文章于 2024-05-09 02:13:52 发布

阅读量96

点赞数 1

本文链接：https://blog.csdn.net/rxsb_12/article/details/115113256

版权

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

元素显示模式

块元素:（常见的块元素有

·

,
,

,
,
.
.
1.比较霸道,自己独占一行.
2.可以控制width,height,对齐属性;
3.宽度默认是容器(父级元素宽度)的100%;
4.块元素内可以包含内元素或块元素. */

行内元素:(常见的行内元素有,.,
1.一行显示多个;
2.设置width,height无效;
3.默认的宽高是内容的宽高;
(链接里不能再放链接,
特殊情况链接里可以放块级元素，但是给转换一下块级模式最安全。

display：block;(转换为块元素）
/* inline(转换成行内元素) */

行内块元素:（常见的行内块元素,,,同时具有块元素和行内元素的特点。
1、一行显示多个，但两个元素之间有空白缝隙；
2、默认宽度是内容本身的宽度；
3、width、height可控制；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>元素显示模式</title>
	</head>
	<style>
		/* 块元素:
		  1.比较霸道,自己独占一行.
		  2.可以控制width,height,对齐属性;
		  3.宽度默认是容器(父级元素宽度)的100%;
		  4.块元素内可以包含内元素或块元素. */
		div{
			/* inline(转换成行内元素) */
			display:inline;
			background-color:red;
		}
		p{
			color:red;
			font-size:20px;
			background-color:green;
		}
		li{
			background-color:green;
		}
		.li2{
			width:50px;
			height:30px;
			background-color:pink;
		}
		.li3{
			width:50px;
			height:30px;
			background-color:red;
		}
		/* 行内元素:
		   1.一行显示多个;
		   2.设置width,height无效;
		   3.默认的宽高是内容的宽高; */
		a{
			/*block 转换为块元素 */
			display:block;
			width:30px;
			height:80px;
			background-color:yellow;
		}
		span{
			/* 转换成行内块元素 */
			background-color:red;
		}
	</style>
	<body>
		<!-- 元素显示模式：块元素、行内元素、行内块元素 -->
		<div>盒子1</div>
		<div>盒子2</div>
			<p>放大或多个</p>
			<ul>
				<li>222</li>
				<li class="li2">5555</li>
				<li class="li3">444</li>
				<li>255</li>
			</ul>
			<a href="#">连接</a>
			<a href="#">连接</a>
			<a href="#">连接</a>
			<span>方设法</span>
			<span>方设法</span>
			<span>方设法</span>
			<!-- 行内块元素 inline-block-->
			<!-- 行内块元素:（常见的行内块元素<input/>,<img/>,<td>,同时具有块元素和行内元素的特点。
			            1、一行显示多个，但两个元素之间有空白缝隙；
			            2、默认宽度是内容本身的宽度；
			            3、width、height可控制； -->
			<input type="text" style="width:200px;height:20px "/>
			<input type="text"/>
			<input type="text"/>
	</body>
</html>

````````