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

38
历届学生/韩一伟/每天课程/2021-06-30/index.html Normal file
View File

@@ -0,0 +1,38 @@
<!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>flex</title>
<style>
body,ul,li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
height: 45px;
display: flex;
justify-content: space-around;
align-items: center;
}
li {
}
</style>
</head>
<body>
<ul>
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li>测试4</li>
<li>测试5</li>
<li>测试6</li>
<li>测试7</li>
<li>测试8</li>
</ul>
</body>
</html>

44
历届学生/韩一伟/每天课程/2021-06-30/rem.html Normal file
View File

@@ -0,0 +1,44 @@
<!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>rem</title>
<script>
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
}
.box {
width: 7.5rem;
height: 7.5rem;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

38
历届学生/韩一伟/每天课程/2021-06-30/笔记.txt Normal file
View File

@@ -0,0 +1,38 @@
flex 弹性盒子
为了实现网页快速（很多事情交给浏览器去做）布局
布局兼容
13个css属性
第一个，开启弹性盒子(父元素身上)：
display: flex;
6个应用在父元素上的
flex-direction 设置元素排列方向 默认 row，可以设置 column 实现垂直放
flex-wrap 设置元素换行的，前提：手动设置一行放不下的条件才会换行
justify-content 设置元素在X轴的对齐方向
align-items 单行的时候设置元素在Y轴的对齐方向
align-content 多行的时候设置元素在Y轴的对齐方向
flex-flow flex-direction 和 flex-wrap 的简写
6个应用在子元素上的
order 改变元素的排列顺序，数值越小，越靠前
flex-grow 设置元素的放大比例
flex-shrink 设置元素的缩小比例 （0 是不缩小）
flex-basis 和width类似，主要用来设置元素宽度
flex 一个数值的时候是 flex-grow 的意思
align-self 允许某个元素在垂直方向设置不一样的对齐方式
rem 一种可以动态改变大小的字体尺寸单位
你写的尺寸 10rem * html上默认的font-size 16 == 160px
如何动态改变rem的 font-size 基准值
1：媒体查询
2：js实现