前端面试经验（三）

1.img与background-image的区别

1）解析机制：img作为html标签解析，在html加载时加载，加载失败会显示撕裂的小图标；background-image作为属性在html加载完毕后再加载，加载失败不作显示。

2）本质区别：img占位，可以作为document对象操作；background-image不可以被操作。img属于内容型，background-image属于样式型。

3）长宽设置：img设置width或者height其中之一时会自适应，同时设置容易变形，background-image必须指定height，不然加载不出来，如果不指定width则会继承父元素的width，通常与-size、-repeat、-position配合使用。

4）SEO：img利于搜索引擎搜索，img标签有一个alt属性可以指定图像的替代文本，有利于SEO，并且在图片加载失败时有利 于阅读。

img标签：alt图像的代替文本；src图像的url。

5）语义准确性：img有明确的语义化要求

2.rgba()和opacity的区别

1）opacity作用于元素及元素中所有的内容（包括文字、图片） ，有继承性

2）rgba()只用于元素的颜色及背景色

3）当opacity属性的值应用于某个元素上时，把这个元素和它内容当作一个整体来看待，即使这个值没有被子元素继承。因此一个元素和它包含的元素都会有与元素背景相同的透明度，哪怕父子元素由不同的opacity的值。

ie低版本不支持opacity，需要写filter，因此为兼容，通常在需要使用opacity时书写如下：

.opacity4 ｛
    opacity: 0.4;
    filter:alpha(opaity=40);
}

3.outline和border的区别

1）outline轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可以起到突出元素的作用

2）outline的效果将随元素的focus而自动出现，相应的由blur自动消失，这些都是浏览器的默认行 为，不需要js配合css来控制

3）outline不占据空间，不会像border那样影响元素的尺寸或者位置。

border的使用：按顺序设置如下属性或者inherit（继承父元素的border属性）

• border-width
• border-style 

  border-style:dotted solid double dashed; （上，右，下，左）

• border-color

outline的使用：按顺序设置如下属性或者inherit（继承父元素的outline属性）

• outline-color
• outline-style
• outline-width

4.css动画

animation与transition：

创建动画序列，需要animation属性或其子属性，属性允许配置动画时间、时长和动画细节。 动画的实际表现由@keyframes规则实现。可以设置多个帧。

keyframes规则:

@keyframes animationname {keyframes-selector {css-styles;}}

keyframes-selector

必需。动画时长的百分比。 合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）

transtion也可以实现动画，但强调过渡，是元素的一个或多个属性变化时产生的过渡效果，同一个元素 通过两个不同的途径获取样式，而第二个途径当某种改变发生时（如：hover)才能获取样式，这样就会 产生过渡动画。在更改css属性时控制动画时间，使用transition时对于基于webkit的浏览器需要厂商前缀。只设置两个状态。

transition: <property> <duration> <timing-function> <delay>;

-webkit-transition: <property> <duration> <timing-function> <delay>;

animation和transition大部分属性相同，都是随时间改变元素的属性值，区别是transition需要触发一 个事件才能改变属性；animation不需要触发任何事件随时间改变属性。transition为2帧，从from…… to ，animation可以一帧一帧的。

5.css布局

水平居中布局：

1.块级元素撑满整行，当宽度设置后使用margin:auto即可。

2.text-align:center设置文本对齐方式，对于行内元素，父元素设置text-align:center，子元素display:inline-block。

3.flex布局，使用justify-content: center

4.position:absolute绝对定位，将left:50%

垂直居中布局：

1.上下内边距相等法：padding实现垂直居中【若指定了元素的绝对尺寸，padding不要不用百分比了】

2.父元素高度确定的单行文本使用line-height法

属性line-height设置行高，将行高设置与父元素的高度相等，行高大于字体大小，文字的上下部分会留有相同的空间。

当需要垂直居中图片时，也可以使用line-height。

3.css表格法

vertical-align：middle; 只对行内元素或者是单元格起作用，对块级元素不起作用。

css表格法即将父元素声明为display:table 子元素声明为:display:table-cell。支持内容的动态改变，但是不支持旧版浏览器。

4.绝对定位和负边距法：子元素绝对定位，top left定义为50%后根据子元素的长宽定义margin的大小。（上 右 下 左）

top属性定义了一个定位元素的上外边距(margin)边界与其包含块上边界之间的偏移。

5.绝对定位拉伸法：子元素绝对定位，使用margin:auto 并定义长宽

【4 5 可能出现内容超出容器的情况】

6.flex

display:flex; align-items:center;

7.利用一个空的浮动元素来控制主要内容的位置，这个浮动元素width:100% height:50%，margin-bottom:-(h/2)px h为主要内容的高度，注意设置clear:both来消除浮动、

垂直+水平居中布局：

居中元素的宽高已知：

1.绝对定位top left与margin设置

2.绝对定位与margin:auto;

3.绝对定位top left 用calc计算 

居中元素的宽高未知：

1.flex: align-items:center;  justify-content:center;

2.transform的translate方式

transform属性用来对元素进行旋转、缩放、倾斜、移动。translate(x,y)定义2D转换，translate3d(x,y,z)定义3D转换。

两栏布局，要求左边固定：

1.float+右边margin-left设置

2.绝对定位，左边absolute或者;fixed,设置宽度，右边margin-left设置。

3.table,父元素display:table，子元素display:table-cell，左边的设置宽度，则右边自适应。

4.flex，父元素display:flex，左边子元素设置宽度，右边设置flex:1来获得剩余宽度，不用获取。

三栏布局:

1.三个元素，左右两边浮动元素float:left right，中间根据两边宽度设置margin

2.父元素相对定位，子元素绝对定位，两边设置left:0 right:0，中间根据宽度设置margin

3.左右float，中间构建BFC,overflow:hidden

4.table,按顺序写，设置宽度，将自适应。

5.圣杯布局 (31条消息) css经典布局——圣杯布局_越努力，越幸运！-CSDN博客_圣杯布局

6.双飞翼布局 (31条消息) css经典布局——双飞翼布局_越努力，越幸运！-CSDN博客_双飞翼布局

！！！注意圣杯和双飞翼的区别！！！在对被遮住的center部分的处理，是设置为relative，调整左右的left right，修改container的padding，还是在center部分添加一个div容纳内容。

flex布局：依赖属性display、position,在设置为flex布局之后，子元素的float、clear和vertical-align的属性将会失效。

容器属性（为父元素设置的）：flex-direction 决定主轴方向，默认值为row;flex-wrap;flex-flow;

point:

justify-content:横轴方向上弹性盒子在主轴上的排列

align-items:弹性盒子中的元素在纵轴上的排列方式

align-content:弹性盒子在侧轴上的对齐方式

元素属性（为子元素设置的）：order元素顺序，align-self为单个元素覆盖align-items。

水平竖直居中布局的实现：

父元素{ display:flex; justify-content:center; align-items:center; }

6.多端适应

静态布局：绝对宽高，垂直水平居中，设计一个layout在页面宽高调整时出现滚动条，设置min-width等。

流式布局：高度和文字使用px为单位，宽度使用百分比，在屏幕分辨率发生变化时，元素大小变化而布局不发生改变。当屏幕宽度过大的时候，元素宽度会被拉的很长，但文字大小仍未发生变化，不协调。在相对其原始设计而言过大和过小的屏幕上都不能正常显示。

自适应布局：针对不同分辨率范围设计的多个静态布局，但在每个静态布局中元素不随窗口大小变化而发生变化。使用@media媒体查询给不同介质和尺寸的设备切换不同的样式，保证在优秀的相应范围设计下能够给适配范围的设备最好的体验。

响应式布局：自适应布局与流式布局、弹性布局结合，每个分辨率下都会有一个样式，位置和大小都会变化。使用@media媒体查询和网格系统，配合相对布局单位。

注意弹性布局！（flex?）