学前端已经有一段时间了，最近在对前端基础知识做一个梳理总结，今天联系页面的时候遇到了一个浮动元素造成父级高度塌陷的问题，为了弄清楚这个问题，我也是好一番查资料，原来MDN上专门介绍过解决这个问题的办法，下面我就来分享一下我个人的心得。
首先，我先说一下我遇到的问题是什么？
下面是两个容器元素box和box1，其中box1是子元素。
2024年11月26日
学前端已经有一段时间了，最近在对前端基础知识做一个梳理总结，今天联系页面的时候遇到了一个浮动元素造成父级高度塌陷的问题，为了弄清楚这个问题，我也是好一番查资料，原来MDN上专门介绍过解决这个问题的办法，下面我就来分享一下我个人的心得。
下面是两个容器元素box和box1，其中box1是子元素。
2024年11月26日
block: 块级元素
inline: 行级(内联)元素
inline-block: 行内块元素,既在同一行内呈现,也能设置width,height
none: 隐藏元素
float属性
float: left | right | none;
float可以让上下排列的块元素左右排列.
2024年11月26日
来，开整
先来看看啥是无缝滚动：
这看着只有四张图片，但是不管往前还是往后拖动，都可以无限拖，感觉就是把四张图片无限循环了一样，这种效果在页面中算是最常见的交互效果之一了，都1202年了，基本功要扎实哦~
其实实现的基本原理非常简单
第一步，先把图片复制一份，四张变八张
如果图片数量更多的话，可以做成别的方案，几张图片的话就无所谓了
如果是几十张图片，那就直接做成一个3D的圆环，还是那句话，有解决思路最重要。
2024年11月26日
当我们在Spring Cloud应用中使用Consul来实现服务治理时，由于Consul不会自动将不可用的服务实例注销掉（deregister），这使得在实际使用过程中，可能因为一些操作失误、环境变更等原因让Consul中存在一些无效实例信息，而这些实例在Consul中会长期存在，并处于断开状态。它们虽然不会影响到正常的服务消费过程，但是它们会干扰我们的监控，所以我们可以实现一个清理接口，在确认故障实例可以清理的时候进行调用来将这些无效信息清理掉。
开始以为只要简单的调用注销接口就能轻松完成，但是实际实践的发现并非如此。因此，分享一下整个实现过程以及中间遇到的一些坑。
2024年11月26日
wordpress主题trans的首页模板的左侧文章列表，在上一节中，我们已经做了修改，实现了从wordpress的数据库中调用。但是，wordpress网站的文章肯定有很多很多，这时，如果把所有的文章都显示在同一个页面，这好像不太好，也不利于用户的浏览。所以，wordpress网站的后台可以设置每个页面显示多少篇文章，默认情况下，是每个页面显示10篇，剩下的文章列表，会以分页的形式显示。
在trans主题的静态模板中，我们没有做分页效果，所以，在本节中，我们不仅要添加分页的功能，还要添加分页的展示效果的CSS样式。那么，怎样给trans主题首页左侧的文章列表添加分页效果呢？
2024年11月26日
圣杯布局和双飞翼布局
圣杯布局&双飞翼布局
我们能够发现，其实圣杯布局和双飞翼布局非常相像。因为圣杯布局是阿里巴巴的玉伯（Sea.js的创始人）根据圣杯布局来改造的。用于两边的子面板固定，中间区域自适应的布局。
圣杯布局存在一个缺点：就是当我们的 .middle 设置的宽度比两边小的时候，布局就会乱掉。双飞翼在中间的区域添加了一个子节点，给父节点添加margin属性来左右面板留出空间。用margin来撑开空间。
2024年11月26日
浮动会造成父标签塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin:0}
#d1{
border:3px solid black
}
#d2{width:50px;height:50px;background:red;}
#d3{width:50px;height:50px;background:blue;}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>
</html>