发表于: 2021-05-12 23:11:46
1 945
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了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;}
评论