父元素设置了 flex 布局
display: flex;
align-items: center;
如何让某个子元素靠右呢
方法一
flex: 1;
text-align: right;
或
方法二
margin-left: auto;
display: flex;
align-items: center;
如何让某个子元素靠右呢
flex: 1;
text-align: right;
或
margin-left: auto;
axios 拦截器,最佳实践,体验相关:
https://www.cnblogs.com/dhsz/p/6410031.html
https://blog.csdn.net/panyox/article/details/73800241
https://blog.csdn.net/sjn0503/article/details/74729300
http://www.php.cn/js-tutorial-399867.html
如果是 vue 中。可以在路由里先做一步判断,然后请求时 axios 拦截器里边也做处理。这样就可以完美解决问题了。
request 中添加 token,response中处理错误。
https://www.cnblogs.com/yunfeifei/p/4453690.html
https://www.cnblogs.com/sweeeper/p/8442613.html
https://www.cnblogs.com/zfdcp-028/p/6374632.html
https://www.jianshu.com/p/8f7009456abc
Vue 用脚手架本地测试,项目都是指向根目录,当发布到外网环境,非根目录时,有人会遇到根本进不去 vue 路由的情况。
既然用了 vue ,遇到问题总的要解决。
https://segmentfault.com/a/1190000014561644
https://blog.csdn.net/lensgcx/article/details/78439514
处理 location 的规则即可。
location 可以添加很多个不同规则。
比如:
location /{
}
location /web{
try_files $uri $uri/ /web/index.html;
}
# vue 这里的二级目录是 web
https://blog.csdn.net/bbdxf/article/details/79251934
https://www.creative-tim.com/product/material-kit
默认的按钮,input等颜色比较难看,某些设置也不人性化,这些都是通过编译bootstrap的源码来自己来定义的。主要分以下几个步骤。
安装 npm 并使用 淘宝镜像。http://npm.taobao.org/
git 工具
2,下载原文件包。
https://github.com/twbs/bootstrap
在 scss 目录下,就可以看到它的源码。
找到_variables.scss,并修改里边的颜色值,再编译就可以了。比如:
# 有颜色值的是我修改的
$primary: #9c27b0 !default;
$secondary: $gray-600 !default;
$success: #4caf50 !default;
$info: #00bcd4 !default;
$warning: #ff9800 !default;
$danger: #f44336 !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;
sudo cnpm run dist
# 编译打包就可以了
# 修改点击按钮的时候,按钮周围的边框,好难看,强迫症要干掉。这样会把input的边框也干掉了,不好。
$input-btn-focus-width: 0 !default;
$input-btn-focus-color: rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow: none !default;
仅仅看表象,以为是 js 实现的效果,却是 css 实现的。这里有一个例子,利用 radio 的单选特性,实现单选效果。
让 input 透明掉,其实就是让你去美化 span,不再需要 radio 那难看的容颜。是不是有点不道德啊。
请看 code:
<div class="box">
<div class="tags-select">
<label class="tag-select">
<input type="radio" name="bye-type" value="1" checked>
<span class="name">官方标配</span>
</label>
<label class="tag-select">
<input type="radio" name="bye-type" value="2">
<span class="name">官方标配 + 蓝牙耳机</span>
</label>
<label class="tag-select">
<input type="radio" name="bye-type" value="3" disabled>
<span class="name">官方标配 + 充电宝</span>
</label>
</div>
</div>
<!-- 利用radio唯一性,实现了不用js也能实现的效果。右边是 scss -->
.tags-select{
font-size: 0;
> .tag-select{
position:relative;
display:inline-block;
font-size: 14px;
margin: 5px;
color: #fff;
.name{
display: block;
line-height: 20px;
padding: 8px 10px;
border-radius: 5px;
background-color: #FE7D91;
cursor:pointer;
}
.name:hover{
background-color: #FE3591;
}
input[type="radio"]{
position:absolute;
z-index: -1;
opacity: 0;
//选中
&:checked +.name{
background-color: #FE3591;
}
//禁用
&:disabled +.name{
background: #eee;
color: #999;
cursor: not-allowed;
}
}
}
}
.box{
display:flex;
width:100%;
height:100px;
justify-content:center;
align-items:center;
}
记得,上边使用了 scss。
在传统 div 排版中。padding竟会占用父容器的宽高,这个很影响心情和需要。
比如下边这个布局:
.group{
margin:20px;
}
.item{
display:inline-block;
width:250px;
height:40px;
line-height:40px;
background-color:#FE7D91;
color:#fff;
border-radius:3px;
}
.item label{
float:left;
width:35%;
text-align:right;
font-size:16px;
}
.item label ~div{
float:left;
width:65%;
font-size: 14px;
}
<div class="group">
<div class="item">
<label>神奇</label>
<div>动物在哪里</div>
</div>
</div>
使用 box-sizing,容器宽度都不会被撑开。
还有一种方法,就是使用 flex 布局。
完整的demo:https://jsfiddle.net/vini123/kbecxju7/1/
一劳永逸的搞定 flex 布局: https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb