课堂笔记3月23

最新推荐文章于 2022-08-29 22:36:46 发布

蒸汽秋葵y

最新推荐文章于 2022-08-29 22:36:46 发布

阅读量47

点赞数

本文链接：https://blog.csdn.net/y850266/article/details/115113405

版权

这篇博客详细介绍了HTML中块元素、行内元素和行内块元素的区别及转换方法。通过修改display属性，可以实现不同元素显示模式的切换，以满足特定布局需求。例如，将a链接转换为块元素以扩大其触发范围，或将div转换为行内元素以使其与其他元素并排显示。同时，文章还探讨了各种元素的默认样式和特性，如宽度、高度的控制以及对齐方式等。

摘要由CSDN通过智能技术生成

html行内、块、行内块元素

使用场景：一个模式的元素需要另一种模式的特性。例如：
增加a链接的触发范围。
元素显示模式转换：
转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块元素：display:inline-block;
权重：
ID的权重是100
类的权重是10
标签的权重是1

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

常见的块元素有

-

,
,

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

行内元素的特点：
相邻行内元素一行排列，一行可以显示多个；
width、height，对齐属性直接设置无效；
默认宽度是内容本身的宽度；
行内元素只能容纳文本或其他行内元素。

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

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8" />
  	<title></title>
  	<style>
  		div{
  			/* 转换成行内元素 */
  			display:inline; /* inline:行内元素 */
  			width:200px;
  			height:200px;
  			background-color:orange;
  		}
  		p{
  			background-color:yellow;
  		}
  		li{
  			background-color:blue;
  		}
  		a{
  			width:100px;
  			height:100px;
  			background-color:pink;
  		}
  		.li2{
  			width:100px;
  			height:100px;
  			background-color:red;
  		}
  		.li3{
  			width:100px;
  			height:100px;
  			background-color:deepink;
  		}
  		/* 行内元素:
  		1.一行内显示多个;
  		2.设置width,height无效;
  		3.默认的宽高是内容的宽高; */
  		a{
  			/* 转换成块元素: */
  			display:block; /* block:块 */
  			width:1000px;
  			height:200px;
  			background-color:Lightgreen;
  		}
  		span{
  			/* 转换成行内块元素 */
  			display:inline-block;
  			background-color:Lightgreen;
  		}
  	</style>
  </head>
  <body>
  	<!-- 元素显示模式：块元素、行内元素、行内块元素 -->
  		<p style="color:green ;font-size:24px">yyqx</p>
  		<div>盒子1</div>
  		<div>盒子2</div>
  		<ul>
  			<li>1111</li>
  			<li class="li2">2222</li>
  			<li class="li3">3333</li>
  			<li>4444</li>
  		</ul>
  		<a href="#">链接</a>
  		<a href="#">链接</a>
  		<a href="#">链接</a>
  		<span>yyqx</span>
  		<span>yyqx</span>
  		<span>yyqx</span>
  		<input type="text" style="width:200px; height:50px"/>
  </body>
</html>