发表于： 2019-10-09 22:56:11
1 890
今天完成的事情:
先过了一遍之前总结的网格布局，和弹性布局，开始调整main结构
1.main-1部分水平居中
方法1：因为网格布局，父元素2/12视口宽度，为父元素设弹性盒子，子元素垂直排列， .justify-content-center让子元素水平居中排列
失败:
显示效果：图片填充整个宽度，其中标题无效
思考：为何会充满整宽度？标题为何无效？
方法二：单独为每个子元素设置属性，图片margin:0 auto水平居中
显示结果;无效
原因：因为img 是内联元素，想要使用mmargin : 0 auto 前必须转换为块元素
ps:但是，margin设置具体数值，在不设置块级元素的情况下，也能生效
解决：为img设置display：block,成功
为标题设置文本居中，调整字体颜色大小
显示效果：
为相同效果的内容设置样式
显示效果：
遇到问题·：每个网格中的文本没有对齐
原因;每个网格插入的图标默认高度不一致
解决：为每个插入的图标设置相同的高度
.main-ioc-1{
display:block;
margin:0 auto;
height: 3rem;
}
第四个元素返利要求图标和数字成一行，与文本成一列，设置一个弹性盒子包裹图标和数字
显示：
遇到问题：图表高度拉伸
原因;
1.因为bootstrap4框架为<h>标签自带属性
多了5px的底部外边距
2.弹性布局默认属性
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
所以结合到一起，原图标的高度默认为，<h>标签加外边据撑开的高度，所以拉伸
解决方法：
方法1.为图标设置stetch改变默认值
方法2.为<h>标签设置-.5rem把边距还原回来
方法3.在<h>标签上用伪元素插入图标，浏览器默认为一个元素，就不受外边距影响
h4::before{
content: url(6.png)
}
遇到问题：
宽度超过百分之百，出现左右滑动
原因：
1，header设置.container-fluid (全屏宽度) 类的容器，当页面高度没有超出窗口高度时，是100%宽度不会出现左右滑动，
当页面高度超出视口出现上下滚动条后，全屏宽度属性，会捕上下捉滑动条的宽度，在原来100%的宽度上添加滑动条的宽度，
进而撑开屏幕,超出100%，出现左右滚动条
解决;把.container-fluid (全屏宽度)改为 .container (固定宽度)
2，row的使用不当，例子中把row嵌套在具体宽度的盒子里面，自己写的时候把它直接设置在了宽度100%的盒子中，
row自带的边距属性超出100%宽度，出现左右滑动条
解决：row嵌套在宽度100%的盒子中
3，为一个宽度为100%的盒子，设置上下距离时，margin，少写个0，把上下的边距添加到左右的边距中，超出100%的宽度，
出现左右滑动条
解决;重新设置，添加
遇到问题：
1.main1部分，设置.container-fluid (全屏宽度)且row在同一容器内，却没有超出100%
2.在把.container-fluid (全屏宽度)替换.container (固定宽度)后，整体向左移动
原因：待解决
设置main-2布局
为数字样式添加阴影，为容器添加d-flex成一行排列
css3实现边框阴影
边框阴影（box-shadow）的基本语法：
box-shadow：color h-shadow v-shadow blur spread inset；
color：阴影颜色 ------------ 可选
h-shadow ：水平偏移量 ----必选
v-shadow：垂直偏移量-----必选
blur：模糊距离 -------------可选
spread：阴影尺寸---------- 可选
inset：内阴影 --------------可选
调整样式，与范例一致
文本居中
width: 4rem;
height: 4rem;
line-height: 4rem;
text-align: center;
阴影尺寸等于外延长度，而模糊距离的外延长度这是设定值的二分之一
.digit{
width: 4rem;
height: 4rem;
line-height: 4rem;
text-align: center;
box-shadow:rgb(230 230 230) 0rem 0.2rem 0.4rem 0.1rem;
border-radius: 50%;
}
为每个数字设置同样样式
遇到问题:bootstrap4框架，和flex的一些默认属性了解不够全面，导致出现一些问题
收获：
1.更加深刻的理解了bootstrap4和flex的一些属性
2.遇到问题该有什么思路去思考问题
明天计划：继续任务8
返回列表
评论