发表于： 2019-10-10 21:01:00
1 941
为每个子元素设置同样样式
显示
遇到问题：数字样式，被挤压变形
原因：flex布局的flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
所以，数字在设置固定宽度的情况下，由于父元素宽度不够，被等比例缩小
解决：为数字样式设置flex-shrink：0
遇到问题：图标显示填满整个容器高度
原因：flex布局 align-items属性stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
解决：为图标父元素添加align-items-center属性
显示:
遇到问题：图标设置在网格里面，与范例不符
解决：待解决
做main第三部分：
遇到问题：为了水平居中，在父元素中设置text-align：conter文本居中，
显示：
原因：范例文本是左对齐与范例不符，不行
解决：在父元素中设置padding，使其中的文本水平居中，同时左对齐
分别设置居中
图片display:block,改为块元素，然后用margin：auto水平居中
<h>标签用text-align：conter
为格子添加阴影
.main-3-content{
box-shadow:rgb(230 230 230) 0rem 0.2rem 0.4rem 0.1rem;/*阴影*/
padding:0 1.2rem;/*文本水平居中*/
}
.main-3-ioc{
display:block;
width:5rem;
height: 5rem;
border-radius: 50%;
margin:2rem auto;
}
.main-3-h{
text-align: center;
margin:2rem 0 1rem 0;
}
.main-3-p{
color:rgb(153,153,153);
font-size:1rem;
margin-bottom:2rem;
}
显示：
遇到问题：如上图三所示，显示结果与范例不符，为格子添加外边距，如图
offset失效
原因：
解决：待解决
footer底部
底部企业logo
思路：用网格布局，offset-2 col-8,在col-8中添加5个企业logo，bootstrap自动布局等宽排列
<div class="container-fluid">
<div class="row">
<div class="col-8 offset-2">
<img class="col" src="a.png" />
<img class="col" src="b.png" />
<img class="col" src="c.png" />
<img class="col" src="d.png" />
<img class="col" src="e.png" />
</div>
</div>
</div>
</div>
显示为每个都占8格，垂直排列
原因：包裹logo的不是row,是col-8,所以每个图片的宽度都是col-8，垂直排列
解决，在5个logo外面再包裹一个div class="row"
显示结果：
遇到问题：没有排成一行
原因：logo图片宽度之和大于col-8，所以换行
解决：为包裹logo的容器添加d-flex属性强制一行，flex-shrink属性的默认属性等比例缩小
显示结果无效
原因：
思考：为什么弹性布局会失效？
然后是footer布局
第一部分就是运用网格布局，
<div class="container-fluid">
<div class="row">
<div class="col-8 offset-2">
<div class="row">
在col-8中填入数据，不设置数字，让它自动平局分配
ps:需要在col-8包裹内，与数据中间再外套一个盒子，声明<div class="row">，把col-8当成新的完整的一行
显示：
遇到问题：col自带内外边距，使文本换行
解决：待解决
为footer·2设置布局样式，没有遇到什么问题整体显示
明日计划：把上面布局解决，再看看动态需求，把这个页面做完
返回列表
评论