Web前端开发之CSS学习笔记8—居中和自适应

云卷云舒_jing

已于 2022-05-24 23:13:40 修改

阅读量1.9k

点赞数 2

分类专栏： web前端文章标签： css 前端学习

于 2022-05-24 23:03:27 首次发布

本文链接：https://blog.csdn.net/qq_45709187/article/details/124909517

版权

web前端专栏收录该内容

14 篇文章 9 订阅

订阅专栏

1.居中

①文本水平居中：text-align: center;

②文本垂直居中line-height：line-height是一种文本属性，指示行高，浏览器默认的行高较小，通常使段落文字显得比较密集，增加行高可以使段落看上去更加舒服。行高可以以像素作为单位，如(px,em),也可以以百分比作为单位。

line-height除了调节文本行高距离之外，还可以实现文字垂直居中的效果。在块级元素中，将line-height属性值设置为块级元素的height值即可垂直居中块级元素内的文字，前提是该块级元素的内容只有一行，否则行高等于高度也不现实。

③div水平居中：margin: auto; margin外边距设置为auto可以实现其水平居中的效果，但是前提是必须设置好div的宽度width。

④div垂直居中：position: absolute; 通过position将top，right，button，left设值为0，使得浏览器去自动平均div的剩余空间。

1.1水平居中

例子1：div实现水平居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>居中演示</title>
		<style type="text/css">
			div{
				width: 600px;
				height: 200px;
				border-radius: 50px; /*圆角边距*/
				color: red;
				background-color: aliceblue;
				text-align: center; /*文本水平居中。（text-align设置元素中的文本对齐方式,只对文本有效，对元素无效）*/
				margin: auto; /*div水平居中。（margin外边距设置为auto可以实现其水平居中的效果，但是前提是必须设置好宽度width）*/
			}
			span {
				font-size: 30px;
				line-height: 200px;/*文本垂直居中。（line-height设置行高，可实现垂直居中的作用。ps:设置和div盒子一样的高度，就使得span里的文本居中）*/
			}
			p{
				font-size: 30px;
				text-align: center;/*文本水平居中*/
				height: 300px;
				line-height: 300px;/*文本垂直居中。设值和p的height值一样可实现垂直居中*/
				background-color: beige;
				color: blue;
			}
		</style>
	</head>
	<body>
		<div><span>div水平居中，文本水平垂直居中</span></div>
		<p>文本水平垂直居中</p>
	</body>
</html>

ps.例子2：line-height调节行距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>调节行距</title>
		<style>
			p.small {line-height:70%;}
			p.big {line-height:200%;}
		</style>
	</head>
	<body>
		<p>
		这是一个标准行高的段落。<br>
		这是一个标准行高的段落。<br>
		大多数浏览器的默认行高约为110%至120%。<br>
		</p>
		
		<p class="small">
		这是一个更小行高的段落。<br>
		这是一个更小行高的段落。<br>
		这是一个更小行高的段落。<br>
		这是一个更小行高的段落。<br>
		</p>
		
		<p class="big">
		这是一个更大行高的段落。<br>
		这是一个更大行高的段落。<br>
		这是一个更大行高的段落。<br>
		这是一个更大行高的段落。<br>
		</p>
	</body>
</html>

1.2垂直居中

通过position将top，right，button，left设值为0，使得浏览器自动去平均分配div的剩余空间

例子3：div实现垂直居中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直居中演示</title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
				border-radius: 50px; /*圆角边距*/
				color:pink;
				background-color: beige;
				text-align: center; /*文本水平居中*/
				margin: auto; /*div水平居中*/
				
				/*通过position将top，right，button，left设值为0，使得浏览器去自动平均div的剩余空间*/
				position: absolute;/*相对于父元素进行定位*/
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
			}
			span {
				font-size: 30px;
				line-height: 300px;/*文本垂直居中*/
			}
		</style>
	</head>
	<body>
		<div><span>文字居中，div居中</span></div>
	</body>
</html>

例子4：双div设置居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直居中演示</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border-radius: 10px; /*圆角边距*/
				color:black ;
				background-color: beige;
				text-align: center; /*文本水平居中*/
				margin: auto; /*div水平居中*/
				
				/*通过position将top，right，button，left设值为0，使得浏览器去自动平均div的剩余空间*/
				position: absolute;/*相对于父元素进行定位*/
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
			}
			.container{
				height:300px;
				width: 300px;
				background-color: aliceblue;
				position: relative;/*相对于其正常位置进行定位*/
			}
			span {
				font-size: 20px;
				line-height: 200px;/*文本垂直居中*/
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div>
				<span>居中</span>
			</div>
		</div>
	</body>
</html>

2.单列布局自适应

例子5：单列布局演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单列布局</title>
		<style type="text/css">
			header,main,footer{
				max-width: 1024px;
				margin: auto;
				text-align: center;
			}
			header{
				height: 50px;
				line-height: 50px;
				background-color: beige;
			}
			main{
				height: 200px;
				line-height: 200px;
				background-color: aliceblue;
			}
			footer{
				height: 50px;
				line-height: 50px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<header>头部</header>
		<main>内容</main>
		<footer>尾部</footer>
	</body>
</html>

例子6：单列布局演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单列布局</title>
		<style type="text/css">
			.content{
				max-width: 1024px;
				margin: auto;
				text-align: center;
			}
			header{
				height: 50px;
				line-height: 50px;
				background-color: beige;
			}
			main{
				height: 200px;
				line-height: 200px;
				background-color: aliceblue;
			}
			footer{
				height: 50px;
				line-height: 50px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<header>
			<div class="content">头部</div>
		</header>
		<main class="content">内容</main>
		<footer>
			<div class="content">尾部</div>
		</footer>
	</body>
</html>

3.双列布局自适应

3.1双列自适应

例子7：调整网页大小，两列宽度随网页大小自适应

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自适应</title>
		<style type="text/css">
			.container{
				max-width: 1024px;
				margin: auto;
			}
			.left{
				width: 50%;
				padding: 20px;
				box-sizing: border-box;/*盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）,加了box-sizing:border-box属性，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里*/
				background-color: aliceblue;
				float:left;/*表示向左浮动，比如多个div在一个页面上，默认情况是：一行一个div，但是只要在div的css中使用float：left，可以使一行有多个div，这样可以把网页划分成很多块*/
			}
			.right{
				width: 50%;
				padding: 20px;
				box-sizing: border-box;
				background-color: beige;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. A repudiandae nemo ipsa pariatur optio at possimus unde fuga magnam rerum sequi quaerat quam inventore dolor doloribus deleniti reiciendis quis dolorem?
				</p>
			</div>
			<div class="right">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit incidunt voluptates a ipsam vel rem et repudiandae architecto expedita beatae magnam nisi provident tempora! Odio optio dolorem delectus beatae animi.
				</p>
			</div>
		</div>
	</body>
</html>

3.2半边固定半边自适应

侧边栏固定宽度，主内容自适应。如：调整网页大小，左侧宽度不变，右侧随着网页大小变化。

① float浮动实现单侧自适应

例子8：float:left

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>侧边栏自适应</title>
		<style type="text/css">
			aside{
				width: 200px;
				height: 500px;
				background-color: pink;
				float: left;
			}
			main{
				height: 500px;
				margin-left: 200px;/*此值需要和asaide的width值相同*/
				background-color:lightgray;
			}
		</style>
	</head>
	<body>
		<aside></aside>
		<main></main>
	</body>
</html>

② position实现单侧自适应，只要position设置非static的属性值就可以了。

例子9：position: relative;结果和上个例子一样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>侧边栏自适应</title>
		<style type="text/css">
			aside{
				width: 200px;
				height: 500px;
				background-color: pink;
				position: absolute;
				top: 0;
				left: 0;
			}
			main{
				height: 500px;
				margin-left: 200px;/*此值需要和asaide的width值相同*/
				background-color: beige;
			}
			.container{
				position: relative;/*只要设置非static的属性值就可以了*/
			}
		</style>
	</head>
	<body>
		<div class="container">
			<aside></aside>
			<main></main>	
		</div>
	</body>
</html>

例子10：若不设置position: relative;结果如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>侧边栏自适应</title>
		<style type="text/css">
			aside{
				width: 200px;
				height: 500px;
				background-color: pink;
				position: absolute;
				top: 0;
				left: 0;
			}
			main{
				height: 500px;
				margin-left: 200px;/*此值需要和asaide的width值相同*/
				background-color: lightgray;
			}
	
		</style>
	</head>
	<body>
		<div class="container">
			<aside></aside>
			<main></main>	
		</div>
	</body>
</html>

例子11：以下方法也可以实现侧边栏自适应

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>侧边栏自适应</title>
		<style type="text/css">
			aside{
				width: 200px;
				height: 500px;
				background-color: pink;
				position: absolute;
			}
			main{
				height: 500px;
				margin-left: 200px;/*此值需要和asaide的width值相同*/
				background-color: lightgray;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<aside></aside>
			<main></main>	
		</div>
	</body>
</html>

3.三列布局自适应

三列布局，两侧固定，中间自适应。

3.1浮动法

例子12：float浮动实现三列布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三列布局</title>
		<style type="text/css">
			.left{
				width: 200px;
				height: 500px;
				float: left;
				background-color: aliceblue;
			}
			.right{
				width: 200px;
				height: 500px;
				float: right;
				background-color: beige;
			}
			.center{
				height: 500px;
				margin: 0 200px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="left"></div>
		<div class="right"></div>
		<div class="center"></div>
	</body>
</html>

3.2绝对定位法

例子13：绝对定位position:absolute实现三列布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位法</title>
		<style type="text/css">
			.left{
				width: 200px;
				height: 500px;
				position: absolute;
				top: 0;
				left: 0;
				background-color: aliceblue;
			}
			.right{
				width: 200px;
				height: 500px;
				position: absolute;
				top: 0;
				right: 0;
				background-color: beige;
			}
			.center{
				height: 500px;
				margin: 0 200px;
				background-color: pink;
			}
			.container{
				position: relative;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left"></div>
			<div class="center"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

3.3margin负值法

例子14：margin负值实现三列布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>margin负值法</title>
		<style type="text/css">
			.container{
				width: 100%;
				float: left;
			}
			.center{
				height: 500px;
				margin: 0 200px;
				background-color: aliceblue;
			}
			.left{
				width: 200px;
				height: 500px;
				float: left;
				margin-left: -100% ;
				background-color: beige;
			}
			.right{
				width: 200px;
				height: 500px;
				float: left;
				margin-left: -200px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="center"></div>
		</div>
		<div class="left"></div>
		<div class="right"></div>
	</body>
</html>

注：如果没有margin-left: -100% 会是什么样的结果

center所在的父盒子width是100%，于是左盒子在视觉上就会被挤到下一行，而设置margin-left:-100%可以将将左盒子向上移动一行。

例子15：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>margin负值法</title>
		<style type="text/css">
			.container{
				width: 100%;
				float: left;
			}
			.center{
				height: 500px;
				margin: 0 200px;
				background-color: pink;
			}
			.left{
				width: 200px;
				height: 500px;
				float: left;
				
				background-color: aliceblue;
			}
			.right{
				width: 200px;
				height: 500px;
				float: left;
				margin-left: -200px;
				background-color: beige;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="center"></div>
		</div>
		<div class="left"></div>
		<div class="right"></div>
	</body>
</html>

4.经典布局

4.1双飞翼布局

例:16：双飞翼布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双飞翼布局</title>
		<style type="text/css" >
			header{
				width: 100%;
				height: 30px;
				background-color: grey;
			}
			main{
				overflow: hidden;
			}
			footer{
				width: 100%;
				height: 30px;
				background-color: gray;
			}
			.container{
				width: 100%;
				float: left;
			}
			.center{
				height: 500px;
				margin: 0 200px;
				background-color: pink;
			}
			.left{
				width: 200px;
				height: 500px;
				float: left;
				margin-left: -100%;
				background-color: beige;
			}
			.right{
				width: 200px;
				height: 500px;
				float: left;
				margin-left: -200px;
				background-color: aliceblue;
			}
		</style>
	</head>
	<body>
		<header></header>
		<main>
			<div class="container">
				<div class="center"></div>
			</div>
			<div class="left"></div>
			<div class="right"></div>
		</main>
		<footer></footer>
	</body>
</html>

4.2圣杯布局

例子17：圣杯布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圣杯布局</title>
		<style type="text/css">
			body{
				min-width: 600px;
			}
			main{
				padding: 0 200px;
			}
			.column{
				float: left;
			}
			#center{
				width: 100%;
				height: 500px;
				background-color: pink;
			}
			#left{
				width: 200px;
				height: 500px;
				margin-left: -100%;
				position: relative;
				right: 200px;
				background-color: aliceblue;
			}
			#right{
				width: 200px;
				height: 500px;
				margin-right: -200px;
				background-color: beige;
			}
			header{
				height: 30px;
				background-color: gray;
			}
			footer{
				height: 30px;
				background-color: gray;
				clear: both;
			}
		</style>
	</head>
	<body>
		<header></header>
		<main>
			<div id="center" class="column"></div>
			<div id="left" class="column"></div>
			<div id="right" class="column"></div>
		</main>
		<footer></footer>
	</body>
</html>

4.3瀑布流布局

例子18：瀑布流布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>瀑布流布局</title>
		<style type="text/css">
			body{
				background-color: aliceblue;
				margin: 10px;
			}
			#page{
				width: 888px;
				margin: 0 auto;
			}
			.col{
				column-count: 3;
				column-gap: 13px;
			}
			.picture{
				background: #fff7e0;
				padding: 20px;
				margin-bottom: 20px;
				box-shadow: 0 0 5px rgba(0,0,0,0.5);
			}
			.picture img{
				width: 260px;
			}
		</style>
	</head>
	<body>
		<div id="page">
			<div class="col">
				<div class="picture">
					<img src="pic/huozhe.jpg" />
					<p>《活着》讲述了在大时代背景下，随着内战、三反五反、大跃进、“文化大革命”等社会变革，徐福贵的人生和家庭不断经受着苦难，到了最后所有亲人都先后离他而去，仅剩下年老的他和一头老牛相依为命。小说以普通、平实的故事情节讲述了在急剧变革的时代中福贵的不幸遭遇和坎坷命运，在冷静的笔触中展现了生命的意义和存在的价值，揭示了命运的无奈，与生活的不可捉摸</p>
				</div>
				<div class="picture">
					<img src="pic/kongyiji.jpg" />
					<p>《孔乙己》描写了孔乙己在封建腐朽思想和科举制度毒害下，精神上迂腐不堪、麻木不仁，生活上四体不勤、穷困潦倒，在人们的嘲笑戏谑中混度时日，最后被封建地主阶级所吞噬的悲惨形象。篇幅不长，但是深刻揭露了当时科举制度对知识分子精神的毒害和封建制度“吃人”的本质，具有强烈的反封建意义。 </p>
				</div>
				<div class="picture">
					<img src="pic/bainian.jpg"" />
					<p> 作品描写了布恩迪亚家族七代人的传奇故事，以及加勒比海沿岸小镇马孔多的百年兴衰，反映了拉丁美洲一个世纪以来风云变幻的历史。作品融入神话传说、民间故事、宗教典故等神秘因素，巧妙地糅合了现实与虚幻，展现出一个瑰丽的想象世界，成为20世纪重要的经典文学巨著之一。</p>
				</div>
				<div class="picture">
					<img src="pic/xiyouji.jpg"" />
					<p> 全书主要描写了孙悟空出世及大闹天宫后，遇见了唐僧、猪八戒、沙僧和白龙马，西行取经，一路上历经艰险，降妖除魔，经历了九九八十一难，终于到达西天见到如来佛祖，最终五圣成真的故事。该小说以“玄奘取经”这一历史事件为蓝本，经作者的艺术加工，深刻地描绘出明代百姓的社会生活状况。</p>
				</div>
				<div class="picture">
					<img src="pic/hong.jpg"" />
					<p>《红楼梦》，中国古代章回体长篇小说，中国古典四大名著之一，通行本共120回，一般认为前80回是清代作家曹雪芹所著，后40回作者为无名氏，整理者为程伟元、高鹗。小说以贾、史、王、薛四大家族的兴衰为背景，以富贵公子贾宝玉为视角，以贾宝玉与林黛玉、薛宝钗的爱情婚姻悲剧为主线，描绘了一些举止见识出于须眉之上的闺阁佳人的人生百态，展现了真正的人性美和悲剧美，可以说是一部从各个角度展现女性美以及中国古代社会世态百相的史诗性著作。 </p>
				</div>
				<div class="picture">
					<img src="pic/sanguo.jpg"" />
					<p> 《三国演义》可大致分为黄巾起义、董卓之乱、群雄逐鹿、三国鼎立、三国归晋五大部分，描写了从东汉末年到西晋初年之间近百年的历史风云，以描写战争为主，诉说了东汉末年的群雄割据混战和魏、蜀、吴三国之间的政治和军事斗争，最终司马炎一统三国，建立晋朝的故事。反映了三国时代各类社会斗争与矛盾的转化，并概括了这一时代的历史巨变，塑造了一群叱咤风云的三国英雄人物</p>
				</div>
				<div class="picture">
					<img src="pic/shuihu.jpg"" />
					<p>全书通过描写梁山好汉反抗欺压、水泊梁山壮大和受宋朝招安，以及受招安后为宋朝征战，最终消亡的宏大故事，艺术地反映了中国历史上宋江起义从发生、发展直至失败的全过程，深刻揭示了起义的社会根源，满腔热情地歌颂了起义英雄的反抗斗争和他们的社会理想，也具体揭示了起义失败的内在历史原因 </p>
				</div>
				<div class="picture">
					<img src="pic/yue.jpg"" />
					<p> 作品以法国后印象派画家保罗·高更的生平为素材，描述了一个原本平凡的伦敦证券经纪人思特里克兰德，突然着了艺术的魔，抛妻弃子，绝弃了旁人看来优裕美满的生活，奔赴南太平洋的塔希提岛，用画笔谱写出自己光辉灿烂的生命，把生命的价值全部注入绚烂的画布的故事。</p>
				</div>
				<div class="picture">
					<img src="pic/ping.jpg"" />
					<p> 该书以中国70年代中期到80年代中期十年间为背景，通过复杂的矛盾纠葛，以孙少安和孙少平两兄弟为中心，刻画了当时社会各阶层众多普通人的形象；劳动与爱情、挫折与追求、痛苦与欢乐、日常生活与巨大社会冲突纷繁地交织在一起，深刻地展示了普通人在大时代历史进程中所走过的艰难曲折的道路。</p>
				</div>
			</div>
		</div>
	</body>
</html>

学习视频：B站小甲鱼

云卷云舒_jing

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发之CSS学习笔记8—居中和自适应

目录1.居中1.1水平居中1.2垂直居中2.单列布局3.双列布局3.1双列自适应3.2半边固定半边自适应3.三列布局3.1浮动法3.2绝对定位法3.3margin负值法4.经典布局4.1双飞翼布局4.2圣杯布局4.3瀑布流布局1.居中①文本水平居中：text-align: center;②文本垂直居中line-height：line-height是一种文本属性，指示行高，浏览器默认的行高较小，通常使段落文字显得比较密集，增加行高可以
复制链接

扫一扫