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

浮动：

浮动元素会从正常文档流中删除，但是还是会影响布局，一个元素浮动时，其他元素会“环绕”该元素

浮动的性质：

1.浮动元素周围的外边距不会合并

2.如果要浮动一个非替换元素。

则必须为元素声明一个width

float：none（不浮动）

浮动元素会生成一个块级框，而不论这个元素是什么

负外边距可能导致浮动元素移到其父元素外面。

行内元素完全覆盖浮动图像（包括北京，边框，内容和一切）。

块级元素只是将内容显示在浮动元素之上，但其背景和边框在浮动元素之下。

媒体查询

媒体查询是作为目标和包含样式时常见的媒体类型的扩展而构建的。

媒体查询提供了为各个浏览器和设备环境指定不同样式的功能

，例如视口宽度或设备方向。

能够应用独特的目标样式开辟了一个机会的世界，并利用响应式网页设计。

响应与自适应与移动

对于某些人来说，响应这一术语可能不是新的，其他人可能更熟悉自适应或移动术语。这可能会让你想知道它们之间究竟有什么区别。

响应性和自适应网页设计密切相关，并且经常作为一个转换。响应性通常意味着对任何变化做出快速而积极的反应，而适应性意味着可以轻松地针对新目的或情况（例如变化）进行修改。响应式设计网站根据不同因素（如视口宽度）不断流动地改变，而自适应网站则根据一组预设因素构建。两者的结合是理想的，为功能性网站提供完美的配方。具体使用哪个术语并没有太大的区别。

另一方面，移动通常意味着通常仅在移动用户的新域上构建单独的网站。虽然这偶尔会有它的位置，但通常不是一个好主意。移动网站可能非常轻巧，但它们确实带有新代码库和浏览器嗅探的依赖性，所有这些都可能成为开发人员和用户的障碍。

目前最流行的技术在于响应式网页设计，有利于动态适应不同浏览器和设备视口的设计，沿途改变布局和内容。该解决方案具有全部三种，响应性，自适应性和移动性的优点。

初始化媒体查询

使用媒体查询有两种不同的方法，使用@media现有样式表中的规则，

使用规则导入新样式表@import，或链接到HTML文档中的单独样式表。

一般来说，建议@media在现有样式表中使用规则以避免任何其他HTTP请求。

媒体查询中的逻辑运算符

媒体查询中的逻辑运算符有助于构建强大的表达式 有许多可用于媒体查询，

包括内使用三种不同的逻辑运算符and，not和only。

使用and逻辑运算符媒体查询中允许添加额外的条件，

确保浏览器或设备同时做两a，b，c，等等。多个单独的媒体查询可以用逗号分隔，

充当未说明的or操作员。

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

提交任务八，完成任务八

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

阴影的绝对定位，开始是以html为基准，导致阴影的绝对定位不准，原因是因为我的父元素没有定位。

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

完成了任务八