跟上一篇文章,因为考虑到内容过于冗长,小伙伴不一定都适应得过来,所以我把案例拆开了,需要的来看这篇即可
1.输入框布局
使用两个label搭配一个input
先初始化一个样式:
<div class="demo">
<label>姓名</label>
<input type="text">
<label>GO</label>
</div>
<style>
* {
/* 清除内边距,以自己设置的为准 */
margin: 0;
padding: 0;
}
.demo {
width: 250px;
display: flex;
border: 1px solid #dcdcdc;
}
</style>
下面要让两个label自动伸缩,并且去掉边框和点击样式
.demo label {
flex: 1;
/*flex:1 1*/
text-align: center;
background-color: #f5f5f5;
}
.demo input {
border: none;
outline: none;
}
如果我们要让go那个label占据25px,可以直接给他设置width吗?正确的写法应该是:
给这个label单独设置样式
flex: 0 0 25px;
2.长表单布局
左边右对齐,右边左对齐
初始化样式:
<form>
<div>
<div>
<label>姓名:</label>
<input type="text">
</div>
<div>
<label>请输入密码:</label>
<input type="text">
</div>
</div>
</form>
我们给左侧label添加一个宽度,并且右侧对齐
#form div {
display: flex;
}
#form div label {
flex: 0 0 100px;
text-align: right;
}
如果给label父盒子添加高度50px,会发现input框也会伸缩
那我们除了使用margin,如何设置上下间距呢
align-items: flex-start;即可
3.rem的使用
如果有小伙伴不了解rem可以进入小机灵下面的博客进行学习
小知识:和em的区别:rem是对html根元素来说,em是相对爹元素来说
因为上面的博客里面使用的是媒体查询,所以下面我们使用js 实现不同宽度的视口下自动调整字体的大小
load表示加载,resize表示改变,40是一个界限,设备的字体最大是40px
4.自适应布局
比如说移动端与pc端适配
上面的代码就是在判断设备类型然后进行页面加载
如果是局部自适应的话,如下面这部分代码可以实现左右盒子大小不变,中间盒子自动伸缩,还可以搭配媒体查询改变盒子样式
5.响应式布局
要实现上面的样式在移动端和pc端适配
使用媒体查询,进行样式选择,相当于选择了两种类型设备的样式表,每个表里面又实现局部自适应
6.rem弹性布局
要实现下面的页面根据大小变换字体大小以及元素的大小
这里使用到了前面的js实现rem的使用,然后在样式表中使用rem为单位设置元素的大小
如果你对vue项目有所了解的话,可以到小机灵的另一个博客中了解如何在vue项目中使用响应式布局,链接在下方