前端项目笔记

最新推荐文章于 2023-07-08 23:06:18 发布

Conqueror杰

最新推荐文章于 2023-07-08 23:06:18 发布

阅读量372

点赞数 1

分类专栏： Web前端开发文章标签：前端笔记项目笔记 js盒子居中左侧固定布局右侧自适应滚动到底部加载数据

本文链接：https://blog.csdn.net/weixin_40890907/article/details/82259883

版权

Web前端开发专栏收录该内容

20 篇文章 3 订阅

订阅专栏

1.图片与文字在同一行上显示，要对齐，可以给图片使用vertical-align: top

2.盒子居中
a. margin: 0 auto;
b. display: flex;
justify-content: center;
align-items: center;
c. 父
position: relative;
子
position: absolute;
top:50%;
left: 50%;
transform：translateX(-50%)
transform：translateY(-50%)

3.实现文字一行显示...
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

4. 设计图片背景模糊
父元素
position: relative;
background-color: rgba(7,17,27,0.5);
子元素（背景）
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
filter: blur(10px);

5. 清除浮动
.clearfix {
display: inline-block;
}
.clearfix:after {
display: block;
content: '.';
height: 0;
line-height: 0;
clear: both;
visibility: hidden;
}

6. Sticky Footer 绝对底部
a、<div class="content">
<p>填充内容</p>
<hr />
</div>
<div class="footer">
<p>这是页脚@WiseWrong</p>
</div>

CSS:
html, body {
display: flex;
height: 100%;
flex-direction: column;
}

body .content {
flex: 1;
}
b、<body>
<div class="wrapper clearfix">
<div class="content"></div>
</div>　
　　<div class="footer"></div>
</body>

html, body, .wrapper {
height: 100%;
}
body > .wrapper {
height: auto; min-height: 100%;
}
.content {
padding-bottom: 150px; /* 必须使用和footer相同的高度 */
}
.footer {
position: relative;
margin-top: -150px; /* footer高度的负值 */
height: 150px;
clear:both;
}

7. 在vue中应用过度动画
<div v-show="aaa" class="popPage" transition="fade"></div>

.popPage {
transition: all 0.5s;
&.fade-transition {
opacity: 1;
background: rgba(7,17,27,0.8);
}
&.fade-enter,&.fade-leave {
opacity: 0;
background: rgba(7,17,27,0);
}
}

8. 左侧固定宽度，右侧自适应布局
.parent {
display: flex;
.left {
flex: 0 0 60px;
}
.right {
flex: 1;
}
}

9. 文字垂直居中

a、盒子高度与行高一致

b、display: table;

10 滚动分页加载/上滑加载
document.addEventListener('scroll', function () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
if (document.body.scrollHeight == scrollTop + window.innerHeight) {
if (houseType === 2) {
getSellDetail()
} else {
getDetail1()
}
}
});

11 获取URL上的参数
let authCode = this.$route.query.auth_code || this.url_queryString('auth_code')
url_queryString(name) {
var rex = new RegExp('[?&]s*' + name + 's*=([^&$#]*)', 'i')
var r = rex.exec(location.search)

if (r && r.length === 2) {
return decodeURIComponent(r[1])
}
}
12 placeholder 样式修改
input::-webkit-input-placeholder{color:red;}
input:focus::-webkit-input-placeholder{color:green;}
input::-webkit-input-placeholder {
color: #aaa;
}

13. 获取元素宽度
this.$nextTick(() => {
const widthLen = document.querySelector('.station-lists').offsetWidth
this.progressWidth = (widthLen + 16) * 2 / 75
console.log(widthLen)
// document.styleSheets[0].addRule('.underline::after',`width: ${str}`);
})
14. 禁止用户选中文字 -webkit-user-select:none