今天完成的事情：

完成了自适应布局，对于如何进行页面布局有了一些了解（刚接到任务的时候完全不知道从哪下手，实在没想到最后能够完成）；

对于布局：

刚开始是全部使用绝对定位布局（现在想想真佩服自己竟然敢这么干），最后因为做不到自适应放弃了；缺陷：完全利用绝对定位进行的布局就像没打好地基的大楼一样随时都有可能崩塌，改动一点都可能让页面彻底毁掉，到时候修复的时间怕是比重新写的时间更长；

现在则是使用普通流+内外边距+float进行的布局（这不就是我在任务一用的吗），利用普通流和内外边距就完成了大部分，剩下两个图标只想到了利用float实现；

总结：

个人感觉大部分布局都应该使用普通流做地基，普通流完成不了的再使用float、绝对定位，float、绝对定位应该是类似于“大楼”上的装饰，让“大楼”更加漂亮、美观，而不是作为大楼的主体（不好控制，特别是绝对定位）；

关于BFC：

BFC全称是“block formatting context”，意思是“块级格式化上下文”，它是一个独立的渲染区域，只有块级盒子参与，规定了内部的块级盒子如何布局，并且与这个区域外部毫不相干（盒子内部的元素不会影响到这个盒子的外部元素，盒子外部的元素也影响不了这个盒子的内部）；display属性为block、list-item、table的元素，都会生成块级盒子（block-level box），并且参与“BFC”；

BFC的布局规则：

2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠；

3.每个元素的margin box的左边，与其父元素border box的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此；

4.BFC的区域不会与float box重叠；（个人理解就是浮动元素不会盖住普通流中的元素）

5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦如此；

6.计算BFC的高度时，浮动元素也参与计算（本来子元素浮动后其父元素所出现的高度塌陷，因为触发BFC重新包裹了浮动元素）；

从这六个规则可以发现这和平常页面的规则一模一样，感觉就像是一个大页面中的小页面啊喂；

能够生成BFC的元素：

1.根元素；（所以在创建页面之初就已经触发了BFC咯，怪不得规则一样）

2.float属性不为none；

3.position的值为absolute或fixed；

4.display为inline-block、table-cell、table-caption、flex、inline-flex；

5.overflow不为visible；

总结：

规则很好理解，而要想触发BFC只需要对需要触发BFC的元素添加上面的元素就行；

ps：对于float属性用来闭合浮动很好用，但是对于absolute添加那些元素发现并不管用，更加说明了absolute的不可控；

深度思考：

1.如何利用PS切图以及从UI图中获取所需信息？

可以利用传统切图或是自动切图；使用吸管工具获取所需颜色，窗口中的字符选项包含有字体、字体大小、行距等信息；

2.px、em、rem、%、vw、vh、vm等单位有什么区别；

px：“pixel”的简写，意为“像素”；相对长度单位，相对的是显示器的屏幕分辨率；每1px就是屏幕上的一个点，我的屏幕分辨率是1366*768，也就是屏幕宽1366px，高768px；大部分浏览器默认的字体大小是16px；

em：相对长度单位，相对于当前对象内文本的字体尺寸；如果当前行内文本的字体未设置，则相对于浏览器的默认字体尺寸（参考物是其父元素，如果父元素未设置字体尺寸，则相对于浏览器默认尺寸）；拥有继承的特点，如果父元素设置了0.5em，那么父元素字体就是0.5*16=9px，父元素的子元素就需要设置1em以保证字体大小与父元素相同，而如果也设置0.5em，就变成了0.5*16*0.5=4.5px；

rem：全称是“root em”，在css3定义，相对长度单位，相对与根元素（即html元素）font-size计算值的倍数；不同于em单位依赖父元素的大小，而是根据根元素的大小设置，不会引起字体大小混乱；

%：百分比也是相对长度单位，但是其相对于谁却比较混乱：

（1）、当为一个元素的高度设定为百分比值时，其高度是相对于其父元素的高度计算的；

那么如果其父元素没有设置高度呢？经过实验，如果父元素没有设置高度，那么当其子元素高度值为百分比时，会有两种情况：一、子元素有内容时（内边距和边框也被认为是内容，外边距不被承认为内容），其父元素的高度就是子元素内容的高度（文本高度+内边距高度+边框高度），此时子元素的高度则是文本的高度，百分比值的计算为0（因为父元素现在的高度是由子元素内容撑起来的，百分比是计算父元素自身带有的高度）；二、子元素没有内容时，其父元素的高度为0；子元素的高度为0（也就是拿父元素的高度乘于子元素的百分比高度）；

如果父元素的高度也是百分比值，则一直向根元素追溯，其中某一父元素没有设置高度，那么结果为0（当遇到某一父元素的高度值为px单位，就会停止向根元素追溯，利用px单位的父元素一层一层进行计算）；如果连根元素html的高度都是百分比值，则会根据页面当前在屏幕上显示的高度（也就是视口，标题栏之类的不计算在内）由html元素一层一层向下计算（html先计算，再是body。。。）；

（2）、为一个元素的宽度设定百分比值时，其宽度相对与其父元素的宽度计算，在其父元素也是百分比值时，和高度一样也是向根元素追溯，但是父元素没有设定宽度的话，和高度表现不同，这里元素的blcok属性参与其中；

（3）、为元素的padding、margin设定百分比值，其宽、高都是依据其父元素的宽计算；父元素也是百分比值则同样向根元素追溯，如果没有设定宽度则考虑block属性；

（4）、为元素进行浮动（float）并设定百分比宽、高、padding、margin，依旧按照上面三条概念设置自身；

ps：绝对定位因为还没搞懂，就没有尝试；

vw：css3中的新单位，相对于视口的宽度，视口被均分为100单位的vw，全称是“viewport width”，浏览器宽度是1300px，则1vw=1300px/100=13px；

vh：css3中的新单位，相对于视口的高度，视口被均分为100单位的vh，全称是“viewport height”，浏览器高度是700px，则1vh=700px/100=7px；

vm：css3中的新单位，有两个，一个是：vmax，相对于视口的宽度和高度中较大的那个，其中最大的那个被均分为100单位的vmax，全称是”viewport max“，浏览器高度700px，宽度1300px，则1vmax=1300px/100=13px；另一个：vmin，相对于视口的宽度和高度中较小的那个，其中最小的那个被均分为100单位的vmin，全称是“viewport min”，浏览器高度700px，宽度1300px，则1vmin=700px/100=7px；

3.如何进行自适应网页设计？

在head标签中添加

页面布局中不使用px单位，而是选择em、%、rem、vh、vw这类的相对单位；

4.css有哪些选择器，优先级如何计算？

类（.）选择器、id（#）选择器、通配符（*）选择器、单个元素构成的选择器、多个元素以逗号（，）分隔的选择器、以空格分隔的上下文选择器、子选择符（>）选择器、紧邻同胞选择符（+）选择器、一般同胞选择符（~）选择器、属性名选择器（标签名[属性名]{声明；}）、属性值选择器（标签名[属性名=“属性值”]{声明；}）、伪类、伪元素；

优先级的计算：

！important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器样式

也可以使用权值（0,0,0,0）：

内联样式的权值是1000；

ID选择器的权值是100；

class选择器的权值是10；

HTML标签的权值是1；

哪个权值高使用哪个（所谓的权值并不是十进制值，只是一种概念，ID选择器永远大于class选择器，即使class选择器有上万个，ID选择器只有一个，这点也不会改变，其它的也相同）；

同一级别中，后写的样式覆盖先写的样式；

css解析原则：

从右向左解析，而不是采用从左向右的模式；链接：https://blog.csdn.net/jinboker/article/details/52126021

5.什么时候用margin好，什么时候用padding好？

对于一个元素，当需要设置它与其它元素之间的距离时使用margin，当需要设置它与内部内容之间的距离时使用padding；

6.手机分辨率和网页中的px是一回事吗？

并不是，网页中的px是相对于电脑显示器的，而手机分辨率与电脑的分辨率自然是不同的；

明天计划的事情：

提交任务三，转战任务四；

遇到的问题：

对于手机分辨率啊这类的看不懂啊；

目前还是做不到控制绝对定位；

收获：

最大的收获应该是对于布局的理解吧，从刚接到任务的不知从哪下手到现在的对于布局有了一些想法;

然后是百分比值和盒模型，盒模型是基础也是核心，不论是什么元素都逃不开盒子；

以及BFC和选择器，都只学了个表面啊，还有更多的东西需要挖掘；