昨天遗留的问题，使用了positing来定位位置导致的盒子挤出父集范围问题。

原因是使用了positing之后，盒子的位置可以随意更改，而我设置了所有位置为0导致盒子的位置会显示出父集的范围。

只需要使用 top，lift， right，bottom属性来更改到理想的位置即可。

css代码：

.garden {
    position: absolute;
    background-color: #5fc0cd;
    width: 99px;
    height: 99px;
    border-radius: 60px;
    text-align: center;
    left: 0;
    top: 50px;
    bottom: 0;
    right: 0;
    margin: auto;
}

页面效果：

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

为什么使用CSS绘制图形？

在写网页的时候，会遇到需要装饰一些几何图形的情况，用css就可以实现很多特殊形状的绘制。

它的特点是放大后图像不会失真，档案的占用空间较小，也可以减少http的请求。

css可以绘制几种常见的特殊形状：圆形/椭圆形，三角形/梯形，平行四边形

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

vertical-align 属性设置元素的垂直对齐方式。

line-height 属性设置行间的距离（行高）。

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

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，

block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。

弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

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

1. title与h1的区别

定义：

        title：概括了网站信息，可以告诉搜索引擎或者用户这个网站的内容主题是什么

        h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么

区别：

        title：显示在网页标题上； h1：显示在网页内容上

        title比h1更重要（SEO的角度）

2. b与strong的区别

定义：

        b：实体标签，是用来给文字加粗的

        strong：逻辑标签，用来加强字符语气的（盲人阅读器中）

区别：

        b：只有加粗的样式，没有实际的含义

        strong：表示标签内字符比较重要，用以强调的

为了符合CSS3的规范，b尽量少用，改用strong

3. i与em的区别

定义：

        i：实体标签，用来做文字倾斜的

        em：逻辑标签，用来强调文字内容的

区别：

        i：只是一个倾斜标签，没有实际含义

        em：表示标签内字符重要，用以强调的

4. src与href的区别:

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

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

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

5. alt与title区别

alt 是给搜索引擎识别, 在图像无法显示时的替代文本;

title 是关于元素的注释信息, 主要是给用户解读 。

 当鼠标放到文字或是图片上时有 title 文字显示 。

 在定义 img 对象时, 将 alt 和 title 属性写全, 可以保证在各种浏览器中都能正常使用 。

 alt 属性和 title 属性的区别是:

前者 alt 是在图片无法加载的时候才会显示的其值;

 而 title 是在图片正常加载鼠标划上去显示的值;

5.如何使用IconFont？

symbol引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。

通过一些技巧，支持像字体那样，通过font-size,color来调整样式。

兼容性较差，支持 ie9+,及现代浏览器。

浏览器渲染svg的性能一般，还不如png。

使用步骤如下：

第一步：引入项目下面生成的symbol代码：

<script src="./iconfont.js"></script>

第二步：加入通用css代码（引入一次就行）：

<style type="text/css"> 

.icon { 

    width: 1em; height: 1em; 

    vertical-align: -0.15em; 

    fill: currentColor; 

    overflow: hidden; } 

</style>

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>

参考博客：https://blog.csdn.net/qq_39176732/article/details/81390423

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

ul，ol，dl标签是CSS网页布局中常用的列表元素。 列表将具有相似特征或先后顺序的内容按照从上到下的顺序排列起来。

ul标签：无序列表始于 u l 标签。每个列表项始于l i标签，此列项目默认使用粗体圆点（典型的小黑圆圈）进行标记。

ol标签：有序列表始于ol标签，每个列表项始于li标签，列表项目使用数字进行标记。

dl标签：dl标签是定义列表，自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 dl 标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始

明天计划：开启下一个任务。