发表于: 2021-05-12 23:11:46

1 948


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)

1,今天预习了task8首页,开始动手搞他,头部搞完了

2,任务布局有点复杂,把知识点学了下

♠左列定宽,右列自适应

.parent{display:flex;}

.left{width:100px;}

.right{flex:1;}

♠右列定宽,左列自适应(用flex实现)

.parent{display:flex;}

.left{flex:1;}

.right{width:100px;}

♠两列定宽,一列自适应(用flex实现)

.parent{display:flex;}

.left,.center{width:100px;}

.right{flex:1}

♠两侧定宽,中栏自适应(用flex实现)

.parent{display:flex;}

.left{width:100px;}

.center{flex:1;}

.right{width:100px;}

♠一列不定宽,一列自适应(用flex实现)

.parent{display:flex;}

.right{flex:1;}

♠等分布局(用flex实现)

.parent{display:flex;}

.column{flex:1;}

.column+.column{margin-left:20px;}

3,bootstrap进行了环境配置,对相关知识点进行了初步了解

4,wiki上进行了任务总结




明天计划的事情:(一定要写非常细致的内容)

1,明天计划,继续学习bootstrap,能简单运用后,再使用bootstrap做task8首页

2,明天计划对之前完成的任务,进行细节优化,

3,task6在wiki上的总结




遇到的问题:(遇到什么困难,怎么解决的)

1,task进入内容区后,觉得内容元素有点多,还不怎么规律,顿时觉得不知如何布局了。打算初步学会bootstrap后再搞

2,对于页面定宽和自适应,原先一直都很迷惑,今天通过学习,感觉思绪清晰了一些

3,对于bootstrap,就配置了环境,看了下其它知识点,觉得有些懵,明天要加强学习了,争取直接搞懂

4,白天有时候状态不佳,觉得无法集中注意力,打算上班后,把手机放柜子里,免得受影响




收获:(通过今天的学习,学到了什么知识)

1,bootstrap环境的简单配置

2,水平居中

.parent{text-align: center;}

.child{display: inline-block;}                                         水平居中

.child{width: 200px; margin: 0 auto;}                            水平居中

 

.child{display: table; margin: 0 auto;}                            水平居中

.parent{position:relative;}

.child{position:absolute; left:50%; transform:translate(-50%);}           水平居中

.parent{display:flex; justify-content:center;}                                      水平居中

.parent{display:flex;}

.child{margin:0 auto;}                                                          水平居中

3,.parent{display:table-cell;vertical-align:middle;height:20px;}           垂直居中

.parent{display:inline-block;vertical-align:middle;line-height:20px;}         垂直居中

.parent{position:relative;}

.child{positon:absolute; top:50%; transform:translate(0,-50%);}                  垂直居中

.parent{display:flex; align-items:center;}                                           垂直居中

4,正中心居中

.parent{display:table-cell; vertical-align:middle; text-align:center;}

.child{display:inline-block;}                                                                         水平垂直居中

.parent{position:relative;}

.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}                水平垂直居中

.parent{display:flex;justify-content:center;align-items:center;}                        水平垂直居中  

5,多列布局

左列定宽,右列自适应 (用flex实现)

.parent{display:flex;}

.left{width:100px;}

.right{flex:1;}

右列定宽,左列自适应(用flex实现)

.parent{display:flex;}

.left{flex:1;}

.right{width:100px;}

两列定宽,一列自适应(用flex实现)

.parent{display:flex;}

.left,.center{width:100px;}

.right{flex:1}

两侧定宽,中栏自适应(用flex实现)

.parent{display:flex;}

.left{width:100px;}

.center{flex:1;}

.right{width:100px;}

一列不定宽,一列自适应(用flex实现)

.parent{display:flex;}

.right{flex:1;}

等分布局(用flex实现)

.parent{display:flex;}

.column{flex:1;}

.column+.column{margin-left:20px;}



返回列表 返回列表
评论

    分享到