Day 18

今天完成的事情

      1.查看任务详情里的资料

      2.为任务五作初步的设计

遇到的问题

今天都在查找资料，感觉好像没有遇到什么值得写下来的问题

收获

看到一个效果图的时候，先思考清楚页面的构造，理清各元素之间的关系，特别需要注意的是在不同的设备下需要有怎样的展现，最重要的是思路清晰的找到最好的布局方案

布局中常会用到的有：尺寸相关的盒子模型，普通流、浮动、绝对定位三种定位机制

CSS3中：transform、弹性盒子模块、试验中的grid模块。

常用的有：浮动布局，inline-block布局，弹性盒布局这几个名词。

1.尺寸

   用处：通过width、height控制大小，各个方向的margin值控制与边界或者其他元素的距离来定位。

   注：auto是很多尺寸值的默认值，也就是由浏览器自动计算。首先是块级元素水平方向的auto，块级元素的margin、border、padding以及content宽度之和等于父元素width。

2.浮动

  当元素被设为浮动时，元素的width就变成了内容的宽度了，由内容撑开，也就是所谓的有了包裹性。overflow | position:absolute | float:left/right都可以产生包裹性，替换元素也同样具有包裹性。

  浮动布局的核心就是让元素脱离普通流，然后使用width/height，margin/padding将元素定位。

  高度不同所以可以叠在其他元素上面产生重叠或者使用负边距跑到父元素外

  注：子元素设置为浮动之后，父对象的高度就坍塌了，需要设置父对象后的元素清除浮动（在后面的元素里加一个clear语句），这样父对象的高度才能被浮动子元素撑起来了。

3.普通流-----inline-block

inline-block元素会有4px左右的空隙，这个是因为我们写代码时候的换行符所致。

解决办法很简单：在inline-block的父元素中设置样式font-size：0；letter-spacing: -4px; 然后设置inline-block的所有兄弟元素 font-size：值；letter-spacing: 值px;  恢复正常的显示。

inline-block默认是基线对齐的，而inline-block的基线又跟文本基线一致，所以在内容不同的时候并不能水平对齐。只需要用vertical-align显式声明一下top/bottom/middle对齐即可。

补充：基线

1）无文字：容器的margin-bottom下边缘。与容器内部的元素没一毛钱关系。

2）有文字：最后一行文字的下边缘，跟文字块（p,h等）的margin、padding没关系！注意是最后一行，无论文字在什么子对象容器内在什么位置都没关系，浏览器会找到最后一行文字对齐底部。

4.绝对定位

绝对定位就是我们平常所说的定位，给定参考坐标系+坐标确定位置。

absolute定位的基准是最近的非static定位父对象，而fixed是相对html根节点的定位。两种定位都会脱离普通流

父元素为relative，子元素为absolute，这样的话，又会出现跟浮动一样的问题：父对象高度坍塌，子元素不能撑起父对象。

单纯使用绝对定位进行自适应布局的情况很少，一般绝对定位都用在尺寸固定的元素定位上。而且fixed定位的渲染效率很低，因为它会频繁触发浏览器的重排。

5.弹性盒子

弹性盒布局有如下优势：
       1.独立的高度控制与对齐。
       2.独立的元素顺序。
       3.指定元素之间的关系。
       4.灵活的尺寸与对齐方式。

明天计划学习

      1.为任务五添加细节，并完善

      2.看视频