发表于： 2021-07-14 23:01:09
2 763
今天完成的事情：
重新写了任务五，因为之前整体用的方法达不到效果，
基本完成了任务五，明天提交。
明天计划的事情：
复习前面的任务。
遇到的问题：
任务五里面的盒子six里面的一行字 不会随着放大而变行。
使用了flex布局没有实现效果。我把代码写一下希望师兄
帮忙找一下问题。
html部分
<div class="six">
<div class="hh1">
<div class="h1">
自我介绍
</div>
</div>
<div class="hh2">
<div class="h2"> 可以洗衣做饭照顾老人，可以洗衣做饭照顾老人，可以洗衣做饭照顾老人，
可以洗衣做饭照顾老人，可以洗衣做饭照顾老人
</div>
</div>
</div>
Css部分
.six {
display: flex;
padding-bottom: 100px;
width: 94%;
border-bottom: solid 1px;
margin-left: 3%;
margin-right:3%;
}
.hh1{
margin-left: 30px;
margin-top: 25px;
padding-right:15px;
border-right: 1px solid;
height:20px;
}
.hh2{
flex-grow: 1;
margin-left: 25px;
margin-top: 25px;
}
收获：
学习了flex布局:
如何设置flex布局
块级元素： .box{ display:flex; }
行内元素也可以设置成flex布局: .box{ display:inline-flex; }
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
- flex-grow用于弹性盒子的扩展比率，默认值为0
- flex-shrink：flex-shrink指定了Flex元素的收缩规则，flex元素仅在默认宽度之和大于容器的时候才会发生收缩
- flex-basis：flex-basis用于设置或检索弹性盒子的伸缩基准值
底部的两个按钮间距相等要用百分比。
.l{
font-size: 30px;
background-color: white;
border: 1px solid #0cb6b6;
border-radius: 5px;
color: #0cb6b6;
width: 47%;
margin-left: 3%;
}
.r{
font-size: 30px;
background-color: #0cb6b6;
border: 1px solid #0cb6b6;
border-radius: 5px;
color: white;
width: 47%;
margin-left: 3%;
margin-right: 3%;}
固定底部
position: fixed;
bottom: 0;
返回列表
评论