今天完成：

1、 修改提交任务九，完成任务十

2、 继续了解了sass

明天计划：

1、 开始做任务十二

2、 了解组件库

遇到的问题：

1、 无法修改td的宽度。

td无法像修改div一样任意修改其宽度，需要充分利用合并单元格，最后一个未设置宽度的列其宽度自适应的特性。

收获：

1、 CSS table-layout 属性

tableLayout 属性用来显示表格单元格、行、列的算法规则。

word-wrap 属性

word-wrap 属性允许长单词或 URL 地址换行到下一行。

word-break 属性

word-break 属性规定自动换行的处理方法。

2、 在SASS中，您可以创建自己的函数，并在脚本上下文中使用它们，或者可以与任何值一起使用。通过使用函数名和任何参数来调用函数。

2、 $first-width: 5px;

3、 $second-width: 5px;

4、  

5、 @function adjust_width($n) {

6、   @return $n * $first-width + ($n - 1) * $second-width;

7、 }

8、  

函数也可以访问全局定义的变量，也可以接受参数。 使用 @return 来调用函数的返回值。 可以使用关键字参数调用SASS定义的函数。

调用上述函数，如下所示。

#set_width { padding-left: adjust_width($n: 10); }

命名约定

为了避免命名冲突，函数名称可以带前缀，以便可以轻松区分。 与mixins一样，用户定义的函数也支持变量参数。 函数和其他SASS标识符可以交替使用下划线（_）和连字符（ - ）。例如，如果函数定义为 adjust_width，则它可以用作 adjust-width，反之亦然。

3、Style 对象

Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。

document.getElementById("id").style.property="值"

同样也可以写作document.getElementById("id").style =" property：值；property ：值；"

4、.判断浏览器是否支持制定的css属性

if("property" in document.documentElement.style)

谷歌浏览器在Google浏览器中还可以使用window.CSS.supports判断css的属性和值

console.info(window.CSS.supports('border','red'));

5 、HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

·        JavaScript 能够改变页面中的所有 HTML 元素

·        JavaScript 能够改变页面中的所有 HTML 属性

·        JavaScript 能够改变页面中的所有 CSS 样式

·        JavaScript 能够对页面中的所有事件做出反应