今天完成的事情：

1，任务六下拉菜单和按钮不等宽，设置.dorp-menu{min-width: 100%}

下拉菜单指向向下的箭头应该是靠近分割线的，查看样式发现它其实是文字后面跟一个：：after元素，整个按钮text-align：center；设为text-align：right；下箭头就靠右了，after再设置一个合适的左外边距，就能达到想要的效果。

2，设置页面分辨率缩小，左边文字变成省略号：

明天要做的事情：查看并写出任务七要求掌握的知识点，思考页面布局，联系更快写页面

遇到的问题：暂无

进度：

任务名称：css-task5

成果链接：https://travelerone.github.io/learngit/task5.html

任务耗时：本次任务从4.9-4.14 共耗时6天

官方脑图：

个人脑图：

任务总结：

1，box-sizing属性，并排放置两个带边框的框，可将box-sizing设为border-box。

2，width，默认值auto，子元素（包括content+padding+border+margin）撑满整个父元素的content区域，

width：100%，父元素的content=子元素的content，子元素有margin，border，padding时，不改变子元素的width，而是溢出盒子，保持原有值，

无论内容区width：100%还是auto，其计算的参照都是父级内容区的width值，而非总宽度值。

3，flex是Flexible Box的缩写，意为弹性布局,flex:1;=flex{1,1,0%},项目可放大，可缩小，可用空间占据屏幕，flex取值none，计算值为0，0，auto，不放大，不缩小，对应取主尺寸。

4，absolute 绝对定位，如果父元素且所有祖先元素没有进行定位，其宽高百分比将根据浏览器可视宽高进行计算，

如果父元素进行了定位，宽高则根据父元素的盒子宽高（content+padding）（不含border）进行计算。

5，div>p 选取父元素是<div>元素的每个<p>元素样式

div p 选择并设置位于<div>元素内部的每个<p>元素样式。

6，css编码规范和html编码规范，有几个要注意的地方

使用4个空格作为一个缩进层级，选择器与 { 之间必须包含空格，属性名与：不含空格，：与属性值必须包含空格，rgb颜色值必须使用十六进制记号形式，需要在Windows平台显示的中文内容时，其字号应不小于12px，class必须代表相应模块或部件的内容或功能，不得以样式信息进行命名，图片添加width和height属性，以避免页面抖动，有下载需求的图片采用img标签实现，无下载需求的图片采用css背景图实现。

7，发现一些小图标是用<i>标签写的，然后给<i>标签添加样式，而不是直接引用图片。

.icon{

            display: inline-block;

            width: 100px;

            height: 100px;

            background-image: url(i/logo.png);                                             

            background-position: center center;

            background-size: 60px 60px;

            background-repeat: no-repeat;

}

8，设置背景图，用background-image标签占据元素全部尺寸，包括内边距和边框，不包括外边距。

背景图位于元素的左上角，并在水平和垂直方向上重复，默认进行横向纵向平铺。

background-size默认值auto auto，背景原始大小，设为100% 100%，那么宽高为容器宽高100%。