今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

开始任务7

首先制作页面1、

利用css绘制三条横线菜单按钮。

利用background-clip: content-box;裁剪背景只渲染content。

上下两条横线使用border top和bottom。

.....然后搞了半天学习怎么垂直居中一个浮动元素。- -

在外面套一个span行内元素，然后浮动他，不浮动具有宽度的子元素。对外面这个span设置line height=height就可以了。

在使用时 vertical-algin时有时无效，

今天详细对其生效的条件进行了一下尝试了解。

首先父元素要有line-height。

其次vertical-algin只对行内元素有效。

其实核心就在于这个需要一个满行高的行内元素来作为参考。

在设置了vertical-align: middle的元素的同级元素内添加一个行高为父元素满高度的行内元素（如span）

vertical-align是元素自我属性，不是控制子元素的

vertical-align 只对 table-cell 以及 inline-element 起作用，vertical-align 的值是相对于其父元素的，父元素必须是行内元素。

对于一行文字来讲，该属性的值是相对于行高（line-height）的。

对于 table-cell，该属性的值是相对于表格的行高的。

然后看了下垂直的几种方法。

div 的显示方式设置为表格，可以使用表格的 vertical-align

使用绝对定位的，把div的 top 设置为 50％，top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。

在 content 元素外插入一个 div。

设置此

div height:50%; 

margin-bottom:-contentheight;。 

content 清除浮动，并显示在中间。

<div id="floater">  

    <div id="content">Content here</div>

</div>

#floater {

    float: left;

    height: 50%;

    margin-bottom: -120px;

}

#content {

    clear: both;

    height: 240px;

    position: relative;

}

这个浮动元素可以向任意方向浮动，设置高度为50%，同时利用margin-bottom使该元素上移，上移高度为主要内容元素高度的一半。为了使内容元素移动到浮动元素下方，还需要为该元素设置 clear: both。

缺点是需要提前知道内容元素的高度。

利用绝对定位先将元素的上边界和左边界移动到50%的位置，再根据元素的尺寸调整负边距以达到居中的效果。

- -也可以移动上右，下左，下右。将需要居中的元素盒子一角挪移到外部盒子中点。然后通过负外边距进行调整，使其居中

只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。（只对文本有效(块级元素无效)

）

明天计划的事情：（一定要写非常细致的内容） 

争取结束任务7.

重新看一下html标签。语义化。垂直居中方法实践复习。

遇到的问题：（遇到什么困难，怎么解决的） 

人蠢
收获：（通过今天的学习，学到了什么知识）

温故知新查缺补漏。学习相对定位。