前端开发——CSS笔记

最新推荐文章于 2024-06-03 09:15:36 发布

Jeremy Li

最新推荐文章于 2024-06-03 09:15:36 发布

阅读量107

点赞数

分类专栏：前端学习文章标签： javascript css html css3 html5

本文链接：https://blog.csdn.net/weixin_43408572/article/details/109367307

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

大学生一枚，最近在写前端代码。发现以前遇到过的技术问题，由于缺乏总结与复习，如今又再次碰到，让我觉得自己真是没一点进步，于是乎开始写博客。知道背单词重复的重要性，学其他怎么就坚持不下去呢？真傻！！！

写在前面：该死，出师未捷身先死，犯了个命名规则的错误：

class选择器命名规则

class命名规则
ID选择器命名规则

元素相对于父元素垂直居中的方法：
第一种：在父元素样式中加上如下代码（缺一不可）：
display: flex; justify-content: center; align-items: center;

在这里插入图片描述

测试文件内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试居中</title>
	<style>
		body{
			background-color:whitesmoke;
		}
		#father_div{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 256px;
			height: 256px;
			margin: 0 auto;
			background-color: #01AAED;
		}
		#children_div{
			width: 50px;
			height: 50px;
			background-color: #00FFFF;
		}
		#brother_div{
			width: 256px;
			height: 256px;
			margin: 0 auto;
			background-color: #01AAED;
		}
		#cousin_div{
			width: 50px;
			height: 50px;
			background-color: #00FFFF;
		}
	</style>
	</head>
	<body>
		<h1>元素相对于父元素垂直居中的方法一</h1>
		<div id="father_div">
			<div id="children_div"></div>
		</div>
		<h1>显然没居中</h1>
		<div id="brother_div">
			<div id="cousin_div"></div>
		</div>
	</body>
</html>

居中效果图：

其他方法用到再更新。。。

Jeremy Li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端开发——CSS笔记

大三学生一枚，最近在写前端代码。发现以前遇到过的技术问题，由于缺乏总结与复习，如今又再次碰到，让我觉得自己真是没一点进步，于是乎开始写博客。知道背单词重复的重要性，学其他怎么就坚持不下去呢？真傻！！！写在前面：该死，出师未捷身先死，犯了个命名规则的错误：class选择器命名规则ID选择器命名规则元素相对于父元素垂直居中的方法：第一种：在父元素中加上如下代码（缺一不可）：display: flex; justify-content: center; align-items: cent
复制链接

扫一扫