[上海|结业弟子]JS-赵朋|2019年10月13日的日报-技能树.IT修真院

发表于： 2019-10-13 21:56:13

1 892

今日完成

Bootstrap 4 多媒体对象

基础多媒体对象

要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果:

<p>学的不仅是技术，更是梦想！！！</p>

</div>

具体属性：

多媒体对象嵌套

多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）

要嵌套多媒体对象，可以把新的 .media 容器放到 .media-body 容器中:

<p>学的不仅是技术，更是梦想！！！</p>

<p>学的不仅是技术，更是梦想！！！</p>

</div>

总结：类似栅格，嵌套，都是在盒子内单独嵌套，添加容器属性

不在同一容器内添加属性

在媒体查询上憋了一段时间，卡在这地方了，

为了方便理解，简单总结了一下弹性盒子

声明弹性盒子默认属性总结：

容器属性

子元素在父元素中排列，

1.flex-direction: row

默认主轴水平从左到右

2. flex-wrap: nowrap

默认不换行

3.justify-content： flex-start

默认左对齐

4. align-items：stretch

如果项目未设置高度或设为auto，将占满整个容器的高度。

总结：如果想让子元素容器显示各自的高度，就需要更改这个属性

5.align-content:stretch

轴线占满整个交叉轴。

总结：一行内容，默认显示主轴从左到右排列，左对齐，不换行

，如果父元素有高度所有子元素填满父元素的高度，

如果没有设高，那么高度默认按最高的子元素高度等高，其他子元素高度不够就拉伸显示

当有多行时，如果父容器设高，就多行平均分配，没有设置同单行设置

ps:当flex-direction设置垂直排列，主轴方向就改变成垂直方向

以下6个属性设置在项目上。

作用在子元素上的具体属性，

order定义项目的排列顺序。数值越小，排列越靠前，默认为0。

总结：需要设置在具体的子元素中

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

总结：如果设置在父容器中，如item {

flex-grow: <number>; /* default 0 */}

就item下的所有子元素平分剩余的宽度，如果具体设置在子元素内，只有一个，

不管数字多少，这个子元素都扩展占据剩余所有宽度，不设置的不变，如果设置在子元素内且数字不同，

比如：flex-grow:1和flex-grow:3那么这两个子元素，就按照1；3分配父元素的剩余宽度

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

总结：这个属性和align-items：stretch默认填充高度，flex-wrap: nowrap默认不换行，这3个默认属性，理论上，可以

不断添加元素内容，然后自适应缩小，但是默认高度，会把一些带形状属性的元素拉伸变形，可以更改align-items：stretch，按原本比例，

自适应大小

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

总结：算是flex-shrink，flex-wrap，默认属性的补充，它的默认是当子元素内的内容，缩小到原本的内容尺寸大小，就会换行，

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间，也就是说，在原本大小之上设定值，缩小到这个值，

就会换行，相当于，识别原尺寸放大了

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

做第二个页面，因为psd图，被我切坏了，所以图片用任务一代替

遇到问题有几个，但都挺简单，仔细想想就没什么了

具体无法解决的就一个问题：

如图;

如何让文本流动到，图片的下方

尝试各种方法，如让图片缩小，或者改变文本属性，放在同一容器下，都失败，始终显示在两边

原因：文本始终在同一个容器内，与图片分属两个部分

解决：为图片设置浮动，p不浮动，一般浮动，图片会悬浮在p的上面，但这里，

div挡住了p，但不会挡住p中的文字，形成“字围”效果。

总结：标准流中的文字不会被浮动的盒子遮挡住。（文字就像水一样）

收获：遇到问题，思考的思路，这次的页面虽然有问题，但基本很快就解决了

遇到的问题：bootstrap框架有默认的属性，权重还高，本来，感觉很快就能做完的第二个页面，

坑坑绊绊做了半天，还有媒体查询，钻了牛角尖，总结起来，当时思考都麻木，脑筋不转，

假努力，所以，遇到问题，要先心理规划好，到一定时间没有一定头绪，就换个其他的先做，

过会再来看，或者请教师兄

明天继续任务八九

返回列表

【任务7】 [上海|结业弟子]JS-赵朋 | 2019年10月13日 的日报 下品

评论

分享到

【任务7】 [上海|结业弟子]JS-赵朋 | 2019年10月13日的日报下品