2021-03-23

T Y E L

于 2021-03-23 11:20:04 发布

阅读量49

点赞数

本文链接：https://blog.csdn.net/weixin_55439265/article/details/115113452

版权

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

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

行内元素:
1.一行显示多个；
2.设置width,height无效；
3.默认的宽高是内容的宽高；

行内块元素：
链接里不能再放回链接。
特殊情况链接里可以放块级元素.但是给转换一下块级模式最安全。

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>元素显示模式</title>
		<style>
			
			p{
				background-color:yellow;
			}
			div{
				/* 转换成行内元素 */
				display:inline;/* inline行内 */
				width:200px;
				height:200px;
				background-color:pink;
			}
			li{
				background-color:red;
			}
			.li2{
				width:50px;
				height:30px;
				background-color:green;
			}
			.li3{
				width:50px;
				height:30px;
				background-color:black;
			}
			/* 行内元素:
			 1.一行显示多个；
			 2,。设置width,height无效；
			 3默认的宽高是内容的宽高；*/
			a{
				display:block;/* block块 */
				width:100px;
				height:200px;
				background-color:gray;
			}
			span{
				/* 转换成行内块元素 */
				display:inline-block;
				background-color:skyblue;
			}
		</style>
	</head>
	<body>
		<!-- 元素显示模式：块元素、行内元素、行内块元素 -->
		<p style="color:green ;" >啧啧啧</p>
		<p style="color:green ;" >啧啧啧</p>
		<div>盒子1</div>
		<div>盒子2</div>
			<ul>
				<li>1111</li>
				<li class="li2">22222</li>
				<li class="li3">333333</li>
				<li>444444</li>
			</ul>
			<a href="#">链接</a>
			<a href="#">链接</a>
			<a href="#">链接</a>
			<span>哈哈哈</span>
			<span>哈哈哈</span>
			<span>哈哈哈</span>
			<input type="text" style="width:200px; height: 50px;" />
			<input type="text" />
			<input type="text" />
	</body>
</html>