任务耗时：2019.2.16-2019.2.18（3天）

任务3总结：

PS 切图 导图 测量  建议下个蓝湖，很好用，一部到位；

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸

rem是新增的一个相对单位，这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

浮动。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止 ，浮动元素之后的元素将围绕它。

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距；总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

一般情况下，样式优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式 -->

转至元数据起始

<form action="#"> <input type="tel" placeholder="请输入数字" pattern="\d{11}"> <input type="submit"> </form>

fixed：生成绝对定位元素，相对于浏览器窗口的定位。通常配合z-index一起来使用。比如说网页上悬挂的聊天图标或者广告就是用了fixed

css任务五总结

任务耗时：2019.2.20-2019.2.21（2天）

任务总结：

命名规则说明

1）、所有的命名最好都小写

2）、属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5"

3）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整

4）、空元素要有结束的tag或于开始的tag后加上"/"

5）、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等

6）、<h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。

7）、给每一个表格和表单加上一个唯一的、结构标记id

8）、给图片加上alt标签

9）、尽量使用英文命名原则

10）、尽量不缩写，除非一看就明白的单词

二、相对网页外层重要部分CSS样式命名

外套 wrap ------------------用于最外层

头部 header ----------------用于头部

主要内容 main ------------用于主体内容（中部）

左侧 main-left -------------左侧布局

右侧 main-right -----------右侧布局

导航条 nav -----------------网页菜单导航条

内容 content ---------------用于网页中部主体

底部 footer -----------------用于底部

书写规范

单行形式书写风格的排版约束

- 如果是在html中写内联的css，则必须写成单行；

- 每一条规则的大括号 { 前后加空格 ；

- 每一条规则结束的大括号 } 前加空格；

- 属性名冒号之前不加空格，冒号之后加空格；

- 每一个属性值后必须添加分号; 并且分号后空格；

- 多个选择器共用一个样式集，则多个选择器必须写成多行形式 ；

多行形式书写风格的排版约束

- 每一条规则的大括号 { 前添加空格;

- 多个选择器共用一个样式集，则多个选择器必须写成多行形式 ;

- 每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐 ;

- 属性名冒号之前不加空格，冒号之后加空格;

- 属性值之后添加分号；

css任务六总结

任务耗时：2019.2.22-2019.2.24（3天）

任务总结：

雪碧图

background-position的定义

background-position 属性设置背景图像的起始位置。这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

background-position属性设置背景原图像（由 background-image 定义）的位置，意味着使用这个属性的前提是必须设置背景原图像background-image。

background-position属性值

background-position属性值有三种情况

background-position两个属性值可以混用，例如：方向值和数值、数值和百分比，并非x轴和y轴需要设置为同一类型的属性值，这点也正是说明了background-position属性可以衍生单独设置background-position-x 或 background-position-y。

background-position 属性的作用：设置背景图像的起始位置。这里的起始位置是相对于自身容器而言，如果属性值为数值

例如：background-position：100px 50px 这个属性值意味着图片在距离自身容器x轴为100px、y轴为50px的位置作为图片显示的起点位置。

使用百分比来设置属性值，是以自身容器的长宽 减去 图片的长宽 乘以 百分比 所得的数值来确定图片的起始位置。

（容器自身的宽度/高度 - 图片自身的宽度/高度） x 百分比 

例如：background-position：50% 50% 

background-position属性值如果是数值，那么指相对于容器自身数值的距离作为起始位置；如果是百分比或者是方向，那么指的是相对于容器自身（容器自身的宽度/高度          - 图片自身的宽度/高度） x 百分比 所得的数值作为起始位置。

如果不设置background-position属性值，那么默认起始位置为background-position：0%     0%。

方向值和百分比的计算方式是一样的，它们可以相互转换，left：0%，right：100%，center：50%。

如果background-position属性值只设置一个，那么另一个默认为center。

雪碧图

CSS雪碧图即CSS Sprites，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。

上面这张图片是由多个小图片合成的，前端成它为CSS雪碧图。

background-position属性在雪碧图中的用法

雪碧图中各个小图标（icon）在整张雪碧图的起始位置，例如第一个图标（裙子）在雪碧图的起始位置为 x：0，y：0，第二个图标（鞋子）在雪碧图的起始位置为 x：0，y：50px，第三个图标（足球）在雪碧图的起始位置为x：0，y：100px，依次类推可以得出各个图片相对于雪碧图的起始位置。

css伪类选择器
伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。
比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。