理解误区
在这里我对于css的弹性盒子布局不做详细的解释了说明，百度下会有很多
的博客，在这里我只讲下自己一开始对flex属性的理解误区。flex 属性用
于指定弹性子元素如何分配空间，是flex-grow, flex-shrink 和
flex-basis的简写，默认值为0 1 auto。后两个属性可选。flex:1相当
于flex-grow:1，flex-shrink:1,flex-bsis:auto。
理解误区：认为弹性盒子里的元素都必须设置flex。
正解：flex-grow指的是父容器剩余空间所占的比例。比如：弹性盒子里有三个元素，如果其中一个元素设置了固定的宽度50px，剩下的两元素都是flex:1,则代表父容器总宽度减去50px,剩下的宽度由剩下的两元素平分。
简单介绍几种布局
左图右文布局
现在需要是图片在左，宽度固定，然后右边剩余的宽度，让文字充满。
1、方式一
图片设置固定的宽度后，右边的文字width用百分比来设置。
缺点：很难确定右边文字的百分比，因为剩余的宽度受设备屏幕宽度影响。
2、方式二
用弹性盒子布局,设置完图片的宽度后，右边文字容器flex设置成1即可，非常简单。
底部固定，上面内容区域超过则滚动
方式一：
.css
<style>
html,body{
height: 100%;
width: 100%;
}
body{
display: flex;
flex-direction: column;
}
.content{
overflow: auto;
flex: 1;
}
.bottom{
height: 49px;
width: 100%;
}
</style>
<html>
...
<body>
<div class="content">内容区域</div>
<div class="bottom">底部固定区域</div>
</body>
</html>
出做来的是简单，我发现如果
html,body{
height: 100%;
width: 100%;
}
改成
body{
height: 100%;
width: 100%;
}
即去掉html的宽高设置，不能达到预期效果，原因待研究。
缺陷：当内容部分滚动到底部，用户继续上拉时，底部固定部分也会一起上拉。（笑哭！！！！！！！）
方式二：
.css
<style>
.content{
overflow: auto;
}
.bottom{
height: 49px;
width: 100%;
background-color: white;
position: fixed;
bottom:0;
}
</style>
<html>
...
<body>
<div class="content">内容区域，假如这内容很多，足够显示滚动条
<div class="bottom"></div>//占位
</div>
<div class="bottom">底部固定区域</div>
</body>
</html>
如上，在内容区域增加了一个占位div,这样的话，内容区域的高度就能设置成body高度，而且底部用fixed固定，固定部分在内容区域滚动到底部时，也不会遮住内容区域的内容。
重点：在布局时，有时候一个占位标签还是很实用的，哈哈。。。。
vue学习过程中遇到的问题
问题一: .vue文件中style的使用问题
发现用vue-cli脚手架创建的工程中.vue文件的css样式可以直接这样用
<template>
<li >{{leftTitle}}
<span class="gray" >{{rightTitle}}</span>
</li>
</template>
其中：
<style>
.gray {
font-size: 14px;
font-weight: normal;
color: #999999;
}
.line{
border-bottom: 1px solid #eeeeee;
}
</style>
而在git上jm创建的工程中这么使用的话，样式不起作用，只能这样用：
<template>
<li>{{leftTitle}}
<span :class="$style.gray" >{{rightTitle}}</span>
</li>
</template>
其中：
<style module>
.gray {
font-size: 14px;
font-weight: normal;
color: #999999;
}
.line{
border-bottom: 1px solid #eeeeee;
}
</style>
一直不知道为什么，有可能是项目配置的差异。
问题二：关于vue-cli创建的工程路由问题
在vue-cli脚手架创建的工程，用router很容易实在单页面跳转。在研究这个router时走了不少弯路，一直致力于去寻找为什么用router实在不了跳转到一个新的页面，花了几天的功夫，最后的结论是：router只能做单页面内部跳转（笑哭了！！！！！！！！！）
分割线20190614更新......
从自定义单选框样式学到的
今天在开发单行框自定义样式中，学到了一些有意思的东西，在此记录一下
lable标签的for属性
通常label会与表单标签input配合使用,规定与哪个表单元素绑定，我们先来了解下label 和表单控件绑定方式：
方式一:将表单控件作为label的内容，这种就是隐士绑定。
此时不需要for属性，绑定的控件也不需要id属性。
隐式绑定：
<label>Date of Birth: <input type="text" name="DofB" /></label>
方式二：为label标签下的for属性命名一个目标表单的id，这种就是显示绑定。
显式绑定：
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />
为何要绑定？？
给 label 加了 for 属性绑定了input控件后，可以提高鼠标用户的用户体检。
如果在label 元素内点击文本，就会触发此控件，也就是说，当用户渲染该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
言归正传
当input type属性为radio的时候就可以实现我们所需要的单选功能。默认的单选样式往往不能满足我们的UI需要，这时候需要自定义单选的样式，其中一种思路如下：
利用<label>标签与对应的<input>关联,给<input>设置透明,使用position(定位)让用户看到的是<label>标签的样式,点击<label>时会选择到对应的<input>,使用<input>的:checked伪类选择器来改变选中<label>的样式.
根据以上思路，我把自定义的单选封装成一组件，.vue文件代码如下：
<template>
<div style="position:relative;background-color:white;">
<input v-bind:id="uniqueId" :class="$style.ip" type="radio" name="item" value="选项一" v-bind:checked="checked">
<label v-bind:for="uniqueId" :class="$style.lb"></label>
</div>
</template>
<script>
export default {
name:'radio',
props:{
uniqueId:String,
checked:{
type:Boolean,
required:false,
}
}
}
</script>
<style module>
.ip[type="radio"] {
width: 20px;
height: 20px;
opacity: 0;
/* background-color:white; */
}
.lb {
position: absolute;
left: 5px;
top: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #999;
}
/*设置选中的input的样式*/
/* + 是兄弟选择器,获取选中后的label元素*/
.ip:checked+.lb {
background-color: #00aaff;
border: 1px solid #00aaff;
}
.ip:checked:checked+.lb::after {
position: absolute;
content: "";
width: 5px;
height: 10px;
top: 3px;
left: 6px;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg)
}
</style>
从上面可以看出，label标签是覆盖在input之上的，我是学IOS的，所以一直不理解，为什么点击label时，input也会响应这个点击事件，在IOS界里是不可能的呀，经过一翻调研，关键就是label里的for属性。for属性就是为了与input绑定的，只要两者绑定之后，点击label，input自然会响应。绑定很简单，为input指定id值xxx，然后label的for属性值设置成xxx即可。
额外福利：
1、多个input要相互排拆的话，是通过设置所有input的name值相同。
2、当多个input的id值设置成一样时，lable的绑定将会失效。
3、当一个子标签想要相对于父窗口做绝对定位即absolute定位时，父标签一定要显示定义position的定位方式，如果不显示定义，子标签的绝对定义将相对于浏览器窗口定位哦，与我们预期会有出入。一般想标签布局重叠的话，一定要用绝对定位。如上面的单选自定义样式的例子。
关于input与指定高度不一致问题
9B2182D1-2D9B-4B7C-BDA8-E7BCECD7869D.png
先介绍下以上界面的结构布局，最左和最右是label标签，中间部分是input标签，
当为三个标签都设置相同值的height和line-height时，发现input要比两边的label要高。最后是为input设置padding:0才得以解决此问题。
网友评论