bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
历届学生/zheng-yuqing/每天上课/2022-05-03/index.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<style>
body,
ul,
li {
margin: 0;
list-style: none;
padding: 0;
}
ul {
display: flex;
height: 45px;
background: #8d8d8d;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
li {
width: 25%;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>社会</li>
<li>军事</li>
<li>体育</li>
<li>政治</li>
<li>科技</li>
<li>热点</li>
<li>实时</li>
</ul>
</body>
</html>

32
历届学生/zheng-yuqing/每天上课/2022-05-03/笔记.txt Normal file
View File

@@ -0,0 +1,32 @@
布局的动态适配
display: flex
作用：快速让页面实现居中对齐的（浏览器自动帮我们对齐）
总共13个css属性
display: flex 开启弹性盒子
注意：1 在你想设置对齐子元素的最近的那个父元素上开启
2 父元素如果开启弹性盒子，那么子元素的float、clear和vertical-align将失效
3 父元素如果开启了弹性盒子，子元素如果没有设置高度，那么子元素的高度默认继承父元素
6个应用在父元素上的
align-items: center; 设置Y轴对齐的
justify-content: space-between; 设置X轴对齐的
flex-wrap: wrap; 设置一行放不下的时候，是否换行（注意：需要手动指定一行放多少个）
flex-direction 设置元素的排列方向（默认是row 横放）
注意：如果设置了 column
那么 align-items 和 justify-content 作用将相互颠倒
align-content 如果有多行子元素，那么使用这个属性进行对齐
6个应用在子元素上的
order 设置子元素的排列顺序，数值越小越靠前
flex-shrink: 0; 让子元素在空间不足的时候不缩小
一般实现横向滑动
flex-grow 定义子元素的放大比例
flex 是 flex-grow flex-shrink flex-basis 的简写
flex: 1; 代指： flex-grow: 1