--Angular8实现拼多多--Angular修行日志-01

小虾米于2020年8月某日，习得视频中一段代码，引起对这部分的前端内容进行记录。

代码如下：

 1 .container{
 2     top: 10px;
 3     position: relative;
 4     overflow: hidden;
 5     
 6 }
 7 
 8 .container .image-slider{
 9     display: flex;
10     overflow-x: scroll;
11 }
12 
13 .container img{
14     width: 100%;
15     height: 100%;
16     object-fit: cover;
17 }
18 
19 .nav-section{
20     position: absolute;
21     bottom: 0;
22     width: 100%;
23     opacity: .7;
24     color: #fff;
25     background-color: #333;
26     display: flex;
27     justify-content: flex-end;
28     align-items: stretch;
29 }
30 
31 .nav-section span{
32     display: flex;
33     margin: 0 5px;
34     width: 10px;
35     height: 10px;
36     background-color: #fff;
37     text-decoration: none;
38     border-radius: 50%;
39 }

其中HTML部分代码为：

1 <div class="container">
2   <div class="image-slider" #ImgSlider>
3     <img [src]="item.imgUrl" [alt]="item.caption" [title]="item.caption" *ngFor="let item of sliders;let i = index">
4   </div>
5   <div class="nav-section">
6     <span class="slider-button" *ngFor="let item of sliders;let i = index"></span>
7   </div>
8 </div>
HTML部分

其中种种不必细说，只单拎出几个之前未曾使用到的武学盲点（知识点）：

有如下几个问题：

　　1..container中的  display：flex； 布局，其作用对象是.container本身的布局，还是作用于.container内部元素的布局

　　2.flex布局具体有哪些内容？

　　3.overflow-x属性有和作用？其类似的属性有哪些？

　　4.object-fit是何属性？有何作用？应当怎么使用？

 

posted @ 2020-08-26 15:17  小虾米在code江湖  阅读(128)  评论(0)  编辑  收藏  举报