1.一个合格的前段,第一步就是页面画的好,在实现项目时，大家都喜欢用插件,列element+ ui （实现后台管理的）,写移动端H5页面也是喜欢MIN-UI等等诸多现成的网页。还是一句话有时候用人家的还不如自己去写,前提条件，自己熟练掌握技术。
<div class="dakuang_style">
<div class="content_l">我在左边</div>
<div class="content_z">我在中间</div>
<div class="content_r">我在右边</div>
</div>
<style>
.dakuang_style {
display: flex; //开启弹性盒
justify-content: space-between; // 父元素排列方式
align-items: center; // 子元素排列方式
flex-direction: colum; //竖向的时候写横向不需要
}
.content_l {
width: 20%;
height: 100px;
background: blue;
}
.content_z {
flex: 1; //所有子元素剩下的宽度
height: 100px;
background: red;
}
.content_r {
width: 40%;
height: 100px;
background: yellow;
}
<style>
/** 上方就是H5通用布局方式 俗称三栏布局，横向竖向都可以使用。并且配合百分比可达成页面自适应,如果UI设计稿给出比例更好 **/
2.定位
使用场景里层小盒子: 给大盒子posion: releative;小盒子posion: absolute;。left,top,bottom,right 上下左右给长度单位即可。（不建议多次使用）一个页面全是定位岂不是很乱页面初始话一进来就乱七八糟,过一两秒才显示正常。让人感觉页面是凑出来的,应用场景最好是遮罩弹框，或者你要写动画配合anmation-css使用。这几种情况使用定位是极好的。利用margin 上下左右撑开岂不是美滋滋。单位百分比呢岂不是自适应了。列:margin-left: 10%; 这一眼看去不就是父元素总宽度百分之10.随着你缩放屏幕间距也会动态改变。一切都是浏览器帮你计算，岂不是大盒子弹性盒自适应，小盒子间距自适应。是不是可以代替rem了吗（答案是当然不可能,除非UI和前段开发是一个人。但是要求他给出比例可以吗-->诶，这就可以吗，比如左边是图片右边是列表且是左右布局自适应。可以问UI获取比例哦什么16:13.17:14,再搭配calc函数岂不是美滋滋写法如下<width: calc(100vw * 16/29);> 很简单吧另一个盒子就是<width: calc(100vw * 13/29)）。
3. VUE框架中你使用其他插件改别人的css怎么改。
vue组件中每一个样式都带有一个私有空间scope。自己拥有，如何穿透到另一个组件使用它呢。
/deep/ 深度穿透。你组件牛皮哦歹scope，呢我就deep你。/deep/ .box{background: red} 。方法很暴力但是我喜欢。原里都一样，你在更改他人插件样式就给他deep。
综上所述:自己开发样式选择弹性盒即可，如果遇到动画，你就用anmition-css 。在css标签上使用动态添加class类名
<div :class="[active ? 'box1': 'box2']"></div>
写样式是我建议使用scss里层的嵌套关系层就更对象嵌套一样。我拿上面的三栏布局距离:
.dakuang_style {
.content_l {}
.content_z {}
.content_r {}
}
当大家遇到列表中有个div不一样时不妨使用属性选择器:divnth-child(1){}
<div name='123' ></div>
div['123'] {}
这种是属于添加自定义属性你可以通过这个属性选到这个css从而添加样式。
网友评论