1.flex布局

弹性布局，子元素的float、clear和vertical-align属性将失效，为盒装模型提供最大的灵活性。分水平的主轴和垂直的交叉轴

容器的六个属性：

<1>flex-direction:

主轴的方向，即项目的排列方向：row  row-reverse  column  column-reverse

<2>flex-wrap:

如果一条轴线排不下如何换行：nowrap  wrap wrap-reverse（换行，第一行在下面）

<3>flex-flow

是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

<4>justify-content

定义了项目在主轴上的对齐方式：

（1）flex-start（默认值）：左对齐

（2）flex-end：右对齐

（3）center： 居中

（4）space-between：两端对齐，项目之间的间隔都相等。

（5）space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

<5>align-items属性

定义项目在交叉轴上如何对齐:

（1）flex-start：交叉轴的起点对齐。

（2）flex-end：交叉轴的终点对齐。

（3）center：交叉轴的中点对齐。

（4）baseline: 项目的第一行文字的基线对齐。

（5）stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

<6>align-content属性

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex-start | flex-end | center | space-between | space-around | stretch

项目的属性：

（1）order属性：

定义项目的排列顺序，数值越小，排列越靠前，默认为0

（2）flex-grow属性：

项目的放大比例，默认为0

（3）flex-shrink属性：

项目缩小的比例，默认为1

（4）flex-basis属性：

定义了在分配多余空间之前，项目占据的主轴空间，默认值为auto

（5）flex属性

是flex-grow、flex-shrink、flex-basis的简写

（6）align-self属性

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，继承父元素的align-items属性，如果没有父元素，值为stretch

2.CSS3新增属性

属性选择器：[att^="value"] 属性的值以指定的值开始

                      [att$="value"] 属性的值以指定的值结束

                      [att*="value"]  属性的值包含指定的值

兄弟选择器（同级）~

RBGA:r g b a(透明度)  与Opacity的区别：前者只会应用到指定的元素上，后者会影响指定的元素及其子元素

多背景图片：background-image、background-repeat、background-size、background-position、background-origin、background-positon相对于什么位置来定位。background-clip：将背景图片裁剪到什么位置border-box、padding-box、content-box

字符串溢出：word-wrap:normal和break-word

块阴影与圆角阴影：box-shadow、text-shadow

-webkit-box-shadow:2px 2px 20px #06C

圆角：border-radius

-webkit-border-top-right-radius:20px;

边框图片：border-image

-webkit-border-image:url("images/b.jpg") 124;

形变：rotate实现旋转  scale实现伸缩  skew实现倾斜

都写在-webkit-transform后面

rotate(5deg) 角度   scale(1.00,1.50)矢量     skew(5deg,8deg)

3.将css引入到html文件中

行间样式（内联样式）

<style></style>内嵌样式表

<link/>外联样式表

@import 导入样式表

4.清除浮动方法

（1）在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。

（2）使用CSS的overflow属性：给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动

（3）给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

（4）结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

.clearfix:after{

 content: "\20";

 display: block;

 height: 0;

 clear: both;

 visibility: hidden; 

  }

.clearfix {

  /*触发hasLayout*/

 zoom: 1;

  }

5.属性继承

不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

 所有元素可继承：visibility和cursor。 

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。

 块状元素可继承：text-indent和text-align。 

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。 

表格元素可继承：border-collapse。 

6.BFC块级格式化上下文

(Block Fromatting Context)是按照块级盒子布局的，是一个独立的渲染区域，

布局规则：

（1）内部的Box会在垂直方向，一个接一个地放置。

（2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

（3）每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如 此。

（4）BFC的区域不会与float box重叠。

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

（6）计算BFC的高度时，浮动元素也参与计算

一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

（1）float的值不是none。

（2）position的值不是static或者relative。

（3）display的值是inline-block、table-cell、flex、table-caption或者inline-flex

（4）overflow的值不是visible

（5）根元素

BFC作用及原理

（1）自适应两栏布局

.main{

    float: left;

    width: 100px;

    height: 100px;

    background-color: pink;

}

.aside{

height: 150px;

background-color: blue;

overflow: hidden;//使aside区域为BFC

}

原理：BFC的区域不会与float box重叠。

（2）清除内部浮动

.par{

    border: 5px solid red;

    overflow: hidden;

}

.child{

    border:5px solid green;

    width: 100px;

    height: 100px;

    float: left;

}

原理：计算BFC的高度时，浮动元素也参与计算

（3）防止margin重叠

.t{

    width: 100px;

    height: 100px;

    margin:100px;

    background-color: pink;

}

.wrap{

    overflow: hidden;

}

原理：Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

7.css布局的属性有哪些

（1）显示类属性

display：none 隐藏元素，不占空间

               block块级元素

                inline-block 内联块级元素

                inline内联元素

                table块级表格

                table-cell表格单元格

               visibility:visible 可见

               hidden 不可见，但占据空间

（2）控制浮动类

float：left

          right

          none

clear：none

            both

           left

           right

（3）控制溢出类

    overflow：hidden

                     visible 

                     scroll

                    auto

8.说一下position的几个属性吧。

static：可以认为静态的，默认元素都是静态的定位，此时4个定位偏移属性不会被应用，也就是使用left、right、bottom、top将不会生效。

relative：相对定位，参照自己在常规流中的位置

absolute：绝对定位，参照的是离自己最近的定位祖先元素。

fixed：其偏移定位是以窗口为参考

sticky：粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

center：其偏移定位是以定位祖先元素的中心点为参考,盒子在其包含容器垂直水平居中。

page：与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。

9.css3了解多少，说到了渐进增强和优雅降级

渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。相当于向上兼容，该观点认为应该关注于内容本身。

优雅降级:一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。相当于向下兼容，该观点认为应该针对那些最高级、最完善的浏览器来设计网站。

10.实现水平竖直居中的几种方法（高度和宽度不确定）

（1）/*元素水平垂直居中absolute元素已知宽度*/

.box4{

    position: relative;

    width: 300px;

    height: 300px;

    background-color: pink;

}

.main1{

    position: absolute;

    width: 100px;

    height: 100px;

    background-color: red;

    top: 50%;

    left: 50%;

    margin:-50px 0 0 -50px;

}

（2）/*元素水平垂直居中absolute元素未知宽度*/

.box5{

    position: relative;

    width: 300px;

    height: 300px;

    background-color: pink;

}

.main2{

    position: absolute;

    width: 100px;

    height: 100px;

    background-color: red;

    top: 50%;

    left: 50%;

    transform:translate(-50%,-50%);

}

（3）/*元素水平垂直居中flex*/

.box6{

    width: 300px;

    height: 300px;

    background-color: pink;

    display: flex;

    justify-content: center;

    align-items: center;

}

.main3{

    background-color: red;

    width: 100px;

    height: 100px;

}

（4）/*元素水平垂直居中table-cell*/

.box7{

    width: 300px;

    height: 300px;

    background-color: black;

    display: table;

}

.main4{

    background-color: pink;

    display: table-cell;

    vertical-align: middle;

    text-align: center;

}

.inner{

    background-color: red;

    display: inline-block;

    width: 20%;

    height: 20%;

}

11.CSS3中的动画

animation中可以取哪些值 （所有动画属性的简写属性，除了animation-play-state属性）

animation-name规定@keyframes动画名称

animation-duration规定动画完成一个周期所花费的秒和毫秒

animation-timing-function规定动画的速度曲线，默认是“ease”

animation-delay规定动画何时开始，默认为0

animation-iteration-count规定动画播放次数默认是1

animation-direction规定动画是否在下一周期逆向播放，默认值是“normal”

animation-play-state规定动画是否正在运行或暂停，默认是“running”

要运用css3动画，需要运用@keyframes规则和animation属性

12.CSS中的单位有哪些分别说一说 （提到了ex）

px绝对单位 精确像素，相对于屏幕分辨率

em相对单位  基准点为父节点字体的大小，如果自身定义了font-size按自身来计算

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%

vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

vmin：vw和vh中较小的那个

vmax：vw和vh中较大的那个。

%:百分比

in:寸

cm:厘米

mm:毫米

pt:point，大约1/72寸

pc:pica，大约6pt，1/6寸

ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算

ch:以节点所使用字体中数字“0”字符宽度为基准，找不到时为0.5em

13.响应式布局

flex弹性布局：

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

width=device-width视口为设备宽度（就是人设置的一个宽度）//不设置的话默认为980px

initial-scale=1.0 初始化视口大小是1.0倍

maximum-scale=1.0最大的倍数是1.0倍

user-scalable=0 不允许缩放视口

img {

max-width: 100%;

}

让图片随容器宽度自动缩放

手机端兼容的前缀：

-ms-    内核是trident

 -moz-   内核是 gecko

 -o-     前内核是 Presto   现在是blink

-webkit-    内核是webkit

如果用百分比写 width，那么指的是父元素 width 的百分之多少。

如果用百分比写 height，那么指的是父元素 height 的百分之多少。

如果用百分比写 padding，那么指的是父元素 width 的百分之多少，无论是水平的 padding 还是竖直的 padding。

如果用百分比写 margin，那么指的是父元素 width 的百分之多少，无论是水平的 margin 还是竖直的 margin。

不能用百分比写 border 的宽度

14.几种常见的布局

两列自适应

BFC

flex布局：

.parent{

    display: flex;

}

.left{

    background-color: pink;

    height: 100px;

    width: 50px;

}

.right{

    flex:1;

    background-color: black;

}

三栏布局（中间自适应宽度，两边固定宽度）

圣杯布局

<divid="container">

<divid="center"class="column"></div>

<divid="left"class="column"></div>

<divid="right"class="column"></div>

</div>

body{min-width:550px;}

#container{padding-left:200px;padding-right:150px;}

#container .column{float:left;}

#center{width:100%;}

#left{width:200px;margin-left:-100%;position:relative;right:-200px;}

#right{width:150px;margin-right:-150px;}

先写中间列部分，实现中间列优先加载

双飞翼布局

<divid="container"class="column">

<divid="center"></div>

</div>

<divid="left"class="column"></div>

<divid="right"class="column"></div>

body{min-width:500px;}

#container{width:100%;}.

column{float:left;}

#center{margin-left:200px;margin-right:150px;}

#left{width:200px;margin-left:-100%;}

#right{width:150px;margin-left:-150px;}

7.说一说移动端的布局flexible。知道原理吗，怎么自己去实现一个flexible。 rem布局的实现原理。移动端的点透是什么，有没有了解

8.有没有遇到过这样的问题： 一个有border的div，里面有一个图片，发现图片和下面的border有一定的空隙（baseline）。

9.移动端如何真机调试·                                

16.页面中一个video，可能格式不支持，那么前端如何判断并给出提示？

通过比较img的onerror是一种方法， 通过服务器端也可以保存一些属性来标识哪些浏览器支持，哪些不支持

前端的表单中如何设置表单的方式，如multipart, www等，对于multipart具体是如何区分其中的不同的格式的

17.css3动画相关

18. css 三列布局

CSS选择符

通配符选择符 *

类选择符 .

包含选择符   p strong

子选择符 body>strong

相邻选择符 p+strong

属性选择符

ID选择器 #

伪类与伪对象  

选择符:伪类  a:link  a:visited a:hover a:active

伪对象：p:before  p:after

css权重：

！important

html中的css样式属性  在html中的样式

作者编辑的css文件样式属性  css文件

用户设置的样式  浏览器网页的用户设置的样式

浏览器默认的样式

同一级：

style属性1000 

ID选择符100

类、属性选择符 10

标签选择符、伪类及伪对象 1

css引入页面方式

标签元素添加属性style中：行间样式

将样式写在<style>标签之内，通常称为内嵌样式表

通过link方式，外联样式表

通过@important关键字导入外部css样式文件，通常称为导入样式表

6.轮播图，如果还要优化，你会怎么去优化。

3. 深入理解css盒模型

（1）基本概念：盒模型的组成由里到外content-padding-border-margin

（2）盒模型有两种标准：标准模型、IE模型（怪异盒模型）

标准模型下盒模型的宽高只是内容的宽高，IE模型中盒模型的宽高是内容+填充+边框的总宽高

（3）Css如何设置两种模型：

标准模型

box-sizing:content-box;

IE模型

box-sizing:border-box;

（4）JS获取宽高

dom.style.width/height

这种方式只能取到dom元素内联样式所设置的宽高，取不到内部样式和外联样式所设置的dom的宽高。

dom.currentStyle.width/height

这种方式可以获取内联样式、内部样式和外联样式所设置的dom的宽高，但这种方式只有IE浏览器支持。

window.getComputedStyle(dom).width/height

这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。

dom.getBoundingClientRect().width/height

这种方式是根据元素在视窗中的绝对位置来获取宽高的

*dom.offsetWidth/offsetHeight

最常用的方式，兼容最好

4.每个html文件里开头都有个很重要的东西，Doctype，声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范（重点：告诉浏览器按照何种规范解析页面）

5.P91页

7.三列布局

8.实现梯形

var c=document.getElementById("myCanvas5");

var context=c.getContext("2d");

context.fillStyle="red";

context.beginPath();

context.moveTo(0,0);

context.lineTo(200,0);

context.lineTo(150,100);

context.lineTo(50,100);

context.fill();

伪类与伪元素的区别

伪类，更多的定义的是状态。常见的伪类有 :hover，:active，:focus，:visited，:link，:not，:first-child，:last-child等等。

.a链接伪类

a:link//未访问链接

a:visited//已访问链接

a:hover//鼠标移动到链接上

a:active//选定的链接

表单的校验中，常会用到 :required、:valid 和 :invalid 这三个伪类

:required，指定具有 required属性 的表单元素

:valid，指定一个 匹配指定要求 的表单元素

:invalid，指定一个 不匹配指定要求 的表单元素

:nth-of-type(n) 除了关注n之外，还需要关注最前面的类型，也就是标签。

:nth-child(n) 它关注的是：其父元素下的第n个孩子，与类型无关。

伪元素，不存在于DOM树中的虚拟元素，它们可以像正常的html元素一样定义css，但无法使用JavaScript获取。常见伪元素有 

::after 已选中元素的最后一个子元素

::before 已选中元素的第一个子元素

::first-letter 选中某个款级元素的第一行的第一个字母

::first-line 匹配某个块级元素的第一行

::selection 匹配用户划词时的高亮部分

CSS3明确规定了，伪类用一个冒号(:)来表示，而伪元素则用两个冒号(::)来表示。

可以布局的方式

position、float、overflow、visibility

非严格模式

盒模型的宽高

可以设置行内元素的高宽

可设置百分比的高度

使用margin：0 auto设置水平居中在IE会失效，可以使用text-align:center;

设置图片的padding会失效

table字体的属性不能继承上层的设置

white-space:pre会失效

块级元素、行内元素、行内块级元素区别

块级元素：

总是另起一行（特立独行）

可以设置其宽度、高度，内外边距

在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度）

可以容纳行内元素和其他块元素

行内元素：

总是和相邻的行内元素在同一行上

设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。

默认宽度是他自身内容的宽度。

行内元素只能容纳其他行内元素或者文本。

行内块级元素

和相邻行内元素在同一行，但是之间会有空白缝隙。

默认宽度是他本身内容的宽度。

宽度、高度、行高、外边距以及内边距都可以手动设置。