[深圳|结业弟子]JS-何阳|2018年06月08日的日报-技能树.IT修真院

发表于： 2018-06-08 22:08:45

1 626

今天完成的事情：

1、写完轮播图，总算知道轮播图的运作原理了。

2、页面一重构了一半，剩下的页面可分成一个个单独的组件，给出相应的媒体查询就好，没什么问题。

明天的计划：

1、完成三个页面第一轮重构，规范命名，拆出组件。

遇到的困难：

整个轮播图以input type=radio 为枢纽，绑定id，实现左右箭头和图下的小圆点与图片关联，共同形成完整的轮播图。

收获：

1、层级关系之间的理解

<input type='checkbox' id='sidemenu'>和<label class="boxx6" for='sidemenu'>≡</label>可以不在同一个父级元素里面。

如果在一个父级元素，那他们就是同级关系，会出现这样的情况。

进度：task14,15

任务开始时间：2018.6.5

预计结束时间：2018.6.10

是否有延期风险：无

禅道：http://task.jnshu.com/zentao/project-task-717.html

补任务总结：css任务task3~task13

任务名称：CSS—task3

成果链接：http://118.126.113.248/jnshu807/task3/task3.html

任务耗时：2018.5.1-2018.5.3，无延期

技能脑图：

任务总结：

1、计划通过4个div布局实现最终效果图布局，在实现过程中发现对盒子运用了不是很熟悉，经历大量尝试之后才算完美局部完成一个div。

2、图片的居中，将图片变成块元素display；block，加上margin；auto。便可实现居中

3、关于图片大小自适应。用em单位设置img图片尺寸，让其能根据屏幕尺寸自适应。

4、ps切图，皓宇师兄指导我用cutterma。ps小插件很好用。能切出效果图中想要的图层，并可以合并导出，切图变得很轻松，心情自然很愉悦。

5、对于positioning定位有了进一步了解。

①static 定位
html的默认值，既没有定位，元素出现在正常的流中。
静态定位的元素不会受到top、bottom、left、right影响。

②fixed定位
元素的位置相对于浏览器窗口是固定的位置
即使窗口是滚动的它也不会移动。

③relative定位
相对定位元素的定位是相对其父元素位置。

④absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置则是相对于<html>。

任务名称：CSS—task4

成果链接：http://118.126.113.248/jnshu807/task4/task4.html

任务耗时：2018.5.4-2018.5.6，无延期

技能脑图：

任务总结：

任务四主要学习的是input表单，absolute与其它定位的区别。

中间遇到很多问题，我发现思路很重要，思路错了整个布局都会跟着错，而且会耽误不少时间。

如果回过头让我重新写一遍任务四，我想我会按照以上脑图这样的思路来进行规划。

首先分为三个模块：

1、html标签设置，这也是对整个布局的一些属性的设置。背景，因为要自适应的原因，要对字体单位的进行转换。

2、header，固定头标的设置，思考到底要使用哪种定位才能在移动滚动条时一直紧贴顶部，

使用哪种盒子才能支持在去掉header的三块文字的任意一两个，剩下的都还在原位置上不会受到影响，

保持header的自适应，这点需要理解使用哪种长度单位和定位方式才奏效。

3、input表单的设置，看了一下，表单的属性符很多，想要用好还得多写。任务四我主要练习了input输入框插入图片，提示符变色悬浮，输入框隐身，默认样式去除。

type text：定义了input的输入类型为文本输入;常用的还有submit、password等；
username:只有设置了对应的名称，才能在提交表单的时候传递他们的值；
placerhoder:交互有关。提示。

4.对盒子的理解更深入了，margin是外框可以设置在表单周围达到悬浮效果，padding可控制实际距离。加上%单位可以进行很灵活的自适应布局。

遇到的问题：

1、表单刚接触时，感觉十分的困难，看着任务四中的效果图，以为效果图表单中的样式都有固定的元素属性，

于是乎在网上找啊找啊，后来发现不对，既然这样那岂不是多一个新东西它后面会跟一堆的新属性？这样子css岂不是很难用？

原来表单可以结合盒子啊、定位啊、百分比啊等等各种属性一同使用，能想到就能实现。思维不能太死板了。

任务名称：CSS—task5

成果链接：http://118.126.113.248/jnshu807/task5/task5.html

任务耗时：2018.5-2018.5.8，延期一天，总结前面所学的知识

技能脑图：

任务总结：

任务五主要学习的是对之前所学的一次综合练习，进行更复杂的布局，框架更严密。对弹性盒子的理解更透彻了。

遇到的问题：

1、如何在页面缩小时，main里面的内容会自己变成滚动框？

给main加一个固定的上下值就好了。

2、position定位的问题：

fixed定位

元素的位置相对于浏览器窗口是固定的位置

即使窗口是滚动的它也不会移动。

relative定位

相对定位元素的定位是相对其父元素位置。

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。

之前对定位的印象还不够深刻，绝对定位和相对定位是超文本流的，不在普通文本流上，可以说是它会浮起来，特别要注意超文本流与普通文本流的区别。

收获：

1、可以使用多种方法布局。

header，fixed定位头部，除了用top：0的方法外，用弹性布局中的属性值也可以实现，不过相比之下，top：0这样的方法无疑是最简单粗暴的。

想实现一种布局，可以用到很多种方法。

又比如像图下个小图标其实用CSS是可以实现的，而我用的

办法是ps插图，这无疑将简单的问题复杂化，用哪种方法比较高效比较简单，这种思考计较还需要多多练习。

2、弹性盒子的一些特性及使用技巧。

①它是通过主轴和纵轴来确定盒子里元素布局的，能精确智能控制。

②任何一个容器都可以指定为Flex布局，但要注意设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

③弹性盒子有专门设置在容器上的6个元素，还有专门设置在项目上的6个元素，深刻了解里外这12个元素，你可以将盒子里的布局按照你想要的顺序、空间、对齐方式来展现，而且大大提高了代码的简洁程度，干净优雅。

3、vertical-align和line-height的关系。

①先简单的介绍一下：line-height是指行间的距离。 vertical-align是设置元素的垂直对齐方式。

②在插入一张图片样式的内联元素时其实图片的下部分是有一点点非常小的空隙的，这个空隙就是这两个元素携手捉弄出来的。line-

height它是有个默认行距的，文字的上下事由空隙的。而vertical-align呢，他的垂直对齐则是针对baseline基线对齐的，因此当我们设置背景图片时就会和明显的发现内联元素底部的默认行距产生的空隙。因此为了布局的美观，我们要消灭空隙，可以将line-height设置为0，也可以将字体高度设置为0，因为line-height是基于字体高度换算的。但是有的时候我们要体现出字体那就不能设置为0了，怎么办？

这时候可以采用vertical-align对齐方式，就是让两端对齐的列表元素vertical-align:top/bottom/...。

4、弹性盒子的好处以及运用场景。

①该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。弹性盒子模型可以在我们实现响应式时更加的优雅。

②该模型用于决定元素在盒子中的分布方式以及处理盒子的可用空间。这与XUL（Firefox浏览器的用户交互语言）相似，其他语言也使用相同的盒模型。如XAML，GladeXML等。通过弹性盒模型，可以轻松地创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。

②注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

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

①无序列表：ul

无序列表在不同浏览器下的默认设置是由些许差异的。

②有序列表：ol

有序列表在当列表项目的每个列表项目前面需要一个递增值的时候使用（例如1,2,3等）。有序列表的列表类型list-style-type可以被设置为任何在无序列表下可以设置的值。在大部分情况下，有序列表要么前面是个递增数值，要么前面没有任何标记。不建议使用有序列表实现类似于无序列表的表现。因为这样，有序列表本身的语义已经不正确了。

③定义列表：dl

定义列表用来标记已经定义的列表项，它们包括定义标题(dt)以及定义本身(dd)。定义列表项目没有必要完全匹配。

特别注意：ul，ol，dl在不通的浏览器呈现的效果是不一样的，为了避免在不同浏览器下处理列表样式的时候出现问题，最好的方法是使用在前面提到的CSS的重置(css reset)，CSS reset几乎可以将浏览器所有默认设置差异设置为最小，并允许所有浏览器下都在同样的基础上工作。虽然某些样式下依然存在差异，但是它们不会被当作一个难点来处理了。另外，最好完全避免使用list-style-image属性，而以设置background代替，这是一个跨浏览器的，易于维护的无序列表的自定义符号解决方法。

任务名称：CSS—task6

成果链接：http://118.126.113.248/jnshu807/task6/task6.html

任务耗时：2018.9-2018.5.12

技能脑图：

任务总结：

任务六主要是学习bootstrap框架系统，尤其是其中的经典格栅系统，理解后应用在布局上感觉很方便。

1、Bootstrap全局样式。

①移除body的margin声明。

②设置body的背景色为白色。

③为排版设置了基本的字体、字号和行高。

④设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式。

2、栅格系统的优势

能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节约不少成本。

基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。

以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。

3、bootstrap的格栅系统。

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

Container 有两个作用

在随时可能的宽度变化(响应式)中提供宽度限制。当页面宽度变化，container 的宽度也随之变化。并且其中的 column 的宽度是基于百分比，所以他们的值不需要变化。

提供一个水平方向的 padding，使其内部的内容不会接触到浏览器的边界，大小为15px。

注意，不需要也不应该在 container 中嵌套另一个 container。

row

Row 是 column 直接存在的容器，按照文档描述 row 中最多可有12个 column，不过可以通过 nesting 的方式灵活扩展。同时作为都是左浮动的 column 的 wrapper，自带 clearfix 的性质。

同时 row 还有一个很特殊的地方，就是左右各有－15px 的 margin。这样也就抵消了container 中15px的 padding。

注意：千万记住要把 row 放到 container 的内部，这样才能保证正常。

column

注意啦，每个column 也会有15px的水平方向的 padding。colunmn 只能在 row 中生存，由于 row 的 margin 为－15px，那么位于两边的 column 就碰到了 container 的边界。但是 colunmn 本身又有 15px 的 padding 使得它其中的内容并不会碰到 container，同时不同column的内容之间就有了30px的槽。

注意：一定要把 column 放到 row 里使用。

nesting

当把上面一系列的 container, row, column 都设置好，就可以通过 nesting 扩展它的栅格系统了，也就是在 column 中直接嵌套 row，而不需要再套一层 container。还记得 container 和 column 都有15px的 padding 吗，当 nesting 的时候 column 的作用也相当于 container 了，这样就可以实现任意的嵌套了。

4、bootstrap如何搭建基本框架，如何加入组件？

①这是bootstrap3的基本框架，自己的css样式或者bootstrap组件放入body中，js样式放在body后面。

<!DOCTYPE html><html lang="zh-CN">

<head>

<title>Bootstrap 101 Template</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</body></html>

②框架不能随意删，自己的样式引入放在<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">的后面，否则bootstrap会覆盖你的css样式。

③bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入上面面代码文件即可。

同理为使IE6、7、8版本浏览器兼容css3样式，引用下面代码：

<!--[if lt IE 9]>

<![endif]-->

任务名称：CSS—task7

成果链接：http://118.126.113.248/jnshu807/task7/shouye/task7_1.html

任务耗时：2018.13-2018.5.17

技能脑图：

任务总结：

task7：对bootstrap进行了更复杂编排，学会使用audio、hover、如何处理半透明盒子。

深度思考：

1、什么是CSS sprites？

可以叫css精灵，俗称雪碧图。

它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

2、什么是浮动？有哪些清除浮动的方法？

浮动脱离了普通文本流。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

清除浮动：

①父级div定义伪类：after和zoom

②在结尾处添加空div标签clear：both

③父级div定义height

④父级div定义overflow:hidden

⑤父级div定义overflow：auto

⑥父级div也一起浮动

⑦父级div定义display：table

⑧结尾处加br标签clear：both

3、rgba和opacity的透明效果有什么不同？display和visiblity有什么区别？

①opacity:是属性，整个元素包含子元素全部都会透明，取值范围0-1;

②background-color：rgba（0,0,0，.5）rgba是值，用于背景，取值范围0-1。

补充：a-alpha=透明度通道。

区别：opacity的子元素会继承父元素的透明度，而rgba则不会。

display和visblity的区别

③div的visblity可以控制div的显示和隐藏，但是隐藏后面的页面显示为空白，会占用空间。

④通过设置display可以释放掉div隐藏后占用的页面空间。

4、描述下z-index和叠加上下文是如何形成的？

下面这两个是层叠领域的黄金准则。当元素发生层叠的时候，其覆盖关系遵循下面2个准则：

①谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。

②后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

在CSS和HTML领域，只要元素发生了重叠，都离不开上面这两个黄金准则。

层叠上下文元素有如下特性：

· 层叠上下文的层叠水平要比普通元素高；

· 层叠上下文可以阻断元素的混合模式；

· 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。

· 每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素。

· 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

5、如果是在手机上查看投票页，没有hover效果时应该怎么办？

因为hover又称鼠标点击事件，手机可没有鼠标，所以没有hover效果很正常。我们再给它加一个特指手机的触摸事件——touchstart就行了。

另外还有其他几种触摸事件：

①touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

②touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

③touchend事件：当手指从屏幕上离开的时候触发。

④touchcancel事件：touchcancel，是在拖动中断时候触发。

（PS:主要的是前三个触摸事件）

任务名称：CSS—task8、9

成果链接：http://118.126.113.248/jnshu807/task8/task8_1/task8_1.html

任务耗时：2018.18-2018.5.28

技能脑图：

任务总结：

task8、9：一次pc端的网页练习，工程量比移动端的页面多多了，算是一次量的变化吧，码起来对更大的整体布局有一个清晰的思路了，栅格布局也更熟悉并应用，而且对响应式也开始运用了，媒体查询是好东西，可切勿乱用，合理的使用才是最好的。

深度思考：

1、如何实现轮播图？

我是用js组件来完成的轮播图。具体原理还看不太懂，暂时先把网上的实现方法贴过来，等学习js的时候在回过头来检查吧。

①

实现轮播图最主要的就是定时器（setInterval 函数和 clearInterval 函数），他们分别是定时和清除定时。

②

在html ，css 已经写好的情况下。最主要的就是js的功能问题了。轮播图的功能步骤如下：

（1）先让图片轮播起来。基本就是写一个 play函数里面加定时器，每次使图片的index对象加一，当index大于最大值时，设置index等于第一张图片.这样轮播图就动起来了。

（2）轮播图动起来基本就是只显示一张图片隐藏其他的图片。我上面使用的是opacity 。

（3）图片下面的按钮。主要就是使下面的按钮与上面的图片一一对应。然后点击下面的按钮显示对应的图片。

（4）左右的上一张和下一张按钮。点击左边的上一张按钮图片向前显示，实现原理就是使 index 对象减一。点击左边的下一张按钮图片向后显示，实现原理就是使 index 对象加一。

（5）对应上一张和下一张连续点击的问题就是给这两个按钮加上延时器。

（6）当鼠标放在轮播图区域时停止轮播，实现原理就是清除定时器，离开开始轮播就是加上定时器。

2、如何用css实现一个简单的幻灯片的效果页面？

CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transition是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果。

Animation字面上的意思，就是“动画”的意思，

我们使用CSS3的Animation制作动画，实现简单的幻灯片效果，可以省去复杂的js,jquery代码。Animation有一点不足之处，

我们运用Animation能创建自己想要的一些动画效果，但是有点粗糙，如果想要制作比较好的动画，大家还是使用flash或js等。

在CSS3中创建动画，您需要学习@keyframes规则。

Keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头，

后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，

有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的，

如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，

我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，

比如说移动，改变元素颜色，位置，大小，形状等，不过有一点需要注意的是，

我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，

也就是说这个"from"就相当于"0%"而"to"相当于"100%",值得一说的是，

其中"0%"不能像别的属性取值一样把百分比符号省略。

Internet Explorer 11、Firefox以及Opera支持@keyframes规则和animation属性。

3、主流浏览器内核有哪几种？

（1）首先是背景介绍，什么是浏览器内核？

浏览器最重要或者说最核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释并渲染网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

浏览器内核对于浏览器而言，是基础，是依托。如果没有了浏览器内核，那么浏览器是无法独立存在且产生作用的。它的存在，决定了网页的呈现的内容、格式以及效果。所以说，一个好的浏览器，一定是基于有一个稳定、高端、作用明显的浏览器内核的。

（2）四种主流内核

①Trident/IE内核：用户广、兼容性差，bug多

Trident内核的常见浏览器有：IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）、2345浏览器、腾讯TT、淘宝浏览器、阿云浏览器（早期版本）、瑞星安全浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器、海豚浏览器等等。

②Gecko/Firefox内核：开源、开发程度高、体验好

Gecko内核常见的浏览器： Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）等等。

③WebKit内核：苹果内核、用户广、开源

WebKit内核常见的浏览器：傲游浏览器3、[1] Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器等等。

④Presto内核：渲染速度最快、动态内核

Presto内核常见的浏览器：由于Presto是商业引擎，使用Presto的除开Opera以外，只剩下NDSBrowser、Wii Internet Channle、Nokia 770网络浏览器等，这很大程度上限制了Presto的发展。

4、什么是外边距重叠？重叠的结果是什么？

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

计算规则如下：

①两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。也就是说当第一个div的margin-bottom与第二个div的margin-top都为正数时，它们会自动合成一个单独的外边距，取它们中间比较大的，此时的margin值为20，只要第二div的margin-top小于20，margin值就为20。

②两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。也就是说当第一个div的margin-bottom与第二个div的margin-top都为负数时，它们会自动合成一个单独的外边距，取它们中间绝对值比较大的，此时的margin值为-20，只要第二div的margin-top绝对值小于20，margin值就为-20。

③两个外边距一正一负时，折叠结果是两者的相加的和。也就是说当第一个div的margin-bottom与第二个div的margin-top为一正数一负数时，它们会自动合成一个单独的外边距，取它们两者的相加的和，此时的margin值为30。

5、div+css的布局较table布局有什么优点？

TABLE布局是WEB早期CSS不存在的时候兴起的，是对TABLE标签的不正规使用，Table标签就是表格，是用来显示数据的，而不是用来布局网页的，虽然它有时候布局网页很简单。现在绝大多数的网站都是用DIV+CSS布局。这两种布局各有各的优点。

div+css布局的好处：

①符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。

②布局精准，网站版面布局修改简单。

③加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。

④节约站点所占的空间和站点的流量。

⑤用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。

table布局的好处（table布局也不是一点用的没有，这点是毋庸置疑的）

①容易上手。

②可以形成复杂的变化，简单快速。

③表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

6、bootstrap有哪些常用组件？

官网上列出来的挺齐全的，还有js的我就没贴出来了，有兴趣的可以移步bootstrap中文官网。

7、css有哪些方式可以实现垂直居中？

①这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-alignproperty 属性。

优点：

content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时， content 不会被截断

缺点：

Internet Explorer(甚至 IE8 beta)中无效，许多嵌套标签

②这个方法使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。

因为有固定高度，或许你想给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出。

优点：

适用于所有浏览器
不需要嵌套标签

缺点：

没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)

③这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。
content 清除浮动，并显示在中间。

优点：

适用于所有浏览器
没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现

缺点：

唯一我能想到的就是需要额外的空元素了

④这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto;会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。

优点：

简单

缺点：

IE(IE8 beta)中无效
无足够空间时，content 被截断，但是不会有滚动条出现

⑤这个方法只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。

优点：

适用于所有浏览器
无足够空间时不会被截断

缺点：

只对文本有效(块级元素无效)
多行时，断词比较糟糕

这个方法在小元素上非常有用，例如使按钮文本或者单行文本居中。

⑥flex弹性盒子，只需要将父元素设为display：flex。然后给它一个垂直居中align-items：center即可。

优点：

适应性好，块级元素文本元素都可

缺点：

代码多，需要给父元素设置flex
在嵌套多个盒子时需注意继承关系
兼容性不好，对E浏览器对其不友好

8、margin负值在页面布局中有哪些应用？

①对于自身的影响

当static(非浮动、非定位）元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向。但如果你设置margin-bottom/right为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。如果没有设定width属性，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样。

②对文档流的影响

元素如果用了margin-left/margin-top时，元素自身会被拉向左/向上进行偏移，效果类似与position：relative。与之不同的是，在其后面的元素会补位，也就是后面的行内元素会紧贴在此元素的之后。元素如果用了margin-right/margin-bottom时，元素视觉位置不变，但其后（下面/右边）的元素会被拉向此元素，相对此元素进行偏移并覆盖此元素。

响应式导航栏

③对浮动元素的影响

负margin会改变浮动元素的显示位置，即使元素写在DOM的后面，也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的，都是利用这个原理实现的。

④对绝对定位的影响

对于绝对定位元素，负margin会基于其绝对定位坐标再偏移

9、如何使用bootstrap栅格系统？

真的要讲的话内容太多了，简单的说吧：

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。

Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

10、媒体查询如何使用？

响应式设计可以随着所显示的屏幕大小而改变。实现响应式设计的核心就是媒体查询。使用@media媒体查询，可以针对不同的媒体类型定义不同的样式。

①设置meta标签:

<、 meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

width = device-width：宽度等于当前设备的宽度

initial-scale:初始的缩放比例(默认设置为1.0)

minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)

maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)

user-scalable:用户是否可以手动缩放(默认设置为no，因为我们不希望用户放大缩小页面)

②具体媒体查询指令：

一个基本的媒体查询，即一个媒体属性与默认指定的 all媒体类型

@media (min-width: 700px) { ... }

and 关键字用于合并多个媒体属性或合并媒体属性与媒体类型,只有当每个属性都为真时，结果才为真

@media and (max-width:600px) and (min-width: 800px;){......}

媒体查询中使用逗号分隔效果等同于 or 逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

not键字应用于整个媒体查询，在媒体查询为假时返回真,not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。

@media not all (max-width:700px){......}

任务名称：CSS—task10

成果链接：http://118.126.113.248/jnshu807/task10/task10.html

任务耗时：2018.5.29-2018.5.30

技能脑图：

任务总结：

task10，对之前任务的总结，没有特别的新知识点。运用到了css一些新的小变化样式，radio、select的默认覆盖样式，input表单的运用。

流程图运用css写，灰色底层橙色上层，两个加在一起就成了立体的流程图的横线棍子，在运用绝对定位将流程图的圆点和文字覆盖在横线上。

大的框架还是用的bootstrap写的，使用bootstrap框架能很好地控制对齐以及响应式，能少些很多代码，bootstrap实在棒棒哒~

至于为什么要改变默认radio和select的样式?

因为这两个东西在css里面是默认的，默认的东西一般机动性不强，所以要改变。select通过权重改变z轴的前后顺序来达到表面上的覆盖效果。

radio呢，把它写到label标签中，点击label域则会选中它，采取隐藏原本的默认样式，再自定义样式即可达成改变默认样式的效果。

做过任务八九后，这些都是小知识点，很简单，如果不懂的话，从网上复制一份代码跑一遍看看代码如何实现的，很快就能明白，没什么特别好说的。

任务名称：CSS—task11

成果链接：http://118.126.113.248/jnshu807/task11/task11.html

任务耗时：2018.5.31-2018.5.31

技能脑图：

任务总结：

官网任务要求使用less与sass两个选择一个学习然后重新对css任务4进行编辑。

我选择学习sass，没别的原因，觉得名字叫的顺口。

首先对sass要有一个基本的概念理解，sass可以理解为程序员的语言，css更像设计师的语言，sass具有非常强的逻辑性，css没有啥逻辑，只要能符合最最基本的css规范就能跑通。

然后是环境搭建，这一步很关键，我在这步弄了很久，先要下载ruby，因为sass语言是基于ruby语言写成的，然后在电脑控制台中命令安装好sass，然后再在编辑器中安装好sass，最后最好再下一个koala的sass编译器，这样环境搭建就好了。

然后就可以创建sass文件开始撸代码了，格式与css没大区别，注意保存文件结尾的后缀写sass，如果用sass中的scss那么保存后缀写scss。

写代码时要注意三个东西：

1、变量：符号$ 可以将某一个属性命名，以后这个属性统统使用这个命名就好，命名即代表这个属性。

2、嵌套：使代码更具有逻辑性，与html一样将元素属性通过一层又一层的{}包裹起来，要与html嵌套辑一致。

3、继承：符号：@extend 将某一css堆属性统一集中在一起打包成一个盒子，这个盒子取个名字，然后就可以批量复制使用了，适合同一类大型页面使用。

任务名称：CSS—task12

成果链接：http://118.126.113.248/jnshu807/task12/task12_1.html

任务耗时：2018.6.1-2018.6.1

技能脑图：

任务总结：

我是用sass对css任务5进行编辑的。

跟任务11差不多，代码稍微多一点。

然后就可以创建sass文件开始撸代码了，格式与css没大区别，注意保存文件结尾的后缀写sass，如果用sass中的scss那么保存后缀写scss。

任务名称：CSS—task13

成果链接：http://118.126.113.248/jnshu807/task13/task13_1.html

任务耗时：2018.6.2-2018.6.4

技能脑图：

任务总结：

1、class重新取名字，之前的名字大都用box1、box2、box3这类名字，没有语义化，重新命名大致原则分为头身脚三个部分。如果头部有多个内容便在后面加左中右或者上中下，如果中部还有3个部分，便再在中后面加上编号，如1、2、3、4。这样看起来一目了然，但看sass文件也能看明白页面的大致组成。

2、将多余的css样式去除，父级元素有的样式子元素还有便可以去除。

3、将三个页面分别先按html、body、header、main、footer五个大部分的通用部分分离开，放置一边，如果某个页面在main或者header中设置了单独样式比如颜色，那么将单独样式放置在他们的子元素中。html、body、header、main、footer这五个部分样式尽可能统一。三个页面的这五个大样式便可以合为一致了。

4、按header、main、footer这三个大部分将三个页面的单独组件放在一起。

5、单独模块分开，如页面一的汉堡导航栏。

6、将三个页面的所有图片放在一起合成一个模块。

7、提炼sass语言特性，精简代码。