面试题汇总
day01
1、严格模式和混杂模式-如何区分这两种模式 区分他们有何意义？
定义：DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。支持html5标准的主流浏览器都认识这个声明。
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
2、你常用的浏览器有哪些?
1: Chrome 内核 Webkit —> Blink
2: Firefox 火狐 内核 Gecko 开源
3: IE Trident
4: Safari webkit
5: Opera 欧朋 Presto
2:常见的行内元素和块级元素有哪些?
行内: a span i strong b
块级元素: div p ul ol li dl h1~h6
行内块：img input
**3:**谈谈你对语义化的理解?
语义化是指用合理的html标记以及其特有的属性去格式化文档内容。如，标题用h1~h6、段落用p标签，合理的给图片添加alt属性。
1、去掉或者丢失样式(CSS)的时候能够让页面呈现出清晰的结构；
2、有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息（爬虫依赖于标签来确定上下文和各个关键字的权重）；
3、语义化更具可读性，便于团队开发和维护，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
4、有利于用户体验；
5、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4:em和i ,strong和b的区别?
<i>标签：
显示斜体文本效果
<i>标签告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示；
<em>标签：
<em>标签中的文本表示为强调的内容，对于所有浏览器的显示效果来说，是把这段文字用斜体来显示；
当引入新的术语或在引用特定类型的术语或概念时作为固定样式的时候，也可以考虑使用 <em> 标签。
day02
如何合并表格单元格？
1、跨行合并
1、使用rowspan =" 合并的行数" 从上到下合并 放在最初始的那一行身上
2、删除被合并的那几行 删除的行数= 合并的行数-1
跨列合并 column 列
1、使用colspan =“合并的列数” 从左到右合并 属性写到最左边的那一列身上
2、删除的列数= 合并的列数-1
默认属性设置宽高合并过后会丢失样式 ,要新添加样式
thead 用于组合html表格的头部
tbody 表格身体部分
tfoot 表格的页脚
常见表单元素
action、method、get、post、checked、selected、value、readonly、disabled、maxlength、size
锚点的作用是什么？如何创建锚点？
锚点是文档中某行的一个记号，类似于书签，用于链接到文档中的某个位置。当定义锚点后，我们可以创建直接跳至该锚点（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
在使用a元素创建锚点时，需要使用name属性为其命名，代码如下所示：
1、先创建一个锚点
<a name="anchorname1">锚点1</a>
2、然后就可以创建链接，直接跳转至该锚点，代码如下所示：
<a href="#anchorname1">回到锚点一</a>
超链接有哪些常见的表现形式？
a元素用于创建超链接，常见的表现形式有：
普通超链接。语法：
<a href="" target="">文本</a>
下载链接，即目标文档为下载资源。语法：
<a href="day.zip">下载</a>
电子邮件链接，用于链接到Email。语法：
<a href="mail:123456@qq.com">
空链接，用于返回页面顶部。语法：
<a href="#">...</a>
GET和POST两种基本请求方法的区别
（1）GET比POST更不安全，因为参数直接暴露在地址栏上，所以不能用来传递敏感信息。
（2）GET请求在地址栏中传送的参数是有长度限制的，而POST没有。
引入CSS的方式？
行内样式、文本内部样式、文本外部链接
单行文本实现水平垂直居中？
设置行高
哪些CSS属性是可以继承的属性？
答：主要的有：
字体相关：line-height, font-family, font-size, font-style, font-variant, font-weight, font
文本相关： letter-spacing, text-align, text-indent, text-transform, word-spacing
列表相关：list-style-image, list-style-position, list-style-type, list-style
还有一个比较重要的：color
选择器优先级如何计算？
行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性
同一级别中后写的会覆盖先写的样式。
问题二：当不同类别的多个选择器混合使用个怎么计算优先级？
有一个简单的算法，设
a.内联样式表的权值为1000
b.ID选择器的权值为100
c.class类选择器的权值为10
d.HTML标签选择器的权值为1
简述css盒模型？
CSS盒子模型也叫做框模型，具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。在CSS中，每一个元素都被视为一个框，而每个框都有三个属性：
border：元素的边框（可能不可见），用于将框的边缘与其他框分开；
margin：外边距，表示框的边缘与相邻框之间的距离，也称为页边空白；
padding：内边距，表示框内容和边框之间的空间。
width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
因此，如果在一个具有边框的元素中放置文本，往往需要设置一些内边距，以便文本的边缘不要接触边框，这样更便于阅读。而外边距则可以在多个元素框之间创建空白，避免这些框都挤在一起。因此，在设计页面时，经常会使用padding属性和margin属性来设置页面的布局。但是，必须注意的是，一旦用了padding属性或者margin属性设置了元素的边距以后，会增加元素在页面布局中所占的面积。
如何使用border实现小三角？
.box {
position: relative;
width: 400px;
height: 400px;
border:2px solid deeppink;
margin: 20px auto;
}
.tran::after ,.tran::before {
content: '';
position: absolute;
left: 50%;
width: 0px;
height: 0px;
border-width: 50px;
border-style:solid;
border-color:transparent transparent red transparent;
}
.tran::after {
top:2px;
border-color: transparent transparent #fff transparent;
}
margin外边距常见问题及解决方法?
父子元素margin合并问题
在父元素里面有子元素时，若父元素在没有设置overflow:hidden或者是border属性，则父元素的margin-top的值为父元素和子元素中的margin-top的最大值。
父子元素margin合并问题解决办法
方法一：设置父元素的overflow属性为hidden。
方法二：设置父元素的border属性，如：border:1px solid red;
兄弟元素margin合并问题
当元素是兄弟元素时，在不设置float和position:absolute时，margin-bottom和margin-top会合并为两者中的最大值。
兄弟元素margin合并问题解决方法
使兄弟元素不在同一个BFC区域下，具体做法如：将兄弟元素分别触发BFC或将兄弟元素包在不同的div下，这些不同的div再分别触发BFC。
解决方法：
（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合 （可以设置成透明：border：1px solid transparent）。
（2）为父盒子添加overflow：hidden；
（3）为父盒子设定padding值；
（4）为父盒子添加position：fixed；
（5）为父盒子添加 display：table；
行内元素和块级元素的区别及它们的特点是什么？
块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化. 另外
-
块级元素可以设置width,height属性.
-
行内元素设置width,height属性无效，它的宽度高度主要根据内容决定.
-
块级元素即使设置了宽度,仍然是独占一行.
-
块级元素可以设置margin和padding属性.
-
行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果.
-
块级元素对应于display:block.
-
行内元素对应于display:inline
Html中常见行级标签：span、a、em、strong、b …
特点：在一行内显示（在一行中可以并列多个行内标签），不能设置宽高属性，水平方向的padding和margin可以设置，垂直方向的无效。
Html中常见块级标签：div、p、ul、li、dl、td、dd、h1~h6 …
特点：独占一行，能设置width，height，margin和padding等属性
文字默认以基线对齐解决办法:
1:调整文本垂直对齐方式的属性verticle-align:top顶对齐 / middle中线对齐/baseline基线对齐/bottom底线对齐
2: 给两个盒子加了一个触发BFC规则的属性 :overflow:hidden
结论:对块级元素而言,用display:inline-block实现并排不是最好的做法?因为: display:inline-block会使元素转换为行内块 具有文本属性基线对齐—> 对不齐(图片在上,文字在下) 而且,盒子中间会有空隙
图片下间隙问题
答: 这个间隙是图片下间隙 产生的原因是图片具有文本特性,默认以基线对齐,这个下间隙实际就是基线与底线之间的距离,一般默认是3px,但是可以发生变化,随着字体大小发生变化 解决方法:1:修改图片的对齐方式 不为基线对齐 (top/middle/bottom)2:给图片添加display:block 属性 让图片丢失文本特性
浮动产生的问题？ 怎么清除浮动的影响？
浮动元素引起的问题：
浮动元素脱离文档流之后在文档流中不占位，父元素的高度无法被撑开，影响与父元素同级的元素
清楚浮动的方法：
（1）给父级元素加高度（不推荐使用，它只适合高度固定的布局，一般父盒子都是为由内容撑起来）
（2）在结尾处添加空div标签clear:both。具体做法：添加一个div标签并定义一个cl的类名，给cl类名添加样式clear:both，将该div标签放到父元素内容结束前的位置（缺点：会多加CSS和HTML标签）。
（3）给父级元素定义 overflow:hidden（推荐使用，缺点：不能和position配合使用，因为超出的尺寸的会被隐藏）
（4）给父级div定义伪类：after和zoom（推荐使用）
/清除浮动代码/ .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1}
然后父级元素添加clearfloat类名即可
脱离标准流 ,成为浮动流—> 不占界面位置—> 导致其他盒子向上移动---->父盒子的高度塌陷: 父盒子高度本来是由子元素撑开的,父亲的高度计算是从内容的高度得来的, 现在由于浮动元素不占位置,所以子元素高度无法计算,父盒子的高度就塌陷了
浮动会导致父元素高度坍塌
浮动会脱离文档流，这个问题对整个页面布局有很大的影响。
清除浮动的影响现象:
1: 给父盒子定高 heigh 缺点: 不实际 实际中就是有时侯高度就是auto
2: 给父元素加overflow:hidden属性触发BFC规则 (私人区域)处于BFC规则的盒子 其外的元素不会影响到它,它内部的元素也不会影响其外的盒子BFC规则说:只要是BFC盒子内部子元素浮动了,则父盒子会计算浮动子元素的高度缺点: 会隐藏掉故意溢出的元素
3:css属性中 空标签法清除浮动影响空标签法 清除浮动影响 放置在所有浮动子元素之后
clear:left/right/both clear:both属性必须依靠结构存在 ----> 必须写在body<div style="clear:both"></div> 块级元素 可以清除<span style="clear:both"></span> 行内元素 试了 不可以
空标签法 清除浮动影响 放置在所有浮动子元素之后清除浮动影响的元素必须是块元素缺点: 增加了无用(没有用户展示数据)空标签 导致文档树变大 ,结构冗杂
4:双伪元素法清除浮动影响上面方法增加了空的结构标签 —-> 用css去创造这个空的结构标签
伪元素的写法: E 代表元素1:
E::after {
//作用是插入一个节点(块级元素,行内元素,行内块元素)到E元素所有内容之后
content:' 文本内容';
//设置伪元素的文本内容
}
2: E::before {
//作用是插入一个节点(块级元素,行内元素,行内块元素)到E元素所有内容之前
content:'文本内容';
}
伪元素默认的显示模式是行内模式最终方案:放到拥有浮动子元素的父元素身上即可
.clearFix::after,.clearFix::before {
content:'.';
line-height:0;
font-size:0;
height:0;
display:block ;
// 原因: 只有块级元素才能清除浮动响
clear:both ;
}
如何让盒子水平垂直居中？
方案1、绝对定位+margin 负间距
1.必需知道该div的宽度和高度，
2.然后设置位置为绝对位置，
3.距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指盒子左上角顶点距离页面左、上边界的50%，
4.最后将该div分别左移和上移，使整个盒子居中，左移和上移的大小就是该DIV(包括border和padding)宽度和高度的一半。
方案2、margin:auto实现绝对定位元素的居中（该方法兼容ie8以上浏览器）
此方案代码关键点：
1、上下左右均0位置定位；
2、margin: auto;
方法2：不用知道该盒子的宽高属性 绝对定位+平移属性
position:absolute;
left:50%;
top:50%;
/* 向上走自身的一半 */
transform: translate(-50%,-50%); 使用absolute与transform配合实现
3、使用flex实现
主要实现代码：
display: flex;设置 display 属性的值为 flex 将其定义为弹性容器
align-items: center;定义项目在交叉轴（纵轴）上如何对齐，垂直对齐居中
justify-content: center; 定义了项目在主轴上的对齐方式，水平对齐居中
4、使用display:table来实现
主要实现代码：
display: table使块状元素成为一个块级表格;
display: table-cell;子元素设置成表格单元格;
vertical-align: middle;使表格内容居中显示，即可实现垂直居中的效果;
简述BFC规则，以及解决哪些问题？
BFC 全称为 块格式化上下文 (Block Formatting Context) 。BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
内部的标签会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠
每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。
BFC的区域不会与float的标签区域重叠
计算BFC的高度时，浮动子标签也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然
BFC解决的问题
解决外边距折叠
特性的第②条：垂直方向上的距离由margin决定。在常规文档流中，两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，而是以较大的为准。特性的第⑥条：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签，同样外面的标签不会影响到BFC内的标签。所以可以让其中的一个标签处于一个BFC中
自适应两栏或三栏布局
左边固定宽度，右边不设宽，因此右边的宽度自适应，随浏览器窗口大小的变化而变化。
左右两边固定宽度，中间不设宽，因此中间的宽度自适应，随浏览器的大小变化而变化。
浮动的标签会覆盖正常标签根据第④条规则，BFC的区域不会与float的标签区域重叠，
所以我们只需要创建一个BFC，它就会自动缩小，以不被浮动的标签遮盖，就能够实现右侧栏自适应。
防止字体环绕
浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子给文字盒子添加overflow:hidden;。
清除浮动
利用overflow:hidden清除浮动，因为浮动的盒子无法撑出处于标准文档流的父盒子的height。根据特性第⑤条。计算BFC的高度时，浮动子标签也参与计算。
图片间隙问题如何解决？
1:display:block;
2:不让它以基线对齐 ----》底线 顶线 中线 随意一个就可以解决 vertical-align:top/middle/bottom
3:文字行高为0 文字大小也为0 —》装图片的盒子设置 font-size:0 line-height:0
说一说常见的浏览器兼容问题？
ie8中图片边框问题
Ie8 中图片放在a标签中显示边框。
解决方案:
img{
border:none;
}
ie8中背景复合属性写法问题
如下代码，在标准浏览器中均能正常显示背景图片，但是在ie8中图片显示异常。
.bg{
background:url(“./images/bg.jpg”)no-repeat center;
}
解决方案:在url和no-repeat之间加上空格
.bg{
background:url(“./images/bg.jpg”) no-repeat center;
}
其他ie低版本兼容性问题了解
1.在 IE6 及更早浏览器中定义小高度的容器？
解决方案：
#test{
overflow:hidden;
height:1px;
font-size:0;
line-height:0;
}
2.IE6 及更早浏览器浮动时产生双倍边距的 BUG ？
解决方案：针对 ie6 设置该标签的 display 属性为 inline 即可
#test{
float:left;
_display:inline;
}
3.IE7 及更早浏览器下子标签相对定位时父标签 overflow 属性的 auto|hidden 失效的问题
解决方案：给父标签也设置相对定位 position:relative;
块转内联块 ie7- 不在一行显示问题
解决方案：
div {
display:inline-block;
*display:inline;
*zoom:1;
}
IE7 及更早浏览器下当 li 中出现 2 个或以上的浮动时，li之间产生的空白间隙
解决方案：将垂直对齐方式设置为除了 top 值，还可以设置其它值如 middle | bottom 等
li{
vertical-align:top;
}
1:ie8下图片边框问题
img {
border:0; //去掉ie8下图片边框
display:block;
or vertical-align:middle; 取消下间隙
}
3:文本框和提交按钮对不齐现象
1: 不用普通按钮 用a元素模拟按钮 js提交
2:给按钮外边套一个div
4:ie6下小高度问题
解决办法：
div {
line-height:0;
font-size:0;
}
自适应: 盒子宽度随着屏幕宽度发生变化 百分比
1:两列自适应布局
要求:右侧盒子100%放置 再固定左侧盒子宽度, 左侧盒子加左浮动属性 ===>浮动元素会覆盖标准盒子
2: 三列自适应布局
左右两侧固定宽度,中间盒子自适应
技术点: 负外边距 margin-left:-px + 相对定位 (left-,right-)+ 浮动并排
等高布局，双飞翼布局，以及圣杯布局的实现原理？
圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。
等高布局：给每一列添加相应的容器，并进行相互嵌套，并在每个容器中设置背景色，通过相对定位移动盒子到相应位置。
[外链图片转存失败(img-uakUjNK5-1567858399327)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1564645551001.png)]
用纯CSS实现小箭头的思路？
简述精灵图的原理及优缺点？
英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就
是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，
“background- repeat”，“background-position”的组合进行背景定位，background-position 用数字能精确的定位出背景图片的位置。适用于一般小图标，不适合大背景大布局背景
优点：
（1）减少网页的 http 请求，从而大大的提高页面的性能
（2）图片命名上的困扰
（3）更换风格方便
缺点：
（1）必须要限定容器大小符合背景图元素位置，需要计算
简述网页中常见图片的格式及特点？
在项目中你是怎么做图片优化的呢？
（1）、降低图片的大小
我们的目的是降低图片的大小kb，有很多方法可以做，压缩图片，选择更小kb的图片格式，以达到最优的显示效果,找在线压缩图的网站如TinyPNG:一个压缩PNG的神站
（2）、选择适当的图片宽度尺寸（即响应式图片）
（3）减少HTTP的网络资源请求 考虑CSSSprites(背景精灵图/雪碧图)
怎么使用精灵图？
利用CSS的background-image，background- repeat，background-position的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置
（4）css和css3`制作简单的图标和动画（代替gif图片）
随着技术的发展，css3可以实现的效果越来越多，比如箭头图标，三角形，梯形等图标，或者一些阴影效果，渐变的效果，所以可以用css制作一些简单的图标，而且具有多变性
（5）SVG技术替换图片
SVG 是使用 XML 来描述二维图形和绘图程序的语言,支持透明，缩放，动画
什么是SVG？(摘自w3cschool)
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
（6）字体图库代替图标
随着技术的更新和浏览器的更新，字体图库去代替一些图标我认为还是极好的，使用字体图库你不仅可以改变大小，而且还可以改变颜色
（7）图片延迟加载（懒惰加载）（js/lazyload.js）
有个页面会很大很长很多的图片素材，这样全部加载就会变的很慢，因此需要修改一下加载方案，只加载窗口内的图片，我们大家浏览网站的时候会经常看到会有默认图，图片加载成功之后会替换默认图
为什么要初始CSS样式？
-
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
-
初始化CSS样式主要是提高编码质量，如果不初始化整个页面做完很糟糕，重复的CSS样式很多。去掉标签的默认样式如：margin,padding，其他浏览器默认解析字体大小，字体设置。
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
display:none和visibility:hidden的区别？
**visibility:**隐藏对应的元素但不挤占该元素原来的空间。
**display:**隐藏对应的元素并且挤占该元素原来的空间。
让元素在页面消失的方法？
1.display:none;（将整个元素隐藏，并且不会占据任何的空间）
2.visibility:hidden;（元素的内容不可见，但是元素仍然保持原来的位置和大小）
3.设定它的位置,让其消失不见：
position:absolute或fixed，用z-index遮盖。
4.overflow:hidden将要隐藏的元素移除父元素的范围。
5.设置元素为透明：即opacity:0；
6.将元素的font-size，line-height,width,height设置为0；（虽然这些方法很赖皮。）
7.设置元素的transform的translateX（Y）的值为-100%；
标签应该如何合理嵌套？
-
块级元素与块级元素平级、内嵌元素与内嵌元素平级
<div><span></span><p></p></div> //span是行内元素，p是块级元素，所以这个是错误的嵌套 <div><span></span><a></a></div> //对的 -
块元素可以包含内联元素或某些块元素，但内联元素不能包含块元素，它只能包含其它的内联元素
-
有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素
h1、h2、h3、h4、h5、h6、p、dt -
块级元素不能放在标签p里面
-
li 标签可以包含 div 标签，因为li 和 div 标签都是装载内容的容器
1：单行文本溢出和多行文本溢出怎么实现？
一、单行文本溢出显示省略号(…)
text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。
p{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
二、多行文本溢出显示省略号(…)
设置相对定位的容器高度（高度必须是行高的整数倍），用包含省略号(…)的伪元素元素通过绝对定位模拟实现
2：如何显示小于12px的字体？
利用css3的缩放属性实现。transition: transform; transform: scale(0.8,0.8);
4：请解释CSS3的弹性盒布局，以及适用场景？
1）背景介绍：
网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便
2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
（2）知识剖析：
-
什么是flex
flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。块级元素只需要display属性为flex即可。行内元素也可以使用 Flex 布局。.box{ display: flex; }。Webkit 内核的浏览器，必须加上-webkit前缀。
2.基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 项目默认沿主轴排列。
3.容器属性
flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap属性定义，如果一条轴线排不下，如何换行。默认情况下，项目都排在一条线（又称”轴线”）上。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
4.项目属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是以上三个的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch -
适用场景：多列盒子浮动时可以采用弹性盒
5：什么是less?less有什么好处？
LESS 是动态的样式表语言，通过简洁明了的语法定义，使编写 CSS 的工作变得非常简单。在实际项目开发中，可以大大提升前端工程师的效率！
CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。
作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。
Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件,只有在被编译后才能够被浏览器识别使用。
好处：
结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。
HTML5新增语义化标签？
(1) header 头部/标题
(2) nav 导航
(3) <section></section> 独立内容模块 ，可以h1-h6组成大纲 ，表示文档结构，有章节、页眉、页脚或其他部分。
(4) article （文章） 文章核心部分
(5) aside 标签内容之外相辅的信息 侧边栏
(6) footer 底部
(7) <figure>标签 代替原来的li>img+p就是有文字有图片的区域
多媒体标签
新标签容问题处理？
1、利用js去创造这些新的标签 方法: document.createElement(‘ 标签名 ’);
2、引用html5shiv.js
HTML5新标签对IE低版本浏览器的影响及兼容情况处理方案：
方案一：使用javascript新增元素的方法解决
document.createElement(“header”);
document.createElement(“footer”);
…
由于创建出来的元素是内联元素，所以需要转换成块级，宽度和高度才能生效。
header,footer{ display:block;}
方案二：使用封装好的插件html5shiv.js解决兼容性问题。
<!–[if lt IE 9]>
<script type="text/javascript" src="./html5shiv.js"></script>
<![endif]–>
上面这段代码仅会在IE浏览器下运行。
6：css3有哪些新特性？ 新增选择器有哪些？
新特性：背景属性、背景渐变属性、多列布局、圆角边框、盒子阴影、弹性盒、2D、3D变形、新盒模型等
新的选择器有属性选择器、结构伪类选择器
属性选择器
属性选择器在CSS2中就被引入，即E[attr]、E[attr=”value”]、E[attr~=”value”]。
结构性伪类选择器
:first-child 选择器：用于选取属于其父元素的首个子元素的指定选择器
:last-child 选择器：匹配属于其父元素的最后一个子元素的每个元素
:nth-child() 选择器：匹配属于其父元素的第 n 个子元素，n 可以是数字、关键词或公式。
:nth-last-child() 选择器：匹配属于其元素的第 n 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是数字、关键词或公式。
:nth-of-type(n)：选择器匹配属于父元素的特定类型的第n 个子元素。n 可以是数字、关键词或公式
:nth-last-of-type(n)：选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数。n 可以是数字、关键词或公式。
状态伪类选择器
:checked 匹配用户界面上处于选中状态的元素
:enabled 匹配用户界面上处于可用状态的元素
:disabled 匹配用户界面上处于禁用状态的元素
7:移动端常见布局及其原理
1:固定布局 采用固定像素 原理:设置好视口,跟PC端写法一样 版心320px 即可
缺点: 界面左右两侧有空白 而且元素略小 用户体验差
2:流式布局 原理:采用%替代固定px 限制布局盒子的最大宽度和最小宽度，高度采用px
优点:实现自适应 缺点: 只做宽度适配,高度会被拉伸
3:响应式布局 rem布局 原理:设置根标签html的字体大小,利用媒体查询换算不同屏幕宽度下对应的字体大小 利用相对单位rem取代固定px 优点: 宽高字体大小都能自适应 显示效果好
4:媒体查询布局 原理:利用媒体查询查询不同的屏幕宽度 给每个不同设备都写一套样式文件
缺点:复杂 工作量大 后期难维护
固定布局
在里把viewport加好，根pc端一样，设想整个网页的宽度为320px居中即可，超出部分留白。
优点：思路沿用PC端，上手简单。
缺点：大屏幕手机及手机横屏时，两边是留白较大，且大屏幕手机下看起来页面会特别小，操作的按钮也很小，用户体验较差
流式布局
流动布局重点就是使用百分比来代替传统px，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样， 优点是流动布局可以很好解决自适应需求，缺点是通过大量的百分比布局，会出现兼容性的问题，且更适用于对横向拉伸的设计元素，设计的时候存在很多局限性。
响应式做法
根据目标用户的访问设备的主要类型做三种或四种布局。 每种布局有一个区间即可利用媒体查询@media，可以为不同分辨率的设备加载不同的样式。这种方法的优点是可以相对精确的控制显示效果，但可能需要对同一个类书写不同的样式会导致代码比较繁复，后期维护困难。
rem布局
rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。 比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。
8:简述rem布局
设置根标签html的字体大小,利用媒体查询换算不同屏幕宽度下对应的字体大小 利用相对单位rem取代固定px 优点: 盒子宽高大小都能自适应 ,可以达到自适应的需求
缺点:字体大小如果也设置rem单位的话会出现字体变化呈现线性的变大变小 ,其实字体的变化应该是非线性的取值 所以字体需要单独利用媒体查询设置
rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。 比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。
rem布局实现步骤
设置页面的viewport
动态计算并设置html的fontsize值
按照pc端布局方式正常布局，把px单位换算成rem（较小的长度比如1px的边框就不需要转换成rem,直接设置px）
CSS3中过渡和动画的区别及使用场景？
2D或3D变形函数？
transform:translate transform:rotate transform:scale transform:skew
transform: rotate3d(100,200,100,45deg);
Bootstraps框架的核心及其规则？
Bootstraps的核心是栅格系统，原理：Bootstraps分为.container （固定宽度）或 .container-fluid （100% 宽度）两种，有左右内边距15px,它的直接子代只能是row,有负外边距15px,row的子元素是col,每行row最多有12col,可以自行设置每行的列数，col有内边距15px；当是小屏设备row-sm-
精确的控制显示效果，但可能需要对同一个类书写不同的样式会导致代码比较繁复，后期维护困难。
rem布局
rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。 比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。
8:简述rem布局
设置根标签html的字体大小,利用媒体查询换算不同屏幕宽度下对应的字体大小 利用相对单位rem取代固定px 优点: 盒子宽高大小都能自适应 ,可以达到自适应的需求
缺点:字体大小如果也设置rem单位的话会出现字体变化呈现线性的变大变小 ,其实字体的变化应该是非线性的取值 所以字体需要单独利用媒体查询设置
rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。 比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。
rem布局实现步骤
设置页面的viewport
动态计算并设置html的fontsize值
按照pc端布局方式正常布局，把px单位换算成rem（较小的长度比如1px的边框就不需要转换成rem,直接设置px）
CSS3中过渡和动画的区别及使用场景？
2D或3D变形函数？
transform:translate transform:rotate transform:scale transform:skew
transform: rotate3d(100,200,100,45deg);
Bootstraps框架的核心及其规则？
Bootstraps的核心是栅格系统，原理：Bootstraps分为.container （固定宽度）或 .container-fluid （100% 宽度）两种，有左右内边距15px,它的直接子代只能是row,有负外边距15px,row的子元素是col,每行row最多有12col,可以自行设置每行的列数，col有内边距15px；当是小屏设备row-sm-
超小屏row-xs-
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
