前端杂记
1.处理html显示的时候中文乱码
2.移动端与web端兼容性
3.margin 与 padding区别
4.计算属性
5.针对不对的分辨率显示不同的样式--@media
6.显示滚动条
7.扩大按钮点击范围
8.等待前一个函数执行完，才继续往下执行
10.样式优先级
11.固定元素位置
1.处理html显示的时候中文乱码
在<head> </head> 中加入这段话即可以解决
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
2.移动端与web端兼容性
2.1 可以在<head> </head>中加入这段话
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2.2 样式采用百分比
margin-left: 10%;
margin-top: 50%;
2.3 视口宽度和视口高度
vw ,vh
3.margin 与 padding区别
margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。
margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。
margin用于布局，可以分开元素，使元素与元素互不相干；
padding用于设置元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”
4.计算属性
减号两边需要空格才会生效
width: calc(100% - 200px);
5.针对不对的分辨率显示不同的样式--@media
# 介绍
1.使用@media媒体查询，根据屏幕宽度设置不同的样式
2.rem 设置相对单位
// 屏幕宽度大于等于 2560
@media(max-width:2560px) {
.recently_visited_content {
width: 50%;
background-color: rgb(152, 60, 160);
}
}
// 屏幕宽度大于等于 1920
@media(max-width:1920px) {
.recently_visited_content {
width: 55%;
background-color: aqua;
}
}
6.显示滚动条
要点：给父级元素设置固定高度、宽度，并且加上滚动属性，当超过固定高度、宽度就会显示滚动条
// overflow: auto; // 给内容的父级添加滚动属性
// overflow-y: auto; // 只想显示垂直方向的滚动条
// overflow-x auto; // 只想显示水平方向的滚动条
7.扩大按钮点击范围
要点： 在按钮的父级元素上 进行伪元素设置
8.等待前一个函数执行完，才继续往下执行
介绍：
存在多个函数，然后想等前面的函数执行完并获取到结果，才继续执行下面的函数
10.样式优先级
# 关键词： !important，会覆盖其他样式规则
.app_index{
margin-left:0px !important;
}
11.固定元素位置
# 需要用到 position: fixed 固定位置，然后在设置要固定在哪个地方
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。
文章标题:前端杂记
本文作者:伟生
发布时间:2022-07-31, 15:26:12
最后更新:2024-09-01, 20:55:31
原始链接:http://yoursite.com/2022/07/31/qianduan_02_note/版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。
