（7）HTML&&CSS笔记（垂直对齐、背景样式）

最新推荐文章于 2024-06-24 11:40:44 发布

原创最新推荐文章于 2024-06-24 11:40:44 发布 · 335 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS

HTML&&CSS 专栏收录该内容

21 篇文章

订阅专栏

本文深入探讨了CSS中的垂直对齐方式，包括基线、顶部、中部和底部对齐，适用于行内和行内块元素。讲解了块级元素的水平居中技巧，以及背景属性的综合使用，如背景颜色、图片、平铺、定位和大小调整，包括CSS3的background-size特性。

1、vertical-align：垂直对齐方式

baseline 基线对齐
top 顶部对齐
middle 中部对齐
bottom 底部对齐

什么情况才会产生这个垂直对齐方式的问题？
垂直对齐：垂直方向上而不是水平方向；
对齐：上对齐，中对齐，下对齐；
适用范围：行内样式（inline）/行内块元素（inline-block）;

2、块级样式属性
块级元素默认宽度为100%；如果说需要盒子水平居中的话，只需要把盒子的宽度定死。

<!doctype html>
<html>
	<head>
		<meta charset='utf-8'/>
		<title> Document </title>
		<meta name='keywords' content=''/>
		<meta name='description' content=''/>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			.mydiv1{
				width:200px;
				height:200px;
				background-color:#f90;
				margin:auto;
			}
			p{
				/* width:100px; */
				text-align:center;
				background-color:#00f;
				margin:auto;
			}
			.mydiv2{
				width:500px;
				background-color:#90f;
				margin:auto;
			}
		</style>
	</head>
	<body>
		<div class='mydiv1'>
			<p>我是div标签</p>
		</div>
		<div class='mydiv2'>我是div标签</div>
	</body>
</html>

3、背景属性
background 背景：本属性本身包含很多样式属性，不建议单独拿出来写单个样式。

background-color 背景颜色
background-image 背景图片
background-repeat 背景平铺

no-repeat 不平铺
repeat-x 水平平铺
repeat-Y 垂直平铺

background-size：背景大小（css3）
有两个值：x方向上的，y方向上的

100% （背景图片）与盒子宽度高度相等；
px 像素单位；
cover 等比例缩放，直到铺满x轴与y轴部分，有部分内容显示不出来的；
contain 等比例缩放x轴和y轴其中的一个方向。

background-position 背景定位
left center right 左中右
top center bottom 上中下
如果说只写一个值，那么第二个值为默认center；

background-attachment：fixed；背景关联（如下例所示）

<!doctype html>
<html>
	<head>
		<meta charset='utf-8'/>
		<title> Document </title>
		<meta name='keywords' content=''/>
		<meta name='description' content=''/>
		<style type="text/css">
			
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height:100%;
				width:100%;
			}
			div{
				width:100%;
				height:100%;
				background-color:#90f;
				background-attachment:fixed;
			}
			div.bg1{
				background-image:url(2.png);
				background-size:cover;
			}
			div.bg2{
				background-image:url(3.png);
				background-size:cover;
			}
			div.bg3{
				background-image:url(4.png);
				background-size:cover;
			}
			div.bg4{
				background-image:url(5.png);
				background-size:cover;
			}
		</style>
	</head>
	<body>
		<div class="bg1"></div>
		<div class="bg2"></div>
		<div class="bg3"></div>
		<div class="bg4"></div>
	</body>
</html>

4、多背景属性
background：颜色值图片是否平铺位置/大小

<!doctype html>
<html>
	<head>
		<meta charset='utf-8'/>
		<title> Document </title>
		<meta name='keywords' content=''/>
		<meta name='description' content=''/>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			.mydiv{
				width:1000px;
				height:400px;
				border:2px solid #0f0;
				margin:50px auto 0;
/* 				background-image:url( '1.png' );
				background-repeat:no-repeat;
				background-size:200px 200px;
				background-position:center center; */
				background:url('1.png') no-repeat top left / 200px, url('2.png') no-repeat right center / 200px;
				background-color:#f90;
			}
		</style>
	</head>
	<body>
		<div class='mydiv'></div>
	</body>
</html>