【从0开始前端】自己瞎几把做项目的时候遇到的一些问题

mac2025-10-21  5

mark一下用到的小点 1、margin right 失效 浏览器默认从左往右渲染元素,在没有超出父容器的宽度的前提下  如果子容器的宽度能够被容纳  设置margin-right是没有用的 浏览器是默认左对齐的。灵感一来,margin-right其实有效果的,只是在默认即标准流的情况的下显示不出来效果。如果脱离标准流呢?想到这个,就立马在css文件中加了一个:float:right;然后在测试的时候就能看到margin-right的效果了。

PS:关于right属性无效的原因:right属性只有在position是absolute的情况下才有效,而默认的position值是static,right属性是无效的。建议能不使用right就不要使用right属性。

https://blog.csdn.net/u011043843/article/details/28881557

2、CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed): https://www.jianshu.com/p/a3da5e27d22b 父元素有一个relative  自己是absolute  就可以实现相对于 它的浮动了。 【一,大概是需要父元素】 【二,需要至少设置一个属性,至少设置一个】不然不成功啊!】 ******************************* 不然定位没用啊!

3、行内块元素 display  inline-block 这个时候设置text-align就可以了 还有个东西叫做   display: table-cell;     vertical-align: middle; 【让图片居中的方法: ***************************************** 正所谓,直接用v-if 嵌套的话 p没用,div有用(玄学吧……) 我们现在,外面一个div,里面一个p,width100%,已经可以成功的居中+缩放了~~    就是不能自己伸缩 ,那个大概要 。9才可以 qaq more是外面的div,more_pic 是img~~~ 只给div设置也没用。想想嘛~感觉qaq .more     text-align:center     .more_pic          width:100%          height:22px ***************************************** ***************************************** 又测试了一下,真的可以哎,这实在是有点神奇了!

4、border-radius是圆角 qwq  https://www.html.cn/tool/css3Preview/Box-Shadow.html 这个网站做阴影很好看。。。  亏得我还引入了element ui 这个只要加上阴影 卡片就高大上起来了好么!

5、如果是一行中的“切换身份”后面那个箭头 设置width height 先限制住长度,这样不然图片会very的大 然后大小如果有问题的话 叫他垂直居中一下 vertical-align:middle padding-bottom:2px

6、圆角套着的已实名  我一般是 border-radius  然后padding设置一下,字体白色,背景蓝色,binggo

如果有问题  一个可以float  一个可以设置个width 然后display:inline-block text-align:center

7、设置px不会变形 设置百分比适配性不好

8、图片没加冒号 真的好屈辱啊我感觉啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 https://bbs.csdn.net/topics/393015009 竟然是因为没加冒号!!!貌似后面的问题更严重  是因为没有绑定  因为它是v-bind啊  这样就要去动态获取了 这些小地方 而且  require 和 static 这两种有效。直接写 还是不行的。

9、使用v-for     <div class="icon"  v-for="(item,index) in items"  :key=index>         <div class="icon-img">         <img class="icon-img-content" 【:】src="item.imgsrc"  />         </div>         <p class="icon-desc">{{item.text}}</p>       </div>

 data(){     return{     items:[       {         imgsrc:require("../assets/上传合同.png"),         text:"上传合同",       },

最后只有在 export default 那里 才有;分号的。 【不用 key:index  相同的数据就不会显示 因为吧。。。因为 序列号唯一吧大概   坑  记住了   qvq】 所以说还是…… QAQ 严重的浅尝辄止 搜到了解决方法就实验 都不想为什么 大概因为在赶工(bushi) 这样是不好的 能不能save下来 以后有时间再完成? 疑惑 我认真看一个的话要好久……

10、【Markdown】 - 是<li>这样子的列表 插入图片并设置宽度  <img src="https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg" width="100" height="100">或者后面的改成  width=30%

路径我是这样写的  <img src="./src/assets/预览图/4.png" width="40%"> here  这个.md 和src在一个路径下  这样写了 qaq

11、【git】 在vscode里 点击下面的小图标 commit 最后再点下面的加号  要1commit 2push上去 我都没登录 很奇怪到底怎么帮我push上去的哦。。。(git的配置登录都是别装好的- -|||)

12、v-forin前面要加空格 不然不行 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 v-for="(item,index) in items" :key="index">

v-if 如果是class类切换 类要加引号  而且是Item.signed==ture  / ..  不能忘记item 而且,v-if在 class的时候 最重要的是不要忘记了v-bind 1  <div v-for="(item,index) in items" :key="index"> 【不加key 也会报错 【最好还是要加[] 啊】】 2  <p v-bind:class="[item.signed?'a':'a_false']">{{item.signed}}</p> 3  <div v-bind:class="[item.signed?'signed_blue':'unsigned_red']"> 4  <p v-if="item.signed===true && item.type==='company'">已认证</p>              13、我翻得很多错误都是因为data: 后面没加引号。。。。

14、太棒了 经过我一通乱改 这个小小的detail .tabber_detail           float left           margin-left 3px           width:15% 这样已经适配的十分完美了!

15、百闻不如一见呐!!!!亏得我之前还看了那么多 啥是二级路由  还写了还总结下来了 简单的实践 对我根本没用 我在项目中实际用到 才tm灵光一现的发现   【二级路由不是点进一个界面又一个这样。。。】 【而是  当指向不同的url时,部分页面是相同的,部分页面才需要改变,这个时候,用二级路由比较合适。 不变的放在一级,需要变化的放在二级。】 所以这个时候用的话 是一个<router-view> 又是一个routerview。。 所以说啊 这个大概一直是我吧   理论对我基本没用的 也塞不进去 我就喜欢实践 这也得以解释我各种*********的行为 我不是真的不可以 只是市面上先讲课 再做题的方法  不适合我-。- 我就应该先做题 啥也不会 回去看书 好我懂了-。- 类似的。。。 所以说传统教育埋没了我( 还让我变得没自信(自我陶醉ing)

16、 怎么使得  导航栏时隐时现 https://www.jianshu.com/p/5cd73cc3895a 单独写到每个页面的话 真的有点麻烦 在路由的那里 写一个  meta: {navShow:true}  meta:{navShoe:true} 然后在使用的时候写 <footer-bar v-show='$route.meta.navShow'> <footer-bar v-show='$route.meta.navShow'> 【如果没写的话 当做是false哦!!】

最新回复(0)