html+css笔记14

最新推荐文章于 2024-09-08 20:13:55 发布

梦灬晨

最新推荐文章于 2024-09-08 20:13:55 发布

阅读量54

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/m0_55439219/article/details/115113353

版权

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

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

块元素：
1.比较霸道，自己独占一行；
2.可以控制width、height、对齐属性；
3.宽度默认是容器（父级元素宽度）的100%；
4.块元素内可以包含行元素或块元素。
文字类的标签内不能使用块元素，比如

~

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

行内块元素：
1.一行显示多个，但两个元素之间有空白间隙；
2.默认宽度是内容本身的宽度；
3.width、height可控制。

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

转换成块元素：display：block；
block：块

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>元素显示模式</title>
		<style>
			div{
				/* 转换成行内元素: */
				display: inline;    /* inline:行内元素 */
				width: 12.5rem;
				height: 12.5rem;
				background-color: green;
			}
			p{
				background-color: red;
			}
			/* 1 */
			li{
				background-color: pink;
			}
			/* 10 */
			.li2{
				width: 12.5rem;
				height: 31.25rem;
				background-color: pink;
			}
			.li3{
				background-color: deeppink;
			}
			/* 行内元素:
			1.一行显示多个;
			2.设置width,height无效;
			3.默认的宽高是内容的宽高; */
			a{
				/* 转换块元素： */
				display: block;    /* block:块 */
				width: 62.5rem;
				height: 12.5rem;
				background-color: yellow;
			}
			span{
				/* 转换成行内块元素: */
				display: inline-block;
				background-color: ;
			}
		</style>
	</head>
	<body>
		<!-- 元素显示模式：块元素、行内元素、行内块元素 -->
		<p style="color: green;font-size: 1.5rem;">help</p>
		<div>盒子</div>
		<div>盒子2</div>
		<ul>
			<li>1</li>
			<li class="li2">2</li>
			<li class="li3">3</li>
			<li>4</li>
		</ul>
		<a href="#">0</a>
		<a href="#">0</a>
		<a href="#">0</a>
		<span>文字内容</span>
		<span>文字内容</span>
		<span>文字内容</span>
		<!-- 行内块元素 inline-block -->
		<input type="text" style="width: 12.5rem; height: 3.125rem;" />
		<input type="text" />
		<input type="text" />
	</body>
</html>

梦灬晨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+css笔记14

权重：ID的权重是100类的权重是10标签的权重是1样式最后使用权重大的行内元素:1.一行显示多个；2.设置width,height无效；3.默认的宽高是内容的宽高。链接里面不能再放链接；特殊情况链接里可以放块级元素，但是给转换一下块级模式最安全。块元素：1.比较霸道，自己独占一行；2.可以控制width、height、对齐属性；3.宽度默认是容器（父级元素宽度）的100%；4.块元素内可以包含行元素或块元素。文字类的标签内不能使用块元素，比如,~等标签主要用于存放文字。因此
复制链接

扫一扫