记录学习 @搬砖界泰斗这只小狐狸 的静态QQ登陆页面源码，了解静态登陆页面如何书写&&拓宽自己对css的理解
Q1：用css调节子级元素位置时什么时候调节margin，什么时候调节padding？
A1：margin对外，padding对内
e.g.要实现一个这样的排版
有一个大大盒子fafather，里面其中一个是大盒子father，再有两个小盒子，son-img&&son-p
<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>演示文案1</title><link rel="stylesheet" href="./登录.css">
</head>
<body><div class="fafather"><div class="father"><div class="son-img">img</div><div class="son-p">p</div></div><div class="other"></div></div>
</body>
</html>
- 整体位置在页面的左上角距离左边70px
无脑调节father的margin【调节father在上级fafather里的位置】
*{margin: 0;padding: 0;box-sizing: border-box;
}
body {background-color: aqua;
}
.fafather {float: left;background-color: antiquewhite;width: 100%;height: 100px;
}
.father{margin: 0 70px;float: left;width: 33%;height: 100px;background-color: azure;}
.other{float: right;margin: 0 5px;width: 50%;height: 100px;background-color: black;
}
.son-img{float: left;height: 100px;width: 100px;background-color: rgb(94, 94, 194);}
.son-p{/* float: right; */background-color: rgb(44, 196, 166);height: 100%;/* width: 300px; */
}
- son-img和son-p之间距离存在距离
也别调节什么padding margin了，直接用float-left，float-right绝绝子
*{margin: 0;padding: 0;box-sizing: border-box;
}
body {background-color: aqua;
}
.fafather {float: left;background-color: antiquewhite;width: 100%;height: 100px;
}
.father{margin: 0 70px;float: left;width: 33%;height: 100px;background-color: azure;}
.other{float: right;margin: 0 5px;width: 50%;height: 100px;background-color: black;
}
.son-img{float: left;height: 100px;width: 100px;background-color: rgb(94, 94, 194);}
.son-p{float: right;background-color: rgb(44, 196, 166);height: 100%;width: 300px;
}
CNCLD1:基本上跨级用margin，同级用float-X属性
p.s.一次性调节上下左右，之间用空格隔开【上 右 下 左，上 左右 下，上下 左右】
我靠，感觉自己会布局了！
然而并没有，我要有>2个元素水平放怎么办？
还是用flex布局
float用于2个盒子排布，flex更flex哈哈哈
<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>演示文案1</title><link rel="stylesheet" href="./登录.css">
</head>
<body><div class="fafather"><div class="father"><div class="son-img">img</div><div class="son-p1">p</div><div class="son-p2">p</div><div class="son-p3">p</div></div><div class="other"></div><div class="another"></div><div class="others"></div></div>
</body>
</html>
*{margin: 0;padding: 0;box-sizing: border-box;
}
body {background-color: aqua;
}
.fafather {/* float: left; */background-color: antiquewhite;width: 100%;height: 100px;display: flex;flex-direction: row;
}
P{display:block;
}
.father{margin: 0 70px;/* float: left; */width: 33%;/* height: 100px; */background-color: azure;display: flex;flex-direction: row;
}.other{/* float: right; */margin: 0 5px;width: 50%;/* height: 100px; */background-color: black;}
.another{/* float: right; */margin: 0 5px;width: 50%;/* height: 100px; */background-color: black;}
.others{/* float: right; */margin: 0 5px;width: 50%;/* height: 100px; */background-color: black;}
.son-img{
width: 25%;
background-color: rgba(217, 74, 74, 0.576);
}
.son-p1{
width: 25%;
background-color: cadetblue;
}
.son-p2{
width: 25%;
background-color: rgb(18, 223, 230);
}
.son-p3{
width: 25%;
background-color: cadetblue;
}
float就图一乐，还是flexyyds
Q2：怎么调节图片透明度？
A2：
opacity: 0.8;
/* 0[全透明]--1【完全不透明，默认】 */
美中不足
因为文字和图片在同一个层级（即它们的父元素没有设置背景）。当你调节图片的透明度时，文字会受到影响，因为它们都是在同一个上下文中绘制的。
improvement
- 使用绝对定位：将文字放在图片上方，确保它们在不同的层级。
牺牲图片里有文字效果 - 使用背景图：将图片设置为元素的背景，而不是作为
标签，这样你可以独立控制透明度
图片有盒子大小要求
.container {background-image: url('image.jpg');background-size: cover;opacity: 0.5; /* 背景透明 */color: black; /* 文字不透明 */
}- 使用伪元素：使用 ::before 或 ::after 伪元素为容器添加背景图片。
然并卵，没人鸟我，先搁置
Q3:怎么使得图片和文字一行对齐？
A3：使用vertical-align: baseline;
我觉得我可以搞一个登陆页面了好好好，开做！
[今天晚了，先去构思，明天再实现哈哈哈]
