记一些前端页面问题和技巧

最新推荐文章于 2023-07-02 16:44:39 发布

wocnz

最新推荐文章于 2023-07-02 16:44:39 发布

阅读量172

点赞数

本文链接：https://blog.csdn.net/weixin_44596735/article/details/108065570

版权

本文记录了前端开发中遇到的问题及解决方案，包括transition过度效果的实现，以及居中布局的相关技巧。在transition问题上，由于未给表单初始位置赋值导致效果缺失。在居中布局方面，介绍了文字水平和垂直居中，以及多个div的水平显示方法，同时讨论了盒子高度塌陷的原因和解决策略。

摘要由CSDN通过智能技术生成

问题1
transition 过度效果只实现了一个，做的一个登录表单和注册表单的切换效果，给两个表单都加了transition但是只有一个有效果，原因是没有给另外的一个表单 left和top赋初值，没有初值就没有过渡的效果

技巧一：
居中问题：

文字的水平和垂直居中
text-align:center 水平居中

垂直居中

line-height:12px; 
 heigth:12px;

多个div水平显示
采用父盒子套住要水平显示的子盒子，采用浮动形式，但是浮动会出现脱离标准流的情况，在没有设定父盒子高度的时候，父盒子是不会随被子盒子撑大，反而是没有高度的。

div水平显示方法

.father .son{
	float:left;
}

符合子无高度解决方法

/*第一种：指定overflow 为hidden*/
overflow:hidden;

/*
第二种：清除浮动

*/
.father::before,.father::after{
	conntent:'';
	display:table;
	heigth:0
}
.father::after{
	clear:both;
}

/*第三种
直接设置宽度和高度
*/
height:200px;