一、效果预览
二、布局方案设计
1. 底部导航与整个页面
- 底部导航是三个带图标的a标签，基于vue中的router路由来实现页面跳转的
- 底部导航是相当于固定在页面底部这个位置的，并且页面大小变化时，只有宽度变化，高度则不会
输出：固定底部元素，且页面调整大小时，高度不发生变化
输入：css布局
用伪代码做展示，思路记录下来就行了。
<div class='app'>
<div class='page'>
<div class='content'>页面内容</div>
<div class='nav'>底部导航</div>
</div>
</div>
/* 0.设置整个页面的边边角角*/
body{
box-sizing: border-box;
padding:0;
margin:0;
}
.page{
/* 1.写flex */
display: flex;
flex-direction: column;
/*2.page占住整个屏幕*/
height: 100vh;
}
.content{
/*3.将导航置于底部*/
flex-grow:1;
overflow: auto;
height: 100%;
}
.nav{
background-color:aqua;
}
2.底部导航的平均布局
- 这是三个a标签，要确保点击空白处也能跳转
- a标签里面是上下结构
输出：平均布局，点击空白处跳转，布局中每个元素上下结构
输入：flex的css布局
<div class='nav'>
<a href="https://www.baidu.com"><span>1</span><div>a</div></a>
<a href="https://www.bing.com"><span>2</span><div>b</div></a>
<a href="https://www.bilibili.com"><span>3</span><div>c</div></a>
</div>
.nav{
/*1.使用flex布局*/
display: flex;
flex-direction: row;
/*3.实现元素中的元素的居中主要是text-align的设置*/
justify-content: center;
align-items: center;
text-align: center;
}
a{
/*2.点击空白处实现跳转---border分割底部1/3*/
border:1px solid blue;
width:33.33%;
}
3.高度自适应的标签部分
- width一直是自适应的
- 页面中其他的元素都是固定宽度，所以，标签模块的高度应该调整为多余的高度分配
输出：多余高度的分配
输入：flex-grow分配高度
<div class='content'>
<div class='content'>
<div class="tag">
标签
</div>
<div class="note">
备注
</div>
</div>
.page{
display:flex;
flex-direction: column;
}
.tag{
border:1px solid yellow;
flex-grow:1;
}
4.元素流动方向从左往右，从下往上
- 正常流动方向为上下，左右
输出：文档流动方向为从左往右，从下往上
输入：flex布局中的flex-wrap
<div class="tag">
<ul class="tagsList">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
.tagList{
display: flex;
flex-direction: row;
/*1.从下往上*/
flex-wrap: wrap-reverse;
/*2.设置第一行*/
justify-content:flex-start ;
text-align: center ;
align-content: flex-start;
}
ul{
/*3.去掉ul自带样式的干扰*/
list-style: none;
height: 100%;
border:1px solid green;
box-sizing: border-box;
margin:0px;
padding: 0px;
}
5.input占满宽度
- input自带样式和自适应宽度，但是我需要的是它占据剩余的所有宽度
输入：input占满剩余宽度
输入：flex和width100%
<div class="note">
<span>备注</span>
<label>
<input type="text" placeholder="请输入备注信息：">
</label>
</div>
.note{
display: flex;
flex-direction: row;
}
label{
flex-grow: 1;
display:flex;
}
input{
width:100%;
border:1px solid palevioletred;
}
6.100数字往右靠
- float会影响其他元素的换行
输出：不用flex的右浮
输入：text-align: right;
<div class="outNum">
100
</div>
.outNum{
text-align: right;
}
7.多个button中出现平均布局中出现不一样高度的button
- 正常来说，我第一个想到的就是flex平均布局，width不一样可以调整
- 但是现在是height不一样，flex中调整heigt会失效
- 所以我的解决办法是，用position来做，然后补上一个一样高度的button做占位
输出：多个相同box元素出现一个高度不一样的
输入：position 和补充占位
<div class="numPad">
<button>1</button>
<button>2</button>
<button>3</button>
<button>删除</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>清空</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button class="okButton">OK</button>
<!--占位-->
<button></button>
<button>0</button>
<button>00</button>
<button>.</button>
</div>
>.numPad{
position: relative;
>button{
border:none;
background:none;
width:25%;
height:25%;
font-family: 'Source Han Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 22px;
text-align: center;
color: #000000;
padding-top:20px;
padding-bottom: 20px;
}
>.okButton{
position: absolute;
height:50%;
}
}
三、box-sizing和box-shadow、中文字体库
1.写盒模型的css时
- 首先去掉默认样式，
box-sizing: border-box;
padding:0;
margin:0;
background:none;
- 然后先设置content的样式
- 在写padding，用padding撑起高度
- 注意border到底设置在哪里，因为盒模型中border的范围是包起来了爬到顶
- 最后写margin，因为background也是border的范围
2.box-shawdow
/* box-shadow: 0px 0px 2px rgb(0,0,0,0.25); */
box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.25);
其余的自己看mdn文档吧~
