发表于： 2017-03-09 21:33:35
2 878
任务八
今天完成的事情
- 1. 使用bootstrrap的栅格布局，来完成页面的响应式设计。bootstrap框架的container属性是会根据宽度的改变而改变的，在css中有三个媒体查询，比如当宽度大于1200px时，container的宽度为1170px，为具体宽度。
- 2. 使用col-md col-lg col-sm col-xs属性来实现响应式。这三个属性的col-4的百分比都是相同的，不同的是属性生效的宽度，比如col-md属性是在媒体查询宽度小于1170里定义的。利用这一特性，可以实现在大屏幕上四列，小屏幕上2列的效果。
明天计划的事情
- 1.完成首页的编写。
- 2.开始第二个页面。
遇到的问题
- 1.因为对bootstrap的栅格框架不熟，所以用的时候很吃力，看了bootstrap的css代码后才搞懂他的响应式设计是如何实现的。
- 2.合作公司模块是5栏布局，bootstrap的12栏无法适用。所以我采用的是flex布局，但是响应式如何实现，还在思考中。
收获
- 小课堂上师兄讲解了浮动与清除浮动。照我的理解，所谓的清除浮动，说成是浮动闭合更加好，浮动带来的主要问题是无法撑起父级元素的高度，清除浮动可以分为2类，一类是利用clear属性，另一类是触发bfc。利用伪元素的clearfix是比较流行的一种办法。而关于bfc，bfc有以下特性：
BFC不会重叠浮动元素
BFC可以包含浮动
所以我们只要触发bfc就可以了。触发bfc有以下几种办法：
float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed
返回列表
评论