百度前端学院任务笔记（二）

Task__6

---

1. 心得：问题还是处在定位上，着手写网页前应该先判断好网页的分层布局关系。比如说可以总体分为纵向的上中下三块或者横向的左中右甚至更多块。然后每块设置position：relative，里面的小块再设置position：absolute，才能有相对稳定的定位布局。
2.知识点：（1）设置半透明背景色。设置background rgba(r,g,b,a),r代表red值，g代表green值，b代表blue值，a代表alpha值（0-1之间，1为100%，0为透明）；
（２）首行缩进2字符。text-indent：2em；
（３）三角形清单项目符。
①先去除默认的实心圆点项目符，list-style：none；
②系统项目符中没三角形，所以得创建，以下是纯css办法创建三角形符号。
在要添加三角形的元素前（::before）或后（::after）添加样式，
div::before {
content: ’ ‘;
position:absolute;
border-width: 30px;
border-style:solid;
border-color:transparent transparent #ccc transparent;
top:0px;
left:0px;
margin-left:-60px;
}

Task__7

---

1. 心得：这个任务开始接触切图，好麻烦。然后任务中有很多简单的鼠标hover触发式动画效果。有几个小问题 实在不会处理了。（1）画廊那鼠标hover任一个图像，其他三个有轻微的联动（下沉）；
（2）微信，微博，QQ超链接图标的特殊字体无法显示（应该是引入字体库路径问题？）
2.知识点：（1）导航下滑动条。
借鉴了http://ife.baidu.com/2016/review/detail?workId=3386 vvvvip 团队的idea，创建一个多余的li元素并以id命名，样式中给其定位至其余li元素正下方，并运用transition:left 0.4s ease-in-out（ease-in-out代表缓进缓出的方式）方法赋给向左滑动的动画效果，最后以li:nth-child(1):hover~.move {left:0;}（“~”比“+”选取的范围更广）方式选取每一个li元素给其鼠标悬浮添加效果，让动画动起来。
（2）input的checked属性巧用，触发动画。
让input元素和div元素重合（设置相同尺寸，定位。），使用opacity（隐藏但占位）属性隐藏input元素，并运用z-index属性使input始终高出div。当鼠标点击div时input也被点击，生成checked属性，就可用checked被取值去触发动画。
（3）引用特殊字符。

Task__8

---

1. 心得：运用bootstrap原理让元素随窗口大小变化做到自适应。网格布局的作用在于更有效地控制元素在网页中所占比例的大小。比如，博客中有一个留言板模块，在比较大的屏幕上，我们希望它占了右边 25% 的宽度，在手机等比较小的屏幕上，我们希望它占 100% 的宽度，出现在博客文章下方。网格布局是一种实现这一需求的办法，它的好处是，把所有的宽度分为固定栏数（常用 12 栏），从而更高效的控制元素宽度。而这功能，我们使用 HTML 和 CSS 就能实现了。多余的column,会另起一行排列。
以 BootStrap 的网格系统为例，DOM 元素类名形如 col-md-4；其中 col 是“列” column 的缩写；md 是 medium 的缩写，适用于应屏幕宽度大于 768px 的场景；4 是占四栏的意思。因此，col-md-4 的意思是，在屏幕宽度大于 768px 时，该元素占四栏。
引用：http://www.shouce.ren/example/show/s/6495
.object:after，.object:before {content: ” “; display: table;} .cf:after {clear: both;} ：before是因为table类型能生成独立的bfc，防止上边距塌陷， ：after负责清除浮动，防止父级高度塌陷。
2.知识点：（1）媒体查询。
语法：@media （min-width:769px）/媒体窗口大于768px的设备/
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { … }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { … }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { … }
（2）calc属性
calc全拼为calculate计算，可为元素的border、margin、pading、font-size和width属性设定动态值。calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，而且还可以根据单位如px,em,rem和百分比来转化计算。但不能和box-sizing:border-box一起使用，有冲突!

Task__9

---

1. 心得：缩放后页面元素乱套了，不是太理想。 应该用盒子把同行的块包括起来。一定得分析好网页布局，确立好父元素。尽量不要在结构里面添加图片，应该以在样式表里以背景图片的方式添加。
2. 知识点： appearance: none消除默认渲染样式。同时可以赋予其他值渲染成其他样式，例如appearance: button；appearance: textarea等等。但目前各浏览器支持情况不同，使用时得加上各浏览器厂前缀。
引自：http://www.w3cplus.com/css3/changing-appearance-of-element-with-css3.html

Task__10

---

1. 心得：之前没接触过flex弹性盒，review其他同学作品后还是有点不清不白，算是学习下吧。
review地址：http://ife.baidu.com/2016/review/detail?workId=5685
2.知识点：（1）justify-content设置或检索弹性盒元素在主轴（横轴）方向上的对齐方式。可取值为flex-start,flex-end,flex-center,space-between,space-around.而在老规范和IE10中写作start”、“end”、”pack”、“justify”和“distribute”。
语法：①justify-content:flex-start：弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

②justify-content：flex-end：弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

③justify-content：center：弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。

④justify-content：space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于’flex-start’。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。

⑤justify-content：space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于’center’。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
（2）align-items:定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
语法：align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit；

相关连接：http://blog.csdn.net/zxy9602/article/details/53138564（排列，放大，缩小）
（3）flex-order：设置或检索弹性盒模型的子元素出现的顺序。（只适用于flex布局）
（4）flex-wrap：规定灵活项目是否拆行或者拆列。（只适用于flex布局）
语法：flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;