今天完成的事情：完成任务8/9的深度思考、任务8/9知识点沉淀吸收
明天计划的事情：开始任务10
task8/9笔记
Bootstrap 栅格
父级:class=” row”
子级:class=” col-sm-格数”
媒体查询
min-width（大于某某尺寸使用）
@media (min-width: 576px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 992px) { ... }
@media (min-width: 1200px) { ... }
max-width（小于某某尺寸使用、注意减去0.02px，不然会出问题）
@media (max-width: 575.98px) { ... }
@media (max-width: 767.98px) { ... }
@media (max-width: 991.98px) { ... }
@media (max-width: 1199.98px) { ... }
投影
box-shadow:X Y 大小 色值;
id链接
<a herf=”#id”>
<div id=” ”>
table 列宽不一样的表格可以用栅格思路做
<table>
<tr> 行
<th rowspan="行数合并"> 加粗列</th>
<td colspan="列数合并"> 正常列</th>
</tr>
</table>
table-layout用来显示单元格、行、列的算法规则
automatic默认，列宽由内容决定
flxed列宽自己设置
inherit继承父级
word-break 自动换行的处理方法
normal 使用浏览器默认换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行
深度思考
task8
1.如何实现轮播图？
使用animation和@keyframes实现
2.如何用css写一个简单的幻灯片效果页面？
使用animation和@keyframes实现 稍后写上详解
3.主流浏览器内核有哪几种？
主流的浏览器有四种
trident(le内核)
gecko(Firefox内核)
webkit（Safari内核）
blink（Chrome内核）
4.什么是外边距重叠，重叠的结果是什么？
两个或者多个毗邻的普通流中的盒子在垂直方向上的外边距会发生折叠，这种形成的外边距称之为外边距折叠
外边距折叠的计算方法？
两个盒子毗邻的外边距都是正数时使用大的，一正一负时正的减去负的，都为负数时取最小的负值
什么时候会发生折叠？
两个外边距相邻，都属于普通流之间没有间隙、填充、边界，两者都属于垂直相邻框边
如何避免重叠？
浮动元素不会与任何元素发生叠加，也包括它的子元素
创建了BFC的元素不会和它的子元素发生外边距叠加
绝对定位元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
内联块元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
普通流中的块级元素的边距永远和它相邻的下一个块级元素的边距叠加，除非相邻的兄弟元素明确
5.div+css的布局较table布局有什么优点？
div+css（随用随再）
优点：布局灵活、改动方便、加载快
缺点：兼容性比较低
table（后加载）
布局容易快捷、兼容好
缺点：加载慢
6.bootstrap有哪些常用组件?
1、轮播图
2、栅格
3、导航
4、下拉菜单
7.css有哪些方式可以实现垂直居中？
1、弹性盒子
2、单行line-height
3、定位
4、vertical-align
8.margin负值在页面中有哪些应用？
1、布局使用
2、去除<li>边框
3.配合定位使用
4.去除border-bottom
task9
1.如何使用bootstrap栅格系统？
背景：
栅格系统是bootstrp提供的一套响应式、移动设备优先的流式布局系统，栅格系统把一行分成了12列，因为能被12整除的数最多，bootstrp4.0栅格系统是通过flex实现了。
使用：
<父级 class=“row”>
<子级 class=“col-*-*”>
2.媒体查询如何使用？
媒体查询是通过自动查询设备的尺寸去实现这个尺寸下的样式，通过@media调用使用
使用方法
min-width（大于某某尺寸使用）
@media(min-width:尺寸){......}
max-width（小于某某尺寸使用、注意减去0.02px，不然会出问题）
@media(max-width:尺寸){......}
最小尺寸和最大尺寸之间使用
@media (min-width: 768px) and (max-width: 991.98px) { ... }
3.响应式的优点与缺点？
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验
优点：
1、通过设置设置媒体查询就可以获得多个尺寸的页面，在开发维护和运营上成本会降低很多
2、兼容性好，跨平台
缺点：
1、代码增多，会出现隐藏无用的元素，导致加载时间过长文件增大
2、局限性，不适合一些大型网站或者电商网站
任务总结
任务耗时：2019.6.25–6.30（6天）
官网脑图：
我的脑图：
做这个任务主要学了bootstrap、媒体查询、table和过渡，
开始在媒体查询卡了接近两天，主要是看到别人几行代码就可以处理，不知道他的原理，也没有去尝试做，就搞的前期很纠结，最后做了也就那样，
接下来就是首页下边的学员轮播图卡了一下，我想实现手机尺寸轮播图停止，因为我是用框架写的轮播图，框架用js实现的轮播图，超纲了，就放弃了
table表格也卡了差不多一天，是因为table中的td的width的原因，最开始宽度是按照内容设置的，导致table超出了父级，还有遇到括号换行的问题，最后查资料，两行代码+栅格思路解决了
{table-layout: fixed;
word-break: break-all;}
悬停过渡效果卡了半天左右，最开始是用
div{ width:0px; }
div:hove{ width:100%;transition: width 2s;}
发现出来的东西和预期不符，文字被挤压的一点一点出来，
最后用
div{position:absolute；top:0;left:-100%；visibility: hidden;}
div:hove{visibility: visible;transform: translate3d(100%, 0px, 0px);transition: transform .3s linear 0s;}
整体状态不错，想的有点多了，以为要实现各种点击切换效果，手机首页也进行了个性化处理，多做了两天左右的时间
返回列表
评论