一、iOS上浏览器运用jQuery不许可事宜代办到document上
$(document).on("click", "挑选器", function(){});
以上绑定能够会涌现点击失效的状况。处理要领就是在这些代码前加一串代码:
$(body>*).bind("click", function(){....});
二、挪动端点击输入框(input)制止手机输入法键盘弹出
在挪动端页面开辟时,我们有时刻常常会用到本身定义的输入键盘,而不想自带键盘弹出,那末可以在点击事宜中到场以下代码:
$("挑选器").click(function(){ document.activeElement.blur(); });
三、在iOS平台上input的button范例会带有默许款式。
这个在Android上运用以下代码就可以处理,然则iOS不起作用。
border: none;
outline: none;
background-color: 色彩;
然则在iOS上须要加一个:
-webkit-appearance: none;
这个属性一样适用于Android。
四、挪动端Retina屏(iOS) 1px的处理计划
这个我在网上找到很多处理计划,这里就直接放链接了
五、iOS浏览器在设置overflow: scroll;
后滑动不流通,觉得像是卡顿
这个现在在Android和PC上没得题目,然则iOS上有题目,处理要领就是加上属性:
-webkit-overflow-scrolling: touch;
参考资料:
【兼容性】ios上设置overflow: scroll不转动bug
iOS Safari浏览器上overflow: scroll元素没法滑动bug处理要领整顿
六、元素在设置为display:inline-block;
后元素之间会发作间距
处理要领就是在包括这些元素的父元素上设置CSS属性font-size: 0;
七、Angular CLI和Vue CLI打包的项目上线不在根目次涌现资本找不到题目!
- 关于ng,在
package.json
的build
背面改成ng build --base-href ./
。- 关于Vue,假如CLI东西是3.3以下版本,在
vue.config.js
中到场以下代码:
module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? '/henjievue/'
: '/'
}
3.3以上的版本到场以下代码:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/henjievue/'
: '/'
}
八、Angular CLI开辟关于assets文件的处理题目。
assets文件夹内里的内容在build后不介入打包,仅仅完全复制,所以在开辟历程当中途径的写法按相对途径写就好了,以下代码:
<img src="assets/index/ng.png">
九、处理ios10及以上Safari没法制止缩放的题目
//以下代码是为了处理在iOS 10体系以后设置meta来制止缩放失效的题目
window.onload = function() {
// 阻挠双击放大
document.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {
event.preventDefault();
}
});
var lastTouchEnd = 0;
document.addEventListener('touchend', function(event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
// 阻挠双指放大
document.addEventListener('gesturestart', function(event) {
event.preventDefault();
});
}
十、在最新的Vue脚手架东西下(3.x以上)运用2.x脚手架运用的搭建目次
在装置好最新的vue脚手架状况下,运用以下敕令来装置一个分外东西:
npm install -g @vue/cli-init
以后就可以运用以下敕令天生老的项目目次:
vue init webpack 项目名
十一、Vue CLi 3.0脚手架东西封闭ESlint搜检
在vue.config.js中加一句话:
module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? '/henjievue/'
: '/',
lintOnSave: false //加这句话可以封闭ESlint
}
十二、JS的轮回内里有异步请求怎样保证异步请求按序次实行
这个不能用轮回来处理,应该用递返来完成,或许用Promise.all来完成,这里仅供应递归处理要领。
(function loop(index){
axios.get("http://192.168.12.101:3000/news/list"+"?pageNum="+page[index]).then((response)=>{
console.log(response);
if(++index < page.length){
loop(index);
}
else{
console.log("悉数实行终了")
}
}).catch((error)=>{
console.log(error);
})
})(0)
十三、vue内里路由的路由守御的beforeRouteEnter的钩子函数没法猎取到vue实例(this)
这个钩子函数里不能直接运用this来猎取vue实例,或许报undefined毛病,处理要领以下:
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在衬着该组件的对应路由被 confirm 前挪用
// 不!能!猎取组件实例 `this`
// 因为当钩子实行前,组件实例还没被建立
},
beforeRouteUpdate (to, from, next) {
// 在当前路由转变,然则该组件被复用时挪用
// 举例来说,关于一个带有动态参数的途径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时刻,
// 因为会衬着一样的 Foo 组件,因而组件实例会被复用。而这个钩子就会在这个状况下被挪用。
// 可以接见组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航脱离该组件的对应路由时挪用
// 可以接见组件实例 `this`
}
}
//以上为诠释。以下为处理要领
beforeRouteEnter(to, from, next){
next((vm)=>{
console.log(vm);
if(from.path == '/'){
vm.isShowAppr = false;
}
});
},
十四、在Chrome浏览器下img标签在没有图片的状况下会显现边框的题目?
处理要领以下,增加一段css代码即可:
img[src=""], img:not([src]){
opacity: 0;
}
十五、v-if绑定一个数组变量,转变变量的值并没有使v-if起作用
题目:当v-if绑定一个数组变量,转变变量的值并没有使v-if起作用。引出个题目因为 JavaScript 的限定,Vue 不能检测以下更改的数组:
1.当你应用索引直接设置一个项时
2.当你修正数组的长度时
缘由:网上总结:
- Vue检测数据的更改是经由历程Object.defineProperty完成的,所以没法监听数组的增加操纵是可以明白的,因为是在组织函数中就已为一切属性做了这个检测绑定操纵。
- Vue 中是经由历程对 每一个键设置 getter/setter 来完成相应式的,开辟者运用数组,目的往往是遍历,此时挪用 getter 开支太大了,所以 Vue 不在数组每一个键上设置,而是在数组上定义 ob ,而且替换了 push 等等可以影响原数组的原型要领。从vue源码可以清楚看到,Vue 跳过了对数组每一个键设置相应式的历程,而是直接对值举行递归设置相应式。
处理:
第一类题目:
Vue.set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)
vm.$set(vm.items, indexOfItem, newValue)
eg: this.$set(this.isShowOKimg, index, true);
第二类题目:
vm.items.splice(newLength)
v-if绑定一个数组变量,转变变量的值并没有使v-if起作用
十六、表单中onchange事宜的触发前提
input输入框的onchange事宜,要在 input 落空中心的时刻才会触发;在输入框内容变化的时刻不会触发change,当鼠标在其他处所点一下才会触发;onchange 事宜也可用于单选框与复选框转变后触发的事宜。
onchange event 一切重要浏览器都支撑;
onchange 属性可以运用于:<input>, <select>, 和 <textarea>。
- input事宜
oninput 事宜在用户输入时触发,它是在元素值发作变化时马上触发;该事宜在 <input> 或 <textarea> 元素的值发作转变时触发。
- onpropertychange事宜
onpropertychange会及时触发,会在元素的属性转变时就触发事宜。当元素disable=true时不会触发。缺点:只在IE 下支撑,其他浏览器不支撑,用oninput来处理。
十七、vue中this.$route与this.$router的区分
1、this.$router
全局的路由实例,是router组织要领的实例。在 Vue 实例内部,你可以经由历程 $router 接见路由实例,
- 注重this.$route和this.$router均不能在运用Vue.extend()组织器所组织的弹框等实例内里取到
有go、push、replace、forward等要领
1、this.$router.push()
// 字符串
this.$router.push('home')
// 对象
this.$router.push({ path: 'home' })
// 定名的路由
this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=123
this.$router.push({ path: 'register', query: { plan: '123' }})
2、this.$router.replace()
一样是跳转到指定的url,然则这个要领不会向history内里增加新的纪录,点击返回,会跳转到上上一个页面。上一个纪录是不存在的。
3、this.$router.go()
相干于当前页面向前或向后跳转多少个页面,相似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面
2、this.$route
示意当前激活的路由的状况信息,包括了当前 URL 剖析获得的信息,另有 URL 婚配到的 route records(路由纪录)。路由信息对象:即$router会被注入每一个组件中,可以应用它举行一些信息的猎取。
**1.$route.path**
字符串,对应当前路由的途径,老是剖析为相对途径,如 "/foo/bar"。
**2.$route.params**
一个 key/value 对象,包括了 动态片断 和 全婚配片断,
假如没有路由参数,就是一个空对象。
**3.$route.query**
一个 key/value 对象,示意 URL 查询参数。
比方,关于途径 /foo?user=1,则有 $route.query.user == 1,
假如没有查询参数,则是个空对象。
**4.$route.hash**
当前路由的 hash 值 (不带 #) ,假如没有 hash 值,则为空字符串。锚点
**5.$route.fullPath**
完成剖析后的 URL,包括查询参数和 hash 的完全途径。
**6.$route.matched**
数组,包括当前婚配的途径中所包括的一切片断所对应的设置参数对象。
**7.$route.name 当前途径名字**
**8.$route.meta 路由元信息
router.beforeEach((to, from, next) => {
// to 和 from 都是 路由信息对象
})
watch: {
$route(to, from) {
// to 和 from 都是 路由信息对象
}
}
this.$router的内容就是new VueRouter({})实例出来的对象(这个在router.js内里会建立并导出),他们两个是雷同的。
十八、部份ios体系在键盘收回时不会将顶起的页面自动收回
在input的上加一个blur时候,这里以vue为例,别的相似
<input @blur="autoscrollBack" v-model="code" type="text" placeholder="请输入6位验证码">
autoscrollBack(){
window.scroll(0, 0); //自动滚回
}
十九、撙节和防抖
1、撙节代码
function throttle(callback, timeSolt){
var last_time = 0;
return function(){
let context = this;
let args = arguments;
let now = new Date();
if(now - last_time >= timeSolt){
last_time = now;
callback.apply(context, arguments);
}
}
}
document.addEventListener('scroll', throttle((e)=>{
console.log(e.target) //输出#document
console.log(this) //输出window对象
}, 2000), false);
注:实在上面addEventListener的回调函数终究实行的是throttle返回的函数
2、防抖代码
function debounce(callback, timeSolt){
let timer;
return function(){
let context = this;
let args = arguments;
if(timer){
clearTimeout(timer);
}
timer = setTimeout(function(){
callback.apply(context, args);
}, timeSolt)
}
}
document.addEventListener('scroll', debounce((e)=>{
console.log(e.target) //输出#document
console.log(this) //输出window对象
}, 2000), false)
3、防抖撙节连系版
function throttle_and_debounce(callback, timeSolt){
let last_time;
let timer;
return function(){
let context = this;
let args = arguments;
let now = new Date();
if(now - last_time < timeSolt){
clearTimeout(timer);
timer = setTimeout(function(){
last_time = now;
callback.apply(context, args);
}, timeSolt)
}else{
last_time = now;
callback.apply(context, args);
}
}
}
document.addEventListener('scroll', throttle_and_debounce((e)=>{
console.log(e.target) //输出#document
console.log(this) //输出window对象
}, 2000), false)
二十、Js event对象offsetX, clientX, pageX, screenX, layerX, x区分
二十一、offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset等
1、无转动条时,dom对象的offsetWidth、clientWidth和scrollWidth等
2、有转动条时,dom对象offsetWidth、clientWidth 和 scrollWidth等
3、window对象的 outerWidth、innerWidth、pageXOffset 和 screenLeft(screenX)
参考资料
二十二、vscode设置终端范例
1、敕令面板(Ctrl+Shift+P)中,输入select选如图所示的选项
2、以后挑选目的Shell。
参考资料
二十三、为git和github desktop设置代办
1、为git设置代办,这里以设置http协定为例,ssh暂未研讨
在须要运用代办的项目下面运用 git bash 以下敕令举行设置,我这里代办是127.0.0.1:8080
git config http.proxy
http://127.0.0.1:8080 # 也可所以uri:port情势
这个是不须要鉴权的代办设置,假如须要鉴权,能够须要增加用户名暗码信息:
git config http.proxy
http://username:password@127.0.0.1:8080
假如git的一切项目都须要启用代办,那末可以直接启用全局设置:
git config –global http.proxy
http://127.0.0.1:8080
为了确认是不是已设置胜利,可以运用 --get 来猎取:
git config –get –global http.proxy
如许可以看到你设置在global的 http.proxy 值。 须要修正的时刻,再次依据上面的要领设置即可,git默许会掩盖原有的设置值。当我们的收集涌现变动时,能够须要删撤除原有的代办设置,此时须要运用 --unset 来举行设置:
git config –global –unset http.proxy
在敕令以后,指定位置的设置值将会被清空,你可以再次运用 --get 来检察详细的设置状况。假如运用了HTTPS,肯呢个会遇到HTTPS 证书毛病的状况,比方提醒: SSL certificate problem 。。。,此时,可以尝试将 sslVerify 设置为 false :
git config –global http.sslVerify false
到此设置终了。
2、为github desktop设置代办
这个设置起来相对简朴,以win 10为例,找到以下途径C:\Users\你的用户名
,找到名为.gitconfig
文件,增加以下内容:
[http]
proxy = http://127.0.0.1:8080
设置完成后保留即可。
参考资料
二十四、css完成单行、多行文本溢出显现省略号的要领
1、单行省略号
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
注:这类体式格局平常都须要给牢固宽度
2、多行省略号(这个属性只适宜WebKit浏览器)
dispaly: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
-webkit-line-clamp: 2; //这个显现几行
overflow: hidden;
3、多浏览器兼容计划
p {
position:relative;
line-height:1.4em; //要显现三行的话那末元素的高度就是行高的3倍,别的状况以此类推。
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
}
二十五、JS内里天生随机整数
首先要相识几个函数
1、
Math.random()
天生
[0, 1)
之间的数。2、
Math.round()
将小数四舍五入。3、
Math.floor()
下取整。4、
Math.ceil()
上取整。
1、天生[min, max]之间的整数。
var result = Math.round(Math.random() * (max - min)) + min;
2、天生[min, max)之间的整数。
var result = Math.floor(Math.random() * (max - min)) + min;
3、天生(min, max]之间的整数。
var result = Math.ceil(Math.random() * (max - min + 1)) + min;
3、天生(min, max)之间的整数。
var result = Math.floor(Math.random() * ((max-1) - (min+1))) + (min+1);相称于 min+1 ≤ r ≤ max - 1
二十六、Babel相干的观点
- @babel/core: babel的中心,中心的api都在包括在这里。
- @babel/cli: 敕令行东西,经由历程敕令对js文件举行转换的东西。
- @babel/perset-env: 指定转换的工作环境。
- @babel/polyfill: 相称于一个添补,因为babel本身只支撑转换箭头函数、构造赋值这些语法糖类的语法,而一些新的API或许Promise函数等是没法转换的。@babel/polyfill就是处理这个题目的。
- babel-loader: webpack的加载器,用于挪用@babel/core的中心API来完成编译。
1、@babel/core与babel-core区分
@babel/core是babel 7事后的版本标识,babel-core是之前版本的标识。
2、.babelrc和babel.config.js
.babelrc和babel.config.js均是babel的设置文件,babel.config.js是bebel 7引入的新的体式格局。
3、@babel/polyfill和@babel/plugin-transform-runtime和@babel/runtime和@babel/runtime-corejs2(都是用来转换新Api的)
- (1)@babel/polyfill:babel-polyfill则是经由历程改写全局prototype的体式格局完成,比较合适零丁运转的项目。开启babel-polyfill的体式格局,可以直接在代码中require,或许在webpack的entry中增加,也可以在babel的env中设置useBuildins为true来开启,然则babel-polyfill会有近100K,打包后代码冗余量比较大,关于当代的浏览器,有些不须要polyfill,形成流量糟蹋污染了全局对象。
//运用要领一在entry中增加
module.exports = {
entry: {
main: ["@babel/polyfill", path.resolve(__dirname, "./src/index.js")]
}
}
//运用体式格局二babel.config.js中设置
module.exports = {
presets: [
"@babel/preset-env", { "useBuiltIns": true }
]
}
- (2)@babel/runtime和@babel/plugin-transform-runtime:babel-runtime和 babel-plugin-transform-runtime的区分是,相称一前者是手动挡而后者是自动挡,每当要转译一个api时都要手动加上require(‘babel-runtime’),而babel-plugin-transform-runtime会由东西自动增加,重要的功用是为api供应沙箱的垫片计划,不会污染全局的api,因而合适用在第三方的开辟产品中。
- (3)@babel/runtime-corejs2:plugin-transform-runtime 可以设置成 false 或许 2,在babel.config.js的设置文件下有以下代码:
module.exports = {
preset: ["@babel/preset-env"],
plugins: [
"@babel/plugin-transform-runtime", { corejs: 2 }
]
}
1、corejs 是一个给低版本的浏览器供应接口的库,如 Promise, map, set 等。在 babel 中你设置成 false 或许不设置,就是引入的是 corejs 中的库,而且在全局中引入,也就是说侵入了全局的变量。
2、假如你的全局有一个引入,不要让引入的库影响全局,那你就须要引把 corejs 设置成 2。
所以一旦你运用了2这个参数就必需引入@babel/runtime-corejs2
3、@babel/plugin-transform-runtime是必需装的,假如corejs设置为2的话装置@babel/runtime-corejs2来替代@babel/runtime,横竖设置为false的话就须要@babel/runtime,依据你的设置来装置即可。
在babel 7下:
- babel.config.js 是对全部项目(父子package) 都见效的设置,但要注重babel的实行工作目次。
- .babelrc 是对 待编译文件 见效的设置,子package若想加载.babelrc是须要babel设置babelrcRoots才可以(父package本身的babelrc是默许可用的)。
- 任何package中的babelrc寻觅战略是: 只会向上寻觅到本包的 package.json 那一级。
- node_modules下面的模块平常都是编译好的,请剔撤除对他们的编译。若有须要,可以把个例加到 babelrcRoots 中。
默许状况下.babelrc不作用于子包,那末在babel.config.js下到场一下babelrcRoots来指定即可。
module.exports = {
babelrcRoots: ['.', './frontend', './backend'] // 许可这两个子 package 加载 babelrc 相对设置
}
一文读懂 babel7 的设置文件加载逻辑
对babel-transform-runtime,babel-polyfill的一些明白
babel7中 corejs 和 corejs2 的区分
babel preset env设置
babel进修笔记
二十七、window.scrollTo(x, y)与window.scrollBy(x, y)区分。
1.scrollTo()是相对位置转动,每次都是相对初始位置(0, 0)位置转动。
2.scrollBy()是相对位置转动,相干于上次挪动的末了位置挪动。
3.window.scrollX是文档在x方向的转动间隔,返回文档/页面程度方向转动的像素值。
4.window.scrollY是文档在y方向的转动间隔,返回文档/页面垂直方向转动的像素值。
5.window.scroll()效果跟scrollTo效果雷同。注:现在在Chrome上测试window.scrollY猎取到的值跟document.documentElement.scrollTop的一样。只不过scrollY是只读属性,不能修正值,而scrollTop可以修正。
二十八、iOS 12在新iPhone上收起输入法后页面不会自动恢复转动到初始位置(十八的计划用户体验不太好,每次都邑滚到顶部去)
this.$refs.drawnameInput.addEventListener('blur', function(){
var currentPosition;
var speed=1;//页面转动间隔
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition-=speed;
window.scrollTo(0,currentPosition);//页面向上转动
currentPosition+=speed; //speed变量
window.scrollTo(0,currentPosition);//页面向下转动
})
二十九、防备页面被调试的JS代码
//增加debuger举行反调试
(function anti_debuger(){
function testDebuger(){
var d=new Date();
debugger;
if(new Date()-d>10){
document.body.innerHTML='<div>年轻人,不要太猎奇</div>';
return true;
}
return false;
}
function start(){
while(testDebuger()){
testDebuger();
}
}
if(!testDebuger()) {
window.onblur = function(){
setTimeout(function(){
start();
},500)
}
}
else{
start();
}
})();
三十、挪动端唤起QQ谈天 (ios android 包括微信、qq内置浏览器,不兼容ios10及以下版本(window.open()改成location.href=”这类就不会存在兼容性题目))(本人测试为ios safari跳转到QQ没题目)
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isiOS){
//uin=这个部份就是你要谈天的QQ号
if(u.toLowerCase().match(/MicroMessenger/i) == "micromessenger"){
window.open('http://wpa.qq.com/msgrd?v=3&uin=2290747606&site=qq&menu=yes');
}else{
window.open('mqqwpa://im/chat?chat_type=wpa&uin=2290747606&version=1&src_type=web&web_src=oicqzone.com')
}
}else{
if(u.toLowerCase().match(/MicroMessenger/i) == "micromessenger"){
window.open('http://wpa.qq.com/msgrd?v=3&uin=2290747606&site=qq&menu=yes');
}else{
window.open('mqqwpa://im/chat?chat_type=wpa&uin=2290747606&version=1&src_type=web&web_src=oicqzone.com');
}
}
三十一、挪动端指定的时候花样。
挪动端在运用new Date()天生指定时候的时候戳时,内里的花样有请求,不然不能准确猎取。
var time = new Date('2019/9/18 18:00') //这个内里不要运用2019-9-18这类花样,PC端的虽然可以一般辨认。
在IOS平台慎用Date.parse()要领,这个在ios上支撑不好,会失效!
三十二、ES5默许参数写法的弊病
function testDef(name, age){
var name = name || 'default';
var age = age || 23;
console.log(name, age);
}
testDef('Lee', 0);
像上面那样你传的0过去,然则Js内里0判定为false,它会把23赋给age,而得不到传入的值0。科学要领是运用ES6的体式格局
function testDef(name='default', age=23){
var name = name;
var age = age;
console.log(name, age);
}
testDef('Lee', 0);
三十三、VSCode编译器类名运用横杠-双击没法选中悉数单词的处理要领
搜刮设置editor.wordSeparators
。找到`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?
。去掉横杠即可!
三十四、Vue父组件下的子组件强迫从新加载数据
父组件下的子组件的内容默许状况不会强迫革新(重如果应用history返回到这个页面的状况下),完成要领入下。
//data中定义一个变量
isReload: false
//子组件处用v-if来推断是不是从新衬着
<app-child v-if="isReload"></app-child>
//运用watch来监听父组件内里会发作变化的变量,如从后端返回的数据user
watch: {
user(){
this.isReload = false;
this.$nextTiock(() => {
this.isReload = true;
})
}
}
三十五、document.documentElement与document.body
document.documentElement示意猎取到html,document.body示意猎取到body。当页面声清楚明了DOCTYPE(DTD),运用document.body.scrollTop猎取不到页面转动的间隔,就必需运用document.documentElement.scrollTop来猎取。
- 圆满的猎取scrollTop 赋值短语 :var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
三十六、IOS Safari内里异步ajax请求最好不要再写异步请求,轻易出意想不到的题目。
比以下面这类:
axios.get('/index').then((res)=>{
cosole.log(res);
axios.get.('/index/extra').then((res)=>{
console.log(res);
})
})
…、设置margin:auto使块级元素居中,然则程度方向涌现了转动条,body没有占满浏览器窗口。
//HTML代码
<div id="smart">
<div class="smart-container-one">
<p style="position: relative; left: 600px;"><img src="img/lazyload-b3704113c8.gif"/></p>
</div>
</div>
//CSS代码
#smart>.smart-container-one {
width: 1240px;
height: 450px;
margin: auto;
}
涌现如许的效果就是因为<p style="position: relative; left: 600px;"><img src="img/lazyload-b3704113c8.gif"/></p>
形成的,p元素是块级元素,定位假如为relative的话会占用位置,致使父元素被撑开了。
处理要领有:
1.给p元素设置相对定位
position: absolute
即可。2.p元素换成内联元素,如
span
。3.把p元素设置为内联元素,如
display: inline
。
注:这儿p标签包img太业余了,人人日常平凡写不要如许写,平常用div,菜鸟一枚,还请人人包涵。