CSS 在您可以修改的内容方面非常强大，并且该
2024年11月17日
<!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>
</head>
<style>
.far-div {
width: 200px;
height: 100px;
background-color: skyblue;
}
.son-div {
width: 50%;
padding-bottom: 50%;
background-color: orangered;
}
</style>
<body>
<div class="far-div">
<div class="son-div"></div>
</div>
</body>
</html>2024年11月17日
在数字时代，图片是我们日常生活中不可或缺的一部分。无论是在社交媒体上分享照片，还是在网站上展示产品，图片的大小和质量都直接影响到观众的体验和信息的传达。因此，掌握如何调整图片大小是非常重要的。本文将详细介绍调整图片大小的方法、工具和注意事项。
1. 图片大小的概念 (Understanding Image Size)
2024年11月17日
src和href都是用来加载外部资源，区别如下
src当浏览器解析到该元素时，会暂停其他资源的加载和处理，直到该资源加载完成。 它会将资源内容嵌入到当前标签所在的位置，将其指向的资源下载应用到文档内，如js脚本等。常用在img、script、iframe等标签。
2024年11月17日
原文来源于：程序员成长指北；作者：Linkpan
如有侵权，联系删除
对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。
2024年11月17日
一次分清clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop概念：
clientHeight：可视的，看得见的部分，content+padding；
offsetHeight：在clientHeight基础上，添加“”边框“”，即content+padding+margin；
scrollTop：超过clientHeight“顶部界线”的部分，即看不见的、已经 滚动出去 的部分；
2024年11月17日
两句css代码实现全屏滚动效果
<body>
<div class="container">
<section>
<h3>第一屏内容</h3>
<p>
在父容器上使用scroll-snap-type 属性 <br>
第一个参数y 是y轴捕捉位置 <br>
mandatory 超过距离则自动滚动到下一个容器 <br>
scroll-snap-type:y mandatory <br>
在需要滚动的容器上使用 scroll-snap-align 属性 <br>
start 开始部分 end 结束部分 center 中间部分 <br>
scroll-snap-align:start; <br>
</p>
</section>
<section>
<h3>第二屏内容</h3>
<p>
在父容器上使用scroll-snap-type 属性 <br>
第一个参数y 是y轴捕捉位置 <br>
mandatory 超过距离则自动滚动到下一个容器 <br>
scroll-snap-type :y mandatory <br>
在需要滚动的容器上使用 scroll-snap-align 属性 <br>
start 开始部分 end 结束部分 center 中间部分 <br>
scroll-snap-align:start; <br>
</p>
</section>
<section>
<h3>第三屏内容</h3>
<p>
在父容器上使用scroll-snap-type 属性 <br>
第一个参数y 是y轴捕捉位置 <br>
mandatory 超过距离则自动滚动到下一个容器 <br>
scroll-snap-type :y mandatory <br>
在需要滚动的容器上使用 scroll-snap-align 属性 <br>
start 开始部分 end 结束部分 center 中间部分 <br>
scroll-snap-align:start; <br>
</p>
</section>
</div>
</body>