前端入门学习笔记二十三

最新推荐文章于 2024-10-04 06:11:34 发布

物恰冰可乐

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量129

点赞数

分类专栏：前端文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_65384293/article/details/128137771

版权

前端专栏收录该内容

109 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset = 'UTF-8'/>
		<title>vertical-align</title>
		<style type = "text/css">
			img{width:100px;height:100px;}
			#img1{vertical-align:top;}
			#img2{vertical-align:middle;}
			#img3{vertical-align:bottom;}
			#img4{vertical-align:baseline;}
		</style>
	</head>
	<body>
		前端<img src="img1" alt="img/1.jpg" alt = ""/>
		后端<img src="img2" alt="img/1.jpg" alt = ""/>
		前端<img src="img3" alt="img/1.jpg" alt = ""/>
		后端<img src="img4" alt="img/1.jpg" alt = ""/>
	</body>
</html>

vertical-align
vertical-align 属性设置元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。
这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
默认值：   baseline
继承性：   no
版本：   CSS1
JavaScript 语法
object.style.verticalAlign="bottom"

<!DOCTYPE html>
<html>
	<head>
		<meta charset = 'UTF-8'/>
		<title>vertical-align</title>
		<style type = 'text/css'>
			div
			{
				width:100px;
				height:100px;
				border:3px solid silver ;
			}
			.div1{vertical-align:top;}
			.div2{vertical-align:middle;}
			.div3{vertical-align:bottom;}
			.div4{vertical-align:baseline;}
			img{width:100px;height:100px;}
		</style>
	</head>
	<body>
		<div calss = "div1">
			<img src="img/1.jpg" alt="html"/>
		</div>
		<div calss = "div2">
			<img src="img/1.jpg" alt="css"/>
		</div>
		<div calss = "div3">
			<img src="img/1.jpg" alt="GO"/>
		</div>
		<div calss = "div4">
			<img src="img/1.jpg" alt="C"/>
		</div>
	</body>
</html>

vertical-align
vertical-align 属性设置元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。
这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
默认值：   baseline
继承性：   no
版本：   CSS1
JavaScript 语法
object.style.verticalAlign="bottom"

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8"/>
		<title>float</title>
		<style type = "text/css">
			img{float:left;}
			p{
				font-family:"HTML";
				font-size:15px;
			}
		</style>
	</head>
	<body>
		<img src="img/1.jpg" alt="前端"/>
		<p>花间一壶酒，独酌无相亲。
　　举杯邀明月，对影成三人。
　　月既不解饮，影徒随我身。
　　暂伴月将影，行乐须及春。
　　我歌月徘徊，我舞影零乱。
　　醒时同交欢，醉后各分散。
　　永结无情游，相期邈云汉。</p>
	</body>
</html>

float
float 属性定义元素在哪个方向浮动。
以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
默认值：   none
继承性：   no
版本：   CSS1
JavaScript 语法：
object.style.cssFloat="left"

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8"/>
		<title>background-color</title>
		<style>
			div{
				width:100px;
				height:100px;
			}
			#div1{background-color:hotpink}
			#div2{background:#87CEFA;}
		</style>
	</head>
	<body>
		<div id = "div1">HTML</div>
		<div id = "div2">CSS</div>
	</body>
</html>