2021-03-23

最新推荐文章于 2024-09-15 10:24:49 发布

北路有点堵车*

最新推荐文章于 2024-09-15 10:24:49 发布

阅读量50

点赞数

分类专栏：学习笔记笔记文章标签： html

本文链接：https://blog.csdn.net/d13368568386/article/details/115112983

版权

学习笔记同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

笔记

19 篇文章 0 订阅

订阅专栏

行内、块、行内块元素

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

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

1链接里不能再犯链接；
2特殊情况链接里可以放块元素，但是
给转换一下块级模式最安全。/* 转换成块元素*/
display:block;/block块/

块元素的特点
1.比较霸道，自己独占一行；
2.可以控制width,heigher,对齐属性
3.宽度默认是容器（父级元素宽度）的100%；
4.块元素内可以包括含行内元素或块元素/转换成行内元素/
display:inline;/inline行内元素/

文字类的标签内不能使用块元素，
比如

，

~

等标签主要用于存放文字，
因此标签内不能放块元素。

行内块元素：
1.一行显示多个，但两个元素之间有空白缝隙；
2.默认宽度是内容本身宽度；
3.width,htight可控制。
/转换成行内块元素/
display:inline-block;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>元素显示模式</title>
		<style>
			div{
				/*转换成行内元素*/
				display:inline;/*inline行内元素*/
				background-color:darkblue;
			}
			p{
				background-color:deeppink;
			}
			li{
				background-color:red;
			}
			/*!-- 行内元素：
			 1.一行显示多个；
			 2.设置width,heighr无效
			 3.默认的高宽是内容的宽高*/
			a{
				/* 转换成块元素*/
				display:block;/*block块*/
				width:100px;
				height:100px;
				background-color:darksalmon;
			}
			/*块元素的特点
			比较霸道，自己独占一行；
			可以控制width,heigher,对齐属性
			宽度默认是容器（父级元素宽度）的100%；
			块元素内可以包括含行内元素或块元素*/
			.li2{
				background-color:royalblue;
				width:200px;
				height:100px;
			}
			.li3{
				background-color:green;
				width:200px;
				height:100px;
			}
			span{
			/*转换成行内块元素*/
				display:inline-block;
				background-color:saddlebrown;
			}
		</style>
	</head>
	<body>
		<!-- 元素显示模式：块元素、行内元素、行内块元素-->
		<div>大部队</div>
		<p>巴迪</p>
		<a href="#">赤子之心</a>
		<ul>
			<li>1</li>
			<li class="li2">2</li>
			<li class="li3">3</li>
			<li>4</li>
		</ul>
		<span>文字内容</span>
		/*行内块元素*/
		<input type="text" style="width:200px;height:200px;">
	</body>
</html>