今天完成的事情：

今天学习了数组，对象的定义，GO，AO，以及任务五的深度思考
收获：

1.css可以绘制哪些常见的特殊形状？

Star (5-points)(五角星)

#star-five {

   margin: 50px 0;

   position: relative;

   display: block;

   color: red;

   width: 0px;

   height: 0px;

   border-right:  100px solid transparent;

   border-bottom: 70px  solid red;

   border-left:   100px solid transparent;

   -moz-transform:    rotate(35deg);

   -webkit-transform: rotate(35deg);

   -ms-transform:     rotate(35deg);

   -o-transform:      rotate(35deg);

}

#star-five:before {

   border-bottom: 80px solid red;

   border-left: 30px solid transparent;

   border-right: 30px solid transparent;

   position: absolute;

   height: 0;

   width: 0;

   top: -45px;

   left: -65px;

   display: block;

   content: '';

   -webkit-transform: rotate(-35deg);

   -moz-transform:    rotate(-35deg);

   -ms-transform:     rotate(-35deg);

   -o-transform:      rotate(-35deg);

}

#star-five:after {

   position: absolute;

   display: block;

   color: red;

   top: 3px;

   left: -105px;

   width: 0px;

   height: 0px;

   border-right: 100px solid transparent;

   border-bottom: 70px solid red;

   border-left: 100px solid transparent;

   -webkit-transform: rotate(-70deg);

   -moz-transform:    rotate(-70deg);

   -ms-transform:     rotate(-70deg);

   -o-transform:      rotate(-70deg);

   content: '';

}

Heart(心形)

40个纯CSS绘制的图形21

#heart {

    position: relative;

    width: 100px;

    height: 90px;

}

#heart:before,

#heart:after {

    position: absolute;

    content: "";

    left: 50px;

    top: 0;

    width: 50px;

    height: 80px;

    background: red;

    -moz-border-radius: 50px 50px 0 0;

    border-radius: 50px 50px 0 0;

    -webkit-transform: rotate(-45deg);

       -moz-transform: rotate(-45deg);

        -ms-transform: rotate(-45deg);

         -o-transform: rotate(-45deg);

            transform: rotate(-45deg);

    -webkit-transform-origin: 0 100%;

       -moz-transform-origin: 0 100%;

        -ms-transform-origin: 0 100%;

         -o-transform-origin: 0 100%;

            transform-origin: 0 100%;

}

#heart:after {

    left: 0;

    -webkit-transform: rotate(45deg);

       -moz-transform: rotate(45deg);

        -ms-transform: rotate(45deg);

         -o-transform: rotate(45deg);

            transform: rotate(45deg);

    -webkit-transform-origin: 100% 100%;

       -moz-transform-origin: 100% 100%;

        -ms-transform-origin: 100% 100%;

         -o-transform-origin: 100% 100%;

            transform-origin :100% 100%;

}

Infinity(无限符图形)

40个纯CSS绘制的图形22

#infinity {

    position: relative;

    width: 212px;

    height: 100px;

}

#infinity:before,

#infinity:after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 60px;

    height: 60px;

    border: 20px solid red;

    -moz-border-radius: 50px 50px 0 50px;

         border-radius: 50px 50px 0 50px;

    -webkit-transform: rotate(-45deg);

       -moz-transform: rotate(-45deg);

        -ms-transform: rotate(-45deg);

         -o-transform: rotate(-45deg);

            transform: rotate(-45deg);

}

#infinity:after {

    left: auto;

    right: 0;

    -moz-border-radius: 50px 50px 50px 0;

         border-radius: 50px 50px 50px 0;

    -webkit-transform: rotate(45deg);

       -moz-transform: rotate(45deg);

        -ms-transform: rotate(45deg);

         -o-transform: rotate(45deg);

            transform: rotate(45deg);

}

2.如何理解vertical-align与line-height？

line-height:

当内容中含有图片时，如果图片的高度大于行高，则含有图片行的line box将被撑开到图片的高度（虽然撑开了line box，但不会影响line-height，因此也不会影响到基于行高来计算的其他属性）

所有的内联元素都有两个高度：基于字体度量的 content-area、virtual-area（也就是 line-height ），这两个高度都无法看到

vertical-align:

3.请解释一下CSS3的Flexbox（弹性盒布局模型）以及适用场景？

1. 什么是flex


flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。块级元素只需要display属性为flex即可。行内元素也可以使用 Flex 布局。.box{ display: inline-flex; }。Webkit 内核的浏览器，必须加上-webkit前缀。

2.基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 项目默认沿主轴排列。

3.容器属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

flex-wrap属性定义，如果一条轴线排不下，如何换行。默认情况下，项目都排在一条线（又称”轴线”）上。

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

justify-content属性定义了项目在主轴上的对齐方式。

align-items属性定义项目在交叉轴上如何对齐。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

4.项目属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex属性是以上三个的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

4.title与h1、b与strong、i与em、img的alt与title、src与href有什么区别

title与h1的区别:

定义：title是网站标题，h1是文章主题

作用：title概括网站信息，可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的，是显示在网页Tab栏里的；h1突出文章主题，面对用户，更突出其视觉效果，指向页面主体信息，是显示在网页中的

b与strong,i与em的区别:

但从视觉上效果观看b与strong、i与em是没有区别的,唯一区别是搜索引擎检索的时候搜索引擎可以识别strong、em标签、而不能识别b与i标签

建议：为了符合CSS3的规范，b应尽量少用而改用strong ,i应尽量少用而改用em

img中的alt与title属性区别:

alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方

title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，有点类似jQuery的hover

src与href的区别:

href，.是超文本引用，指向需要连结的地方，是与该页面有关联的，是引用。在 link和a 等元素上使用。

src是指向物件的来源地址，是引入。在 img、script、iframe 等元素上使用

src通常用作“拿取”（引入），href 用作 “连结前往”（引用）

6.HTML中dl、ul、ol用哪个比较好？

什么是dl标签

dl标签就是定义列表，英文的单词是 definition list

接下来还有definition title  dt  列表的标题 这个标签是必须要的

definition description 列表的列表项，如果不需要它，可以不加 dd

就是说，dt、dd只能在dl里面；dl里面只能有dt、dd。

什么是ul标签

无序列表 unordered list，“无序列表”的意思。

无序列表中的每一项是li标签

li：list item，“列表项”的意思。

什么是ol标签

有序列表ol 英文单词：Ordered List。

里面的每一项都是li标签

列表

dl标签的作用非常大，在很多的大型网站上面都用它

上图可以看出，定义列表表达的语义是两层：

（1）是一个列表，列出了几个dd项目

（2）每一个词儿都有自己的描述项。

ul标签

li不能单独存在，必须包裹在ul里面；反过来说

ul的“儿子”不能是别的东西，只能有li。

我们这里再次强调，ul的作用，并不是给文字增加小圆点的，

而是增加无序列表的“语义”的。

ol标签

和无序列表一样，有序列表也是可以嵌套的哦

ol和ul就是语义不一样，怎么使用都是一样的

ol里面只能有li，li必须被ol包裹。li是容器级。