CSS样式（元素包含规范、规避脱标流、浮动盒子居中显示、图片和文字垂直居中对齐）

最新推荐文章于 2023-11-27 11:09:04 发布

AnyBisks

最新推荐文章于 2023-11-27 11:09:04 发布

阅读量1k

点赞数 1

分类专栏：前端css

本文链接：https://blog.csdn.net/AnyBisks/article/details/78828411

版权

前端css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS样式（元素包含规范、规避脱标流、浮动盒子居中显示、图片和文字垂直居中对齐）

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/* 标签包含规范
			 *◆div可以包含所有的标签。
			 *◆p标签不能包含div h1等标签。
			 *◆h1可以包含p，div等标签 。
			 *◆行内元素尽量包含行内元素，行内元素不要包含块元素。
			 */
			/* 规避脱标流
			 *◆尽量使用标准流。
			 *◆标准流解决不了的使用浮动。
			 *◆浮动解决不了的使用定位。
			 */
			
			.box {
				height: 200px;
				width: 800px;
				margin: 0 auto;
				background: #808080;
				position: relative;
			}
			
			.box1 {
				height: 30px;
				width: 380px;
				background: #AFEEEE;
				position: absolute;
				bottom: 0px;
				/*浮动盒子居中显示
				 * ★:margin:0 auto;  只能让标准流的盒子居中对齐。
				 * ★定位的盒子居中：先左右走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)
				 * left: 50%;
				 * margin-left: -190px;
				 */
				left: 50%;
				margin-left: -190px;
			}
			
			img {
				/*图片和文字垂直居中对齐
				 *
				 * vertical-align对inline-block最敏感。默认属性是:vertical-align:baseline;
				 *
				 *
				 */
				vertical-align: middle;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="box1"></div>
		</div>

		<div><img src="../../img/1.png" />aaaaaaa</div>
	</body>

</html>

AnyBisks

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS样式（元素包含规范、规避脱标流、浮动盒子居中显示、图片和文字垂直居中对齐）

CSS样式（元素包含规范、规避脱标流、浮动盒子居中显示、图片和文字垂直居中对齐） /* 标签包含规范 *◆div可以包含所有的标签。 *◆p标签不能包含div h1等标签。 *◆h1可以包含p，div等标签。 *◆行内元素尽量包含行内元素，行内元素不要包含块元素。 */ /* 规避脱标流 *◆尽量使
复制链接

扫一扫