托尼沙滩裤

前端经典面试500题【上】

一阶段面试题集锦

文章目录

一阶段面试题集锦
1、 rem em vw vw 百分比区别
2、750的设计图，20px为多少rem
3、app怎么做适配的
4、bfc是什么，清楚浮动的原理
5、简单的一个盒子移动到另一个盒子，你用什么方式实现动画效果
6、boder实现0.5像素
7、场景题（两个盒子，左边固定宽，右边自适应，你能想到几种方法）
8、css 选择器有哪些，权重是什么样的
9、css布局，左侧宽度最小150px，最大25 %，右侧自适应。怎么实现
10、CSS的基本语句构成是？
11、css复用
12、CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？
13、css引入的方式有哪些，link和@import的区别是什么
14、css：一个容器（页面），里面有两个div左右摆放并且高度和容器高度一致，左div不会随着页面左右伸缩而变化，右div随页面左右伸缩宽度自适应（手写）
15、CSS3动画知道吗，怎么实现的
16、CSS3新增了哪些东西
17、当margin-top、padding-top 的值是百分比时,分别是如何计算的?
18、定位知道吗，说下，几种不同的定位分别有什么特点，详细说明
19、display有哪几种属性值？分别代表什么？Img属于什么元素？
- - - display属性的含义：display控制元素的显示类型；
    - display属性的属性值可以分成两大类
    - - 常用的属性值
      - 不常用的属性值
20、display：inline-block后为什么有间距
21、Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式?
- - - Doctype的作用
    - 严格模式和混杂模式的区别，以及如何触发两种模式
22、对WEB标准以及w3c的理解与认识？
23、FireFox中标签的居中问题的解决办法
24、Flex的横向平铺填充
25、flex用法场景
26、flex:0 1 100px什么意思？flex两个参数,三个参数什么意思？表示三个参数，flex-grow、flex-shrink、flex-basis分别是啥意思
27、父元素visibility：hidden；子元素设置visibility：visible，子元素显示吗
28、知道渐变嘛，说下你的了解
29、一条0.5px的线，几种方法
30、行内元素有那些。块级元素有那些。空元素有哪些
31、Html和xhtml有什么区别?
32、html页面渲染方式和流程
33、html5有哪些新特性、移除了那些元素
34、Html5中datalist是什么
35、HTTP全名叫什么
36、IE浏览器中的兼容
37、iframe缺点
38、假设div里面设置overflow:hidden，里面有select框，被遮住怎么办？
39、简述css中的不同盒模型的特性，以及应用，介绍box-sizing属性
40、简述jpg，gif，png-8，png-24的区别，及其各自的使用场景
41、精灵图和base64如何选择
42、了解过音频、视频吗？知道视频新增了哪些属性吗？
43、两栏布局
44、列举5种IE haslayout的属性及其值
45、浏览器标准模式和怪异模式之间的区别是什么？
46、浏览器怎么解析html文件
47、流式布局rem vm/vh px em的区别
48、媒体查询是什么
49、能够设置文本加粗的样式属性是什么
50、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?经常遇到的兼容性有哪些，原因，解决方法是什么？
- - - 主要测试的浏览器有 :
    - 浏览器的内核
    - 兼容新及解决方法
51、padding-top: 50%的效果，margin-top: 50%的效果
52、前端页面由哪三层构成，分别是什么，作用是什么
53、请按照如下布局在pc端实现html和css样式
54、清除浮动
55、请戳出ie6/7下特有的cssbug
56、请写出XHTML和css如何注释
57、请写出至少20个HTML5标签
58、rem布局字体太大怎么处理？
59、rem的原理，如何做一个能自动根据手机大小不同，自动配置rem的功能
60、语义化的理解？有哪些语义化标签，有什么作用！
61、怎么实现多重边框
62、怎么实现三角形
64、css选择器提取a标签中的href
64、rem怎么做适配，em是根据什么来决定的？
65、如何居中一个浮动元素
66、如何实现一个自适应div，宽高比始终为4:3
67、设置元素显示隐藏的几种方式，与区别？
68、实现垂直居中的几种方法，不知道宽高的情况下如何实现元素水平垂直居中？
69、双飞翼布局跟圣杯布局
70、说说移动端Web分辨率
71、table了解多少
72、谈谈flex布局，你知道flex:110吗
73、弹性盒有哪些属性是在父元素身上?那些在子元素身上?你知道flex-grow吗
74、谈一下怎么实现一个椭圆,使用css
75、脱离布局流有几种方法？
76、伪类伪元素区别
77、为什么无法定义1px左右高度的容器
78、现在想调节—下父元素的透明度，但是又不影响子元素的透明度，怎么破？
79、有没有了解过box-sizing，除了border-box还用过哪些，有没有用过其他的box-sizing的属性值属性
80、语义化的理解？有哪些语义化标签，有什么作用！
81、怎么实现多重边框
82、响应式布局
83、写一个1px的边框移动端是怎么处理的（根据什么转成rem）
84、选择器（有几种选择器，如何获取所有li标签如何获取一个ul下子li标签如何获取一个ul下的所有li标签)
85、样式link引入，style引入，哪个层级高
86、移动端经常出现的兼容问题，谈谈移动端应用或者wap站的—些优化技巧和心得
87、重绘和重排
88、怎么实现网页优化
89、一个div设置了margin-bottom:10px 另一个div 设置了margin-top 10px 两者之间产生了重合空间如何取消重合空间？
90、有几种方式？让元素竖直方向居中
91、有两个div，上下关系，给上div设置margin-bottom:10px,给下div设置margin-top:20px）问他们之间的距离多大，（涉及盒子塌陷问题）
92、有没有了解过box-sizing，除了border-box还用过哪些，有没有用过其他的box-sizing属性

1、 rem em vw vw 百分比区别

相同点：
- rem，em，vw，vh，vw属于前端开发除了px单位之外的另外几种单位取值；但是具体含义存在区别
不同点：
- px：是像素单位，属于绝对单位，是一个具体的大小
- rem：相对于根元素进行设置
- em：如果自身有字体大小的设置，那么就相对于自身字体大小设置，如果自身没有字体大小设置，那么就相当于父元素进行设置。
- vw：1vw相当于浏览器窗口宽度的百分之一
- vh：1vh相当于浏览器窗口高度的百分之一
- 百分比：相对于父元素宽度或者高度的百分之几
- 注意：vw和vh是视口可以观看的区域的大小；如果没有滚动条的话，则宽度设置成100vw和100%的时候实现的效果一直；如果有滚动的话，则100vw中不是包括滚动条的，100%是包括滚动条的距离的
- ```
 
<style>
     *{margin:0;padding:0}
     html,body{
         height: 100%;
     }
     .box1{
         width: 100%;
         height:500px;
         background-color: red;
     }
     .box2{
         width: 100vw;
         height:500px;
         background-color: green;
     }
style>
<div class="box1">div>
<div class="box2">div>750的设计图，20px为多少rem
```

2、750的设计图，20px为多少rem

首先设计图是UI设计提供给前端开发工程师的设计稿，750的设计图出自于手机屏幕为375px*667px的iphone678手机屏幕的设计稿，这里也可以称之为2倍图。20px的字体大小涉及到了单位的转换，页面中默认的字体大小为16px，那么此时的1rem = 16px; 
那么20px通过计算得出公式 1rem = 16px; ?rem = 20px; 得出结果为:1.25rem

扩展1：
因为他的设备像素比（dpr=物理像素/CSS像素）是2；dpr是一个固定的比值；不同的手机型号比值不应：
物理像素：可以理解成你ps里面测量的距离的大小
CSS像素：你编写开发代码的时候CSS里面给定的像素值；
dpr固定值如下如：

3、app怎么做适配的

基于手机系统开发的app(原生Android/IOS)
另外一种是webapp
- 设置以下标签：
  
  具体的含义为：app完成的页面的宽度等于设备的宽度，页面的缩放比例为1.0，不允许最大缩放；
使用媒体查询和响应式做适配
- 使用媒体查询检测设备屏幕的大小改变布局样式，但是成本耗费比较大，不易操作
使用单位自己单位中经常使用的封装好的flexble.js文件做适配
- 封装好的flexble.js文件文件可以做到适配，并且原理是已经封装好的视口和设备像素比基于webapp开发

4、bfc是什么，清楚浮动的原理

BFC含义：
- 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域
BFC触发条件：
- 根元素
- float属性不为none（脱离文档流）
- position为absolute或fixed
- display为inline-block,table-cell,table-caption,flex,inine-flex
- overflow不为visible
BFC布局规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
- 每个元素的margin box的左边，与包含块border box的左边相接触
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
- 计算BFC的高度时，浮动元素也参与计算

5、简单的一个盒子移动到另一个盒子，你用什么方式实现动画效果

方法一：使用HTML+CSS里面的transition过渡动画结合2d的位移translate设置

<div class="box1">div>
<div class="box2">div>
<style>
    *{margin:0;padding:0}
    div{
        float: left;
    }
    .box1{
        width: 200px;
        height:200px;
        background-color: red;
    }
    .box2{
        width: 100px;
        height:100px;
        background-color: green;
        transition: all linear 1s;
    }
    .box1:hover+.box2{
        transform: translateX(-100px);
    }
style>

方法二：使用HTML5+CSS3中的animation动画属性结合2d里面的位移translate进行实现

方法三：复杂方法，可以使用js封装一个动画函数，直接使用鼠标移动移入事件或者点击事件触发移动

<script>
	//获取元素
    //设置x和y的值
    //绑定鼠标移入事件==缓慢移动  x的位置进行移动  自减
    //绑定鼠标移出事件==缓慢移动  x的位置进行移动  自增
script>
<style>
    *{margin:0;padding:0}
    div{float:left}
    .box1{width:300px;height:300px;background-color:red}
    .box2{width:100px;height:100px;background-color:green}
style>
<div class="box1">div>
<div class="box2">div>

6、boder实现0.5像素

实现方法：CSS3有缩放的属性，我们可以利用这个属性，缩小50%的1px的边框，来实现这个功能代码如下：

<div class="border3">
    <div class="content">伪类设置的边框div>
div>  
<style>
*{
     margin:0;padding:0
}
.border3{
     position: relative;         
}
.border3:before{
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid red;
    transform-origin: 0 0;
    transform: scale(0.5, 0.5);
    box-sizing: border-box;
 }
style>

7、场景题（两个盒子，左边固定宽，右边自适应，你能想到几种方法）

公共HTML代码部分

<div class="content">
	<div class="left">div>
	<div class="right">div>
div>

方法一：float来和BFC实现

<style>
.content {
    border: 1px solid #000;
    height: 800px;
    padding: 20px;
}
.left {
    width: 200px;
    height: 100%;
    background: red;
    float: left;
}
.right {
    height: 100%;
    background: pink;
    overflow: hidden;
}
style>

方法二：absolute定位和margin值实现

<style>
 .content {
     border: 1px solid #000;
     height: 800px;
     padding: 20px;
    }
    .left {
        width: 200px;
        height: 100%;
        background: red;
        position: absolute;
    }
    .right {
        height: 100%;
        background: pink;
        margin-left: 200px;
    }
style>

方法三：calc(100% - 固定内容的宽度) 用calc函数动态计算数值

<style>
 .content {
     border: 1px solid #000;
     height: 800px;
     padding: 20px;
    }
    .left {
        width: 200px;
        height: 100%;
        background: red;
        float: left;
    }
    .right {
        height: 100%;
        background: pink;
        float: left;
        width: calc(100% - 200px);
    }
style>

方法四：flex布局轻松搞定

<style>
    .content {
        border: 1px solid #000;
        height: 800px;
        padding: 20px;
        display: flex;
    }
    .left {
        width: 200px;
        height: 100%;
        background: red;
    }
    .right {
        height: 100%;
        background: pink;
        flex: 1;
    }
style>

方法五：使用table和table-cell实现

 <style>
     .content {
         border: 1px solid #000;
         width: 100%;
         height: 800px;
         display: table;
     }
     .left {
         width: 200px;
         height: 100%;
         background: red;
         display: table-cell;
     }
     .right {
         height: 100%;
         background: pink;
         display: table-cell;
     }
style>

方法六：使用inline-block携手calc函数设置宽度

<style>
    .content {
        border: 1px solid #000;
        width: 100%;
        height: 800px;
        font-size: 0;
    }
    .left {
        width: 200px;
        height: 100%;
        background: red;
        display: inline-block;
        vertical-align: top;
    }
    .right {
        height: 100%;
        background: pink;
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 200px);
        font-size: 16px;
    }
style>

8、css 选择器有哪些，权重是什么样的

选择器含义：选择器是查找页面元素的一种方式方法，选择器的种类有很多种。
常用的选择器有以下内容：
1、ID　　#id
2、class　　.class
3、标签　　p
4、通用　　*
5、属性　　type="text"
6、伪类　　:link  :visited  :hover  :active
7、伪元素　　::first-line  :first-letter
8、子选择器  div>p
9、后代选择器  div p
10、相邻兄弟  div+p
11、通用兄弟  div~p
12、结构伪类  :nth-child  :first-child  :last-child

权重计算规则：
1、第一等：代表内联样式，如: style=””，权值为1000。
2、第二等：代表ID选择器，如：#content，权值为0100。
3、第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4、第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
5、通配符、*权值为0000。
6、继承的样式没有权重值。

important > 内联 > ID > 类| 伪类 | 属性选择|伪对象 > 标签  >  继承 > 通配符

9、css布局，左侧宽度最小150px，最大25 %，右侧自适应。怎么实现

方法一：1.float+BFC【BFC区域不会和设置浮动的区域重合】


<style>
    .left{
        min-width: 150px;
        max-width: 25%;
        height: 300px;
        background-color: red;
        float: left;
    }
    .right{
        height: 300px;
        background-color: yellow;
        overflow: hidden;
    }    
style>
<body>
    <div class="left">
        内容
    div>
    <div class="right">div>
body>

方法二：弹性盒子


<style>
    *{
        padding: 0;
        margin: 0;
    }
    body{
        display: flex;
    }
    .left{
        min-width: 150px;
        max-width: 25%;
        height: 300px;
        background: green;
    }
    .right{
        flex: 1;
        height: 300px;
        background: red;
    }
style>
<body>
    <div class="left">div>
    <div class="right">div>
body>

10、CSS的基本语句构成是？

CSS被称之为：层叠样式表（Cascading Style Sheets）是对页面结构的一种修饰；
CSS的基本语法是：选择器{属性:属性值;属性:属性值;属性:属性值}
CSS基本语法构成两个部分组成：选择器和{}样式规则（样式声明）组成；样式规则（样式声明）由两个部分组成的分别是属性和属性值；
使用CSS语法注意事项是
- 属性和属性值使用（：）链接
- 属性和属性值结束之后需要使用（；）结束
- 如果属性和属性值是最后一组的话可以不用分号结束；但是建议添加上为了防止后面继续添加属性

11、css复用

CSS复用代表的是CSS的重复使用，主要是为了做到网站开发的优化，可以简化多重CSS
CSS复习：目的是为了创建一套可以不依赖内容的可重复使用的类名及公共的样式, 沿着复用这条思路走下去,久而久之基本可以构建一套全新的 UI 组件库而无需编写过多新的 CSS。
例如：我们在单位中实际开发的时候经常使用的公共样式表，重置样式表是一样的道理

12、CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？

CSS选择符（就是选择器）

基础选择器

通配符选择器     *{}
标签选择器标签名  p{}
class类选择器    .class属性值{}
多类名选择器      .类名n{}  标签中class属性为  class="类名1 类名2 ... 类名n"
id选择器         #id属性值{}
群组选择器        选择器1,选择器2,...{}

结构选择器

子元素选择器E>F{}  F必须是E的子元素
后代选择器E F{}   F必须是E的后代
相邻兄弟选择器E+F{}  F是紧挨这E后面的兄弟元素
通用选择器E~F{}  F是E后面所有的兄弟元素

属性选择器

[Eattr]  		 元素E中存在attr属性
[Eattr="value"]  元素E中存在attr属性,并且attr的属性值为value
[Eattr~="value"] 元素E中存在attr属性,并且attr的属性值为value或者"value value1 ..."的形式
[Eattr^="value"] 元素E中存在attr属性,并且attr的属性值以value开始
[Eattr$="value"] 元素E中存在attr属性,并且attr的属性值以value结尾
[Eattr*="value"] 元素E中存在attr属性,并且attr的属性值存在value
[Eattr|="value"] 元素E中存在attr属性,并且attr的属性值为value或者value-的形式

结构伪类选择器

X:first-child 匹配子集的第一个元素
X:last-child匹配父元素中最后一个X元素
X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始
X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
X:root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
X:empty匹配没有任何子元素（包括包含文本）的元素

目标伪类

E:target 选择匹配E的所有元素，且匹配元素被相关URL指向

UI状态伪类

E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
E:selection 匹配E元素中被用户选中或处于高亮状态的部分

否定伪类

 E:not(s) （IE6-8浏览器不支持:not()选择器。）匹配所有不匹配简单选择符s的元素E

动态伪类

 E:link     链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
 E:visited  链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
 E:active   用户行为选择器 选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
 E:hover    用户行为选择器  选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
 E:focus    用户行为选择器  选择匹配的E元素，而且匹配元素获取焦点

属性继承

继承：html元素可以从父元素那里继承一部分css属性，即使当前元素没有定义该属性。

 1.字体系列属性 font，font-family，font-weight，font-size，font-style
 2.文本系列属性 text-indent，text-align，line-height，word-spacing，letter-spacing，text-transform，color
 3.元素可见性 visibility
 4.表格布局属性 caption-side，border-collapse，border-spacing，empty-cells，table-layout
 5.列表布局属性 list-style-type，list-style-image，list-style-position，list-style

选择器优先级的算法
- 优先级就近原则，同权重情况下样式定义最近者为准;
- 载入样式以最后载入的定位为准;
- 优先级为：同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
- !important > id > class > tag important 比内联优先级高

13、css引入的方式有哪些，link和@import的区别是什么

区别1：link属于XHTML标签，而@import完全是CSS提供的一种方式。
区别2：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
区别3：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
区别4：使用dom(document object model文档对象模型 )控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.

14、css：一个容器（页面），里面有两个div左右摆放并且高度和容器高度一致，左div不会随着页面左右伸缩而变化，右div随页面左右伸缩宽度自适应（手写）

<div class="container">
    <div class="left">div>
    <div class="right">北京千锋互联科技有限公司（下面简称“千锋教育”），成立于2011年1月，立足于职业教育培训领域，公司现有教育培训、高校服务、企业服务三大业务板块。教育培训业务分为大学生技能培训和职后技能培训；高校服务业务主要提供校企合作全解决方案与定制服务；企...div>
div>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        max-width: 1000px;
        height: 500px;
        background-color: yellow;
        margin: 20px auto;
        display: flex;
    }
    .container .left{
        width: 300px;
        background-color: orange;
    }
    .container .right{
        flex: 1;
        background-color: red;
    }
style>

15、CSS3动画知道吗，怎么实现的

知道的，CSS3动画主要是通过animation这个属性来进行实现，使用动画的时候需要先进行声明动画然后再去调用，哪里需要产生动画效果哪里就使用animation进行调用

基本语法

语法注意事项

animation:复合属性
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

form  初始状态
to	  结束装填
可以替换成
0%    初始状态
100%  结束状态
后面的百分比可以称之为关键帧动画

16、CSS3新增了哪些东西

CSS3里面的新增主要有：CSS选择器，盒子中的修饰，背景，文本效果，字体，2D/3D，过渡动画，多列布局等等

CSS选择器

1、p:first-of-type 选择属于其父元素的首个元素的每个元素。 2、p:last-of-type 选择属于其父元素的最后元素的每个元素。 3、p:only-of-type 选择属于其父元素唯一的元素的每个元素。 4、p:only-child 选择属于其父元素的唯一子元素的每个元素。 5、p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

盒子修饰

新增了边框属性：
1、border-radius
	支持浏览器：IE9+、Firefox、Chrome、Safari 、Opera
2、box-shadow  向方框添加一个或多个阴影
	支持浏览器：IE9+、Firefox、Chrome、Safari 、Opera
3、border-image
	支持浏览器：Firefox（旧版本需要前缀-moz-）、Chrome（旧版本需要前缀-webkit-）、Safari（Safari 5 以及更老的版本需要前缀 -webkit-） 、Opera（ 需要前缀 -o-）

CSS新增背景模块

1、background-size   规定背景图片的尺寸
	支持浏览器：IE9+、Firefox（旧版本需要前缀-moz-）、Chrome、Safari、Opera
2、background-origin    规定背景图片的定位区域，背景图片可以放置于 content-box、padding-box 或 border-box 区域。
	支持浏览器：IE9+、Firefox、Chrome、Safari、Opera
3、background-clip   规定背景的绘制区域
	支持浏览器：IE9+、Firefox、Chrome、Safari、Opera

CSS文本效果模块

1、text-shadow   可向文本应用阴影
	支持浏览器：IE10、Firefox、Chrome、Safari、Opera
2、word-wrap   允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分
	支持浏览器：所有主流浏览器

CSS引入字体模块
```
@font-face
```

2D/3D

1、transform    向元素应用 2D 或 3D 转换
	支持浏览器：
    	IE10：2D、3D都支持（2D IE9 需要前缀 -ms-）；
		Firefox：2D、3D都支持；
		Chrome：2D、3D都支持（2D、3D需要前缀 -webkit-）；
		Safari：2D、3D都支持（2D、3D需要前缀 -webkit-）；
		Opera：只支持2D

过渡动画

1、transition 	过渡属性 
	支持浏览器：IE 10、Firefox、Chrome（Chrome 25 以及更早的版本，需要前缀 -webkit-）、Opera、Safari（ 需要前缀 -webkit-）
2、@keyframes  	用于创建动画。
	在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
	支持浏览器：IE 10、Firefox、Chrome（Chrome 25 以及更早的版本，需要前缀 -webkit-）、Opera、Safari（ 需要前缀 -webkit-）
3、animation 	动画调用属性
	支持浏览器：IE 10、Firefox、Chrome（Chrome 25 以及更早的版本，需要前缀 -webkit-）、Opera、Safari（ 需要前缀 -webkit-）

多列布局

1、column-count=======划分列数
2、column-gap=========属性规定列之间的间隔大小
3、column-rule========设置或检索对象的列与列之间的边框
4、column-fill========设置或检索对象所有列的高度是否统一
5、column-span========设置或检索对象元素是否横跨所有列。
6、column-width=======设置或检索对象每列的宽度

17、当margin-top、padding-top 的值是百分比时,分别是如何计算的?

可以对元素的margin设置百分数，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。（padding同理）
如果没有为元素声明width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式，使其元素使用百分数外边距，当用户修改浏览窗口的宽度时，外边距会随之扩大或缩小。
为什么margin-top/margin-bottom的百分数也是相对于width而不是height呢？

我们认为，正常流中的大多数元素都会足够高于包含其后代元素（包括外边距），如果一个元素的上下外边距是父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如此循环。

<style>
    .fu {
        width: 400px;
        height: 300px;
        background: blue;
        overflow: hidden;
    }
    .zi {
        width: 20px;
        height: 20px;
        background: red;
        margin-top: 50%;
    }
style>
<div class="fu">
    <div class="zi">div>
div>

18、定位知道吗，说下，几种不同的定位分别有什么特点，详细说明

定位的含义是将元素放在指定的位置上，在css中特指position属性，他一共有5种属性值。
分别是
- static静态定位，是元素自带的默认的定位方式。
- relative是相对定位，他是基于元素本身的位置进行定位的，不会脱离文档流。
- fixed是固定定位是基于浏览器窗口进行定位的，会脱离文档流。
- absolute是绝对定位，是基于最近的被设置了非静态定位的上级元素进行定位的，他会脱离文档流，常用的场景是子绝父相。
- sticky是粘性定位，是css新增的属性值；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上，简单说在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位要求时；position:sticky 这时的效果就相对于 fixed 定位，固定到适当的位置。
使用定位的时候如果需要元素进行位置的调整需要配合偏移属性进行实现对应的效果。偏移属性有四个：top；right；bottom；left；定位的属性决定了定位的偏移参照物
参照物问题
- 静态定位不会发生位置的调整所以不存在参照物的问题
- 相对定位添加偏移属性后，相对于自己原来的位置进行位置调整
- 绝对定位：如果父元素及外侧没有任何已经定位的元素，则参照浏览器屏幕左上角（body左上角）进行位置的调整；如果父元素或者是就近的父级元素有定位则相对于就进行元素的左上角进行位置的调整；绝对定位的参照物就是所谓的包含块的意思
- 固定定位：参照物是浏览器可视窗口位置的左上角进行位置调整，不会受到滚动条的滚动而影响
- 粘性定位：粘性定位参照物在实现固定吸顶效果的时候参照物与固定定位一样

19、display有哪几种属性值？分别代表什么？Img属于什么元素？

display属性的含义：display控制元素的显示类型；

display属性的属性值可以分成两大类

常用的属性值

none代表为不显示：控制元素的隐藏
block代表显示为块级元素：还可以让元素控制元素显示
	块级元素的特点：默认站宽一整行，能设置宽度高度，纵向排列
	块级元素有:div,p,h1,h6,ol,ul,ol,li,dl,dt,dd,form,fieldset,legend,
	table,header,footer,section,main,nav,article,aside等等
inline代表行内元素；
	行内元素的特点：不能设置宽度高度，并且能横向显示
	行内元素有:a,b,strong,u,i,em,s,del,sup,sub,span,font,mark,var
inline-block代表行内块元素
	行内块元素的特点：能设置宽度高度并且横向显示
	行内块元素有:input,textarea,select,
flex代表的是触发弹性盒子
grid代表的是触发网格布局

不常用的属性值

list-item			此元素会作为列表显示。
run-in				此元素会根据上下文作为块级元素或内联元素显示。
compact				CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker				CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table				此元素会作为块级表格来显示（类似 ），表格前后带有换行符。
inline-table		此元素会作为内联表格来显示（类似 ），表格前后没有换行符。
table-row-group		此元素会作为一个或多个行的分组来显示（类似 ）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 ）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 ）。
table-row			此元素会作为一个表格行显示（类似 ）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 ）。
table-column		此元素会作为一个单元格列显示（类似 ）
table-cell			此元素会作为一个表格单元格显示（类似 
 和 ）
table-caption		此元素会作为一个表格标题显示（类似 
）
inherit				规定应该从父元素继承 display 属性的值。
  
      
    img属于什么元素：浏览器中的computed计算属性中的图片的display的取值为inline，虽然为inline但是实际开发的时候图片是作为行内块元素进行使用的，因为遵循能设置宽度高度，并且还能横向显示；所以属于行内块元素，但是有些程序员也会把图片认为是行内元素也是可以，从另一个角度讲img也称作是置换元素；
  
   
  20、display：inline-block后为什么有间距 
   
   display:inline-block是让元素在一行显示，但是这些元素在html里面是上下行排列的，所以中间有换行符，于是并排显示就有了换行符带来的空隙。 
   解决这种问题的方式有： 
     
     将html标签要display:inline-block 的元素写在一行。缺点：代码可读性差。 
     给父元素设置font-size:0,给子元素设置需要的font-size值。缺点:是子元素如果里面有文字，文字会消失不见，所以又要给子元素设置font-size,增加了代码量。 
     给元素设置float:left,缺点需要清除浮动。 
     设置子元素的margin-left为负值，但是元素之间的间隙大小是根据上下文的字体大小确定的，而每个浏览器的换行空隙大小不同，所以这个方法不通用。 
     设置父元素 display:table;word-spacing:-1em;目前这个方法可以完美解决，且兼容其他浏览器。 
    
  
   
  21、Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? 
   
    Doctype的作用 
     
     1.<！DOCTYPE>声明叫做文档类型DTD，它的作用就是用来标识浏览器使用哪种文档类型，让浏览器知道以何种方式解析文档。 
     2.必须位于HTML文档的第一行，处于标签之前，但是不属于HTML文档标签。 
     3.声明文档的解析类型（document.compatMode），是为了避免浏览器的怪异模式。 
    
  
    严格模式和混杂模式的区别，以及如何触发两种模式 
     
      **1.严格模式：**浏览器按照W3C的标准解析代码，又称为标准模式。
  
      **2.混杂模式：**浏览器按照自己的方式来解析代码，以一种向后兼容的方式呈现。
  
      **3.Doctype可声明的三种DTD类型：**严格版本，过渡版本，基于框架的HTML版本。
  
      **4.区别：**浏览器使用严格模式和混杂模式，与文档中的DTD直接相关 
       
       （1）如果用文档中包含严格的DOCTYPE，则以严格模式呈现（严格DTD–严格模式） 
       （2）包含过渡DTD和URL的DOCTYPE，以严格模式呈现；包含过渡的DTD而没有URL，以混杂模式呈现；（过渡DTD+URL–严格，过渡DTD（无URL）-- 混杂模式）） 
       （3）HTML5中没有DTD，没有严格和混杂模式的区分，HTML5中有相对宽松的语法，尽可能实现向后兼容 
       （4）DOCTYPE不存在或者格式不正确，以混杂模式呈现（DTD不存在或格式不正确–混杂模式） 
      
  
      5.严格模式和混杂模式解析语句的不同点 
       
       （1）可以设置行内元素的宽高，在严格模式下给内联元素设置宽高都不起作用，在混杂模式下生效 
       （2）可设置百分比高度在严格模式下，如果没有给父元素设置高度，而子元素的高度以百分比呈现，这时是不生效的 
       （3）盒模型的宽高包含padding和border在W3C的标准下，给一个元素设置宽高，则呈现的是内容的宽高。在IE5.5以下及其他浏览器的混杂模式下，盒子的宽度还包括padding和border。 
       （4）使用margin：0 auto在IE下会失效使用margin：0 auto在严格模式下会水平居中，而在混杂模式下会失效，但可以设置text-align：center来水平居中。 
       （5）混杂模式下的图片padding会失效，Table中的字体属性将无法继承父元素的设置，white-space：pre会失效。 
      
  
      
       
        （1）如果用文档中包含严格的DOCTYPE，则以严格模式呈现（严格DTD–严格模式）
  
        （2）包含过渡DTD和URL的DOCTYPE，以严格模式呈现；包含过渡的DTD而没有URL，以混杂模式呈现；（过渡DTD+URL–严格，过渡DTD（无URL）-- 混杂模式））
  
        （3）HTML5中没有DTD，没有严格和混杂模式的区分，HTML5中有相对宽松的语法，尽可能实现向后兼容
  
        （4）DOCTYPE不存在或者格式不正确，以混杂模式呈现（DTD不存在或格式不正确–混杂模式）
  
      
  
    
  
   
  22、对WEB标准以及w3c的理解与认识？ 
   
    web标准可以分为结构、表现和行为。 
     
     结构主要是有HTML标签组成。或许通俗点说，在页面body里面我们写入的标签都是为了页面的结构。 
     表现即指css样式表，通过css可以是页面的结构标签更具美感。 
     行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成。 
    
  
    web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点 
     
     1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助 
       
       1）标签字母要小写 
       2）标签要闭合 
       3）标签不允许随意嵌套 
      
  
     2.对于css和js来说 
       
       1）尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。 
       2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版 
       3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。 
      
  
    
  
   
  23、FireFox中标签的居中问题的解决办法 
  <div id="a" style="width:200px;border:1px solid red;text-align:center;">
    <div id="b" style="background-color:blue;width:30px;margin:0 auto"> div>
div>

 
  24、Flex的横向平铺填充 
  让父元素触发弹性和也就是display:flex;然后让所有的子元素均分使用flex:1;代码如下 
  <div style="width: 1000px;height: 500px;display: flex;">
    <span style="flex:1;">1span>
    <span style="flex:1;">2span>
    <span style="flex:1;">3span>
    <span style="flex:1;">4span>
    <span style="flex:1;">5span>
div>
 
  25、flex用法场景 
   
   场景一：移动端和PC端布局中；能够高效解决间距调整的问题（移动端布局和PC端布局） 
   场景二：能快速高效实现元素水平垂直居中（点击删除的弹窗） 
   场景三：能够实现快速元素均分，避免了百分比设置的不确定性 
   场景四：快速实现多列布局，能高效实现瀑布流布局 
   场景五：后台管理系统的两栏和三栏布局 
   
  26、flex:0 1 100px什么意思？flex两个参数,三个参数什么意思？表示三个参数，flex-grow、flex-shrink、flex-basis分别是啥意思 
   
   flex属性是弹性布局添加给项目（子元素）的属性， 
     
     flex属性是flex-grow（放大）、flex-shrink（缩小）、flex-basis（宽度）的简写属性。 
     flex-grow默认值为0，当值大于0时，当父元素有剩余空间时当前元素放大，父元素没有剩余空间时，该元素不放大。 
     flex-shrnk默认值为1，父元素有剩余空间时，该元素不缩小，父元素没有剩余空间时，该元素缩小。 
     flex-basis相当于width属性。 
    
  
   **flex:0 1 100px；**表示父元素有剩余空间当前元素不放大，父元没有剩余空间当前元素会缩小。flex有很多中赋值方式，可以写一个值，两个值或者三个值。 
     
     **举例：**1.flex：1 解析为 flex：1 1 0%。2.flex：auto解析为 flex：1 1 auto。3.flex：none解析为flex：0 0auto。4.flex：解析为flex：0 0 auto。4.flex：0 auto解析为flex：0 1 auto。 
    
  
   
  27、父元素visibility：hidden；子元素设置visibility：visible，子元素显示吗 
   
   这时候子元素是显示的，原理如下： 
   当只是给父元素添加visibility：hidden，子元素会继承父元素的visibility：hidden的值，也会跟着父元素隐藏。 
   如果给父元素添加visibility：hidden；同时在给子元素添加visibility：visible，子元素是显示的。**原因：**添加给子元素visibility：visible是大于父元素添加的visibility：hidden的。所以优先执行子元素的visibility：visible属性。 
   
  28、知道渐变嘛，说下你的了解 
   
    CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
  
    以前，你必须使用图像来实现这些效果。但，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
  
    CSS3 定义了两种类型的渐变（gradients）：使用都是background属性 
     
      一、线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 
       
       基本语法:background-image: linear-gradient(direction, color-stop1, color-stop2, …); 
      
  
      二、径向渐变（Radial Gradients）- 由它们的中心定义 
       
       基本语法:background-image: radial-gradient(shape size at position, start-color, …, last-color); 
       为了创建一个径向渐变，你也必须至少定义两种颜色节点。 
       颜色节点即你想要呈现平稳过渡的颜色。 
       同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落） 
       size的取值 closest-side，farthest-side，closest-corner，farthest-corner 
      
  
      三、重复渐变 
       
        repeating-linear-gradient() 函数用于重复线性渐变：
 #grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
  
        repeating-radial-gradient() 函数用于重复径向渐变：
 #grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
  
      
  
    
  
   
  29、一条0.5px的线，几种方法 
   
    方法一：采用meta viewport的方式
 <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

  
    方法二：采用transform: scale()的方式 
     
     transform: scale(0.5,0.5); 
    
  
    方法三：直接利用边框 
     
     border: 0.5px solid red;//ios8以上支持，以下显示为0 
    
  
    方法四：渐变模拟：设置 1px 通过 css 实现的背景图片，50%有颜色，50%透明。
  
    .border {
    background-image:linear-gradient(180deg, red, red 50%, transparent 50%), linear-gradient(270deg, red, red 50%, transparent 50%), linear-gradient(0deg, red, red 50%, transparent 50%), linear-gradient(90deg, red, red 50%, transparent 50%);
    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
    background-repeat: no-repeat;
    background-position: top, right top, bottom, left top;
    padding: 10px;
}
/*
优点：兼容性较好，单边框、多边框可实现，大小、颜色可配置。
缺点：代码量多、无法实现圆角、同时占用了背景样式
*/
  
    方法五：利用阴影
 -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
/*
利用 css 对阴影处理的方式模拟。 
优点：兼容性较好，单边框、多边框、圆角可实现，大小、颜色、可配置。 
缺点：模拟效果强差人意，颜色不好配置。
*/
  
    方法六：边框图片:
 border-image: url() 2 0 stretch; border-width: 0 0 1px; 
/*缺点：图片边缘模糊，大小、颜色更改不灵活。*/
  
   
  30、行内元素有那些。块级元素有那些。空元素有哪些 
   
   行内元素：不能实现宽度高度，横向显示 
     
     a,span,i,em,var,b,strong,sup,sub,s,del,label,font,mark 
    
  
   块级元素：能设置宽度高度，纵向显示，并且默认站宽一整行 
     
     h1~h6,p,div,ul,ol,li,dl,dt,dd,table,form,hr,fieldset,legend,marquee,iframe,header,nav,footer,section,main,figure,figcaption,hgroup,aside,article 
    
  
   行内块元素：能设置宽度高度，并且横向显示 
     
     input,img,select,textarea 
    
  
   空元素：就是单标签 
     
     input,img,br,meta,link,hr 
    
  
   置换元素：因为默认自带宽度告诉浏览器能进行根据类型路径加载对应的内容 
     
     input,img,select,textarea 
    
  
   
  31、Html和xhtml有什么区别? 
   
    **含义不同：**HTML是一种基本的WEB网页设计语言，XHTML是一个基于XMl的置标语言
  
    最主要的不同 
     
      XHTML元素必须被正确地嵌套。
  
      XHTML元素必须被关闭
  
      XHTML标签名必须用小写字母
  
      XHTMl文档必须拥有根元素在XHTML中，、、都是必需的标签。
  
      XHTML必须设置标签的xmlns属性，且其值为“http://www.w3.org/1999/xhtml”。
  
      XHTML任何属性值要么用单引号引起来，要么用双引号引起来。如class=page就是不合法的，而
 class='page’和class="page"均是合法的。所有属性必须有值。有些属性，比如标签的checked属性，在HTML中可以使用简写形式，即数据，然后在XHTML中，必须这样编写：数据
  
    
  
   
  32、html页面渲染方式和流程 
   
   用户输入url地址，浏览器根据域名寻找IP地址 
     
     浏览器向服务器发送http请求，如果服务器段返回以301之类的重定向，浏览器根据相应头中的location再次发送请求 
     服务器端接受请求，处理请求生成html代码，返回给浏览器，这时的html页面代码可能是经过压缩的
 浏览器接收服务器响应结果，如果有压缩则首先进行解压处理，紧接着就是页面解析渲染 
    
  
   解析渲染该过程主要分为以下步骤： 
     
     解析HTML----构建DOM树----DOM树与CSS样式进行附着构造呈现树------布局、绘制 
    
  
   详细过程如下： 
     
     1)用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件。 
     2)浏览器开始载入html代码，发现标签内有一个标签引用外部CSS文件。 
     3)浏览器又发出CSS文件的请求，服务器返回这个CSS文件。 
     4)浏览器继续载入html中部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了。 
     5)浏览器在代码中发现一个标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码。 
     6)服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码。 
     7)浏览器发现了一个包含一行Javascript代码的 
     
   
  33、html5有哪些新特性、移除了那些元素 
   
    H5新增的新的特性
 - 新的语义元素，比如 , , , and 。
- 新的表单控件，比如数字、日期、时间、日历和滑块。
- 强大的图像支持（借由 
  
    H5删除了哪些内容：以下 HTML 4.01 元素已从 HTML5 中删除：
 - 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- <strike>
- <tt>
</code></pre> </li> 
  </ul> 
  <h2>34、Html5中datalist是什么</h2> 
  <pre><code class="prism language-html"><span class="token comment"><!--
含义和概念：
<datalist> 标签规定了 <input> 元素可能的选项列表。是HTML5新增的一个标签
<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。
请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。
案例如下：
--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>browsers<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>browsers<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Internet Explorer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Firefox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Chrome<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Opera<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Safari<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span>
</code></pre> 
  <h2>35、HTTP全名叫什么</h2> 
  <ul> 
   <li> <p>http的英文全称是：HyperText Transfer Protocol。中文译为超文本传输协议。http是一个简单的请求-响应协议，它通常运行在TCP之上。</p> </li> 
   <li> <p><strong>HTTP</strong>是基于客户/服务器模式，且面向连接的。典型的HTTP事务处理有如下的过程：</p> 
    <ul> 
     <li>（1）客户与服务器建立连接；</li> 
     <li>（2）客户向服务器提出请求；</li> 
     <li>（3）服务器接受请求，并根据请求返回相应的文件作为应答；</li> 
     <li>（4）客户与服务器关闭连接。</li> 
    </ul> </li> 
   <li> <p><strong>HTTPS</strong> （全称：Hyper Text Transfer Protocol over SecureSocket Layer），HTTPS 主要由两部分组成：HTTP + SSL / TLS，也就是在 HTTP 上又加了一层处理加密信息的模块。服务端和客户端的信息传输都会通过 TLS 进行加密，所以传输的数据都是加密后的数据。</p> 
    <ul> 
     <li>ssl：SSL = Secure Sockets Layer 安全套接字协议</li> 
     <li>tls：TLS = Transport Layer Security，TLS 传输层安全</li> 
    </ul> </li> 
   <li> <p><strong>HTTPS与HTTP原理区别</strong></p> 
    <ul> 
     <li> <p><strong>HTTP 原理</strong></p> <p>① 客户端的浏览器首先要通过网络与服务器建立连接，该连接是通过TCP 来完成的，一般 TCP 连接的端口号是80。 建立连接后，客户机发送一个请求给服务器，请求方式的格式为：统一资源标识符（URL）、协议版本号，后边是 MIME 信息包括请求修饰符、客户机信息和许可内容 。</p> <p>② 服务器接到请求后，给予相应的响应信息，其格式为一个状态行，包括信息的协议版本号、一个成功或错误的代码，后边是 MIME 信息包括服务器信息、实体信息和可能的内容 。</p> </li> 
     <li> <p><strong>HTTPS 原理</strong></p> <p>① 客户端将它所支持的算法列表和一个用作产生密钥的随机数发送给服务器 ；</p> <p>② 服务器从算法列表中选择一种加密算法，并将它和一份包含服务器公用密钥的证书发送给客户端；该证书还包含了用于认证目的的服务器标识，服务器同时还提供了一个用作产生密钥的随机数 ；</p> <p>③ 客户端对服务器的证书进行验证（有关验证证书，可以参考数字签名），并抽取服务器的公用密钥；然后，再产生一个称作 pre_master_secret 的随机密码串，并使用服务器的公用密钥对其进行加密（参考非对称加 / 解密），并将加密后的信息发送给服务器 ；</p> <p>④ 客户端与服务器端根据 pre_master_secret 以及客户端与服务器的随机数值独立计算出加密和 MAC密钥（参考 DH密钥交换算法） ；</p> <p>⑤ 客户端将所有握手消息的 MAC 值发送给服务器 ；</p> <p>⑥ 服务器将所有握手消息的 MAC 值发送给客户端 。</p> </li> 
    </ul> </li> 
   <li> <p><strong>HTTPS的优缺点</strong></p> 
    <ul> 
     <li><strong>优点</strong> 
      <ol> 
       <li>使用 HTTPS 协议可认证用户和服务器，确保数据发送到正确的客户机和服务器 ；</li> 
       <li>HTTPS 协议是由 SSL+HTTP构建的可进行加密传输、身份认证的网络协议，要比 HTTP安全，可防止数据在传输过程中被窃取、改变，确保数据的完整性 。</li> 
       <li>HTTPS 是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本 [2]</li> 
      </ol> </li> 
     <li><strong>缺点</strong> 
      <ol> 
       <li>相同网络环境下，HTTPS 协议会使页面的加载时间延长近 50%，增加 10%到 20%的耗电。此外，HTTPS 协议还会影响缓存，增加数据开销和功耗 。</li> 
       <li>HTTPS 协议的安全是有范围的，在黑客攻击、拒绝服务攻击和服务器劫持等方面几乎起不到什么作用。</li> 
       <li>最关键的是，SSL 证书的信用链体系并不安全。特别是在某些国家可以控制CA根证书的情况下，中间人攻击一样可行。</li> 
       <li>成本增加。部署 HTTPS 后，因为 HTTPS 协议的工作要增加额外的计算资源消耗，例如 SSL 协议加密算法和 SSL 交互次数将占用一定的计算资源和服务器成本。在大规模用户访问应用的场景下，服务器需要频繁地做加密和解密操作，几乎每一个字节都需要做加解密，这就产生了服务器成本。随着云计算技术的发展，数据中心部署的服务器使用成本在规模增加后逐步下降，相对于用户访问的安全提升，其投入成本已经下降到可接受程度。</li> 
      </ol> </li> 
    </ul> </li> 
  </ul> 
  <h2>36、IE浏览器中的兼容</h2> 
  <ul> 
   <li><strong>1)图片有边框BUG</strong> 
    <ul> 
     <li>当图片加在IE上会出现边框</li> 
     <li>Hack:给图片加border:0;或者border:0 none;</li> 
    </ul> </li> 
   <li><strong>2)图片间隙</strong> 
    <ul> 
     <li>div中的图片间隙BUG</li> 
     <li>描述：在div中插入图片时，图片会将div下方撑大大约三像素。</li> 
     <li>hack1:将与写在一行上；</li> 
     <li>hack2:将转为块状元素，给添加声明：display:block;</li> 
    </ul> </li> 
   <li><strong>3) 双倍浮向（双倍边距）（只有IE6出现）</strong> 
    <ul> 
     <li>描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。</li> 
     <li>hack:给浮动元素添加声明：display:inline;</li> 
    </ul> </li> 
   <li><strong>4)默认高度（IE6、IE7）</strong> 
    <ul> 
     <li>描述：在IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）</li> 
     <li>hack1:给元素添加声明：font-size:0;</li> 
     <li>hack2：给元素添加声明：overflow:hidden;</li> 
    </ul> </li> 
   <li><strong>5)表单元素对齐不一致</strong> 
    <ul> 
     <li>描述：表单元素行高对齐方式不一致</li> 
     <li>hack:给表单元素添加声明：float:left;</li> 
    </ul> </li> 
   <li><strong>6)按钮元素默认大小不一</strong> 
    <ul> 
     <li>描述：各浏览器中按钮元素大小不一致</li> 
     <li>hack1： 统一大小/（用a标记模拟）</li> 
     <li>hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。</li> 
     <li>hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。</li> 
    </ul> </li> 
   <li><strong>7)鼠标指针bug</strong> 
    <ul> 
     <li>描述：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。</li> 
     <li>hack: 如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer</li> 
    </ul> </li> 
   <li><strong>8)透明属性</strong> 
    <ul> 
     <li>兼容其他浏览器写法：opacity:value;(value的取值范围0-1;<br> 例：opacity:0.5;)</li> 
     <li>IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100(整数)</li> 
    </ul> </li> 
  </ul> 
  <h2>37、iframe缺点</h2> 
  <ul> 
   <li>iframe类似于框架，可以在一个页面中嵌入别的页面。</li> 
   <li>缺点： 
    <ul> 
     <li>1.在一个页面中如果利用iframe嵌入了多个别的页面，不利于我们的管理</li> 
     <li>2.在一些小型设备比如手机上可能无法完全显示框架，兼容性不好</li> 
     <li>3.iframe是会阻塞页面的加载的，会影响到网页的加载速度。比如window的onload事件会在页面或者图像加载完成后立即执行，但是如果当前页面当中用了iframe了，那还需要把所有的iframe当中的元素加载完毕才会执行，这样就会让用户感觉网页加载速度特别慢，影响体验感。</li> 
     <li>4.代码复杂，不利于seo，现在的搜索引擎还不能很好的处理iframe当中的内容。</li> 
     <li>5.iframe框架会增加http的请求次数</li> 
    </ul> </li> 
  </ul> 
  <h2>38、假设div里面设置overflow:hidden，里面有select框，被遮住怎么办？</h2> 
  <ul> 
   <li>如果select框用的是原生的一般不会被遮住的。</li> 
   <li>如果用的是插件或者自己写的，那么可能会被遮住，他被遮住的原因就是因为父级元素div里面写了overflow:hidden，导致一旦超出这个盒子就会被隐藏掉，要想解决这个问题，那么我们可以改变这个下拉框的参照物，利用定位给他调整到指定的位置，利用z-index将层级提高，这样就不会受到父元素的限制了。</li> 
  </ul> 
  <h2>39、简述css中的不同盒模型的特性，以及应用，介绍box-sizing属性</h2> 
  <ul> 
   <li><strong>1.在css中盒模型分为2种：</strong> 
    <ul> 
     <li><strong>1）w3c标准盒子盒模型：</strong><br> 默认情况下我们使用的都是标准盒子模型，他的计算规则：<br> 元素的实际宽度=width+左右padding+左右border<br> 元素的实际高度=height+上下padding+上下border<br> width和height指的是内容区的宽度和高度，所以设置了内间距padding和边框线border之后盒子是会被撑大的。</li> 
     <li><strong>2）ie怪异盒子模型</strong><br> 在ie盒模型中width和height就是元素的实际宽度和高度<br> 计算规则：<br> 元素内容区的宽度=width-左右padding-左右border<br> 元素内容区的高度=height-上下padding-上下border<br> 设置padding和border会使内容区变小。</li> 
    </ul> </li> 
   <li><strong>2.我们可以通过box-sizing属性来更改盒子模型</strong> 
    <ul> 
     <li>如果box-sizing:content-box;这种模式是w3c标准盒模型</li> 
     <li>如果box-sizing:border-box;这种模式是ie怪异盒模型</li> 
    </ul> </li> 
  </ul> 
  <h2>40、简述jpg，gif，png-8，png-24的区别，及其各自的使用场景</h2> 
  <ul> 
   <li><strong>jpg：</strong> 
    <ul> 
     <li>1.不支持动画</li> 
     <li>2.有损耗</li> 
     <li>3.可以表达的颜色比价多，高达1600w之多，所以如果图片色彩丰富，适合用jpg</li> 
     <li>4.使用场景：色彩、细节丰富的图片、渐变图</li> 
    </ul> </li> 
   <li><strong>gif：</strong> 
    <ul> 
     <li>1.有透明性，可以是全透，也可以全不透，没有半透明，</li> 
     <li>2.支持动画格式。</li> 
     <li>3.无损耗，做任何操作都不会使图像质量产生损耗。</li> 
     <li>4.最多能表达256种颜色，如果色彩丰富、细节丰富的图片不建议保存成gif，</li> 
     <li>5.使用场景：色彩简单的log、icon、线框图、动图</li> 
    </ul> </li> 
   <li><strong>png：</strong> 
    <ul> 
     <li>1.有透明性，支持透明、不透明、半透明</li> 
     <li>2.不支持动画</li> 
     <li>3.无损耗</li> 
    </ul> </li> 
   <li>**png-8：**是256色的png，可以代替gif，同等质量下，尺寸也更小，但是不支持动画，所以没有办法完全替代gif，如果没有动画需求那可以采用png-8</li> 
   <li>**png-24：**是全色的png，和jpg一样能表达出丰富的色彩和细节，但不能替代jpg，因为存储下来png-24比jpg要大很多，但因为是无损耗的，所以比较适合源文件或者需要二次编辑图片</li> 
  </ul> 
  <h2>41、精灵图和base64如何选择</h2> 
  <p><strong>精灵图</strong>，是网页处图图片的一种方式，它是把多张小图整合到一张，利用background-position属性定位某个图片的位置，来达到在大图片中引用某个小图片的效果，当页面访问时，可以减少向服务器的yg有求次数，提高页面的加载速度。</p> 
  <p><strong>base64</strong>，是网络上最常见的用于传输8Bit字节代码的编码方式之一，将原本二进制形式转成以64个字符基本单位，所组成的一串字符串。base64的图片会随着html或者css一起下载到浏览器,减少了请求，避免跨域问题，但是低版本的IE浏览器不兼容，体积比原来的图片大，不利于css的加载，所以如果是图比较大，就用精灵图合并为一张大图，使用base64直接把图片编码成字符串写入CSS文件</p> 
  <h2>42、了解过音频、视频吗？知道视频新增了哪些属性吗？</h2> 
  <ul> 
   <li>音频 – audio</li> 
   <li>视频 – video 标签使用基本一致，在一个网页中插入视频或者是音频，多媒体标签在不同浏览器下情况不同，存在兼容性问题</li> 
   <li>谷歌浏览器把音频和视频标签的自动播放都禁止了，如果相自动播放，需要添加muted属性，</li> 
   <li>视频新增了 
    <ul> 
     <li>controls 控件</li> 
     <li>autoplay 自动播放，必须要和muted一起用</li> 
     <li>muted 静音</li> 
     <li>loop 循环</li> 
     <li>poster 视频的封面等属性</li> 
    </ul> </li> 
  </ul> 
  <h2>43、两栏布局</h2> 
  <p>实现两栏布局方法比较多，接下来说四种经常使用的方法</p> 
  <p><strong>方法一：浮动法加overflow:hidden</strong></p> 
  <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>side-left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>side-right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>                                                           <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">                                                                                   <span class="token selector">.side-left</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
    <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.side-right</span><span class="token punctuation">{</span>
    <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token punctuation">}</span>  
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
</code></pre> 
  <p><strong>方法二：定位法</strong></p> 
  <pre><code class="prism language-HTML"><div class="side-left"></div>
<div class="side-right"></div>                                                       <style>
.side-left{
   width: 200px; height:100%;
   position:absolute; left:0; top:0;
}
.side-right{
   margin-left:200px;
} 
</style>
</code></pre> 
  <p><strong>方法三：弹性盒子属性</strong></p> 
  <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wrap<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span>flex</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> 
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>side-left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>side-right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>            
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>                                                                                   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">                                                                                   <span class="token selector">.side-left</span><span class="token punctuation">{</span>
   <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.side-right</span><span class="token punctuation">{</span>
   <span class="token property">flex</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>  
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
</code></pre> 
  <p><strong>方法四：浮动+calc()</strong></p> 
  <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>side-left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>side-right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>                                                           <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">.side-left</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.side-right</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span><span class="token function">calc</span><span class="token punctuation">(</span>100% - 200px<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
</code></pre> 
  <h2>44、列举5种IE haslayout的属性及其值</h2> 
  <p><strong>haslayout</strong> ：是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用 了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout 属性值为true时，我们说这个元素有一个布局（layout）</p> 
  <pre><code>display:inline-block
position:absoult
zoom:任何值除了normal
min-height:任意值
min-width:任意值

ie7的
* min一height: (任意值)
* max一height: (除 none 外任意值)
* min一width: (任意值)
* max一width: (除 none 外任意值)
* overflow: (除 visible 外任意值)
* overflow一x: (除 visible 外任意值)
* overflow一y: (除 visible 外任意值)
* position: fixed
</code></pre> 
  <h2>45、浏览器标准模式和怪异模式之间的区别是什么？</h2> 
  <ul> 
   <li>**标准模式：**是浏览器按照W3C标准解析执行代码，这样用规定的语法去渲染，就可以兼容各个浏览器，保证以正确的形式展示网页。</li> 
   <li>**怪异模式：**是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。</li> 
   <li><strong>标准模式和怪异模式常见的区别：</strong> 
    <ul> 
     <li>**标准模式：**总宽度=width+margin(左右)+padding(左右)+border(左右)</li> 
     <li>**怪异模式：**总宽度=width+margin(左右)（width直接包括了padding(左右)+border(左右) ）</li> 
    </ul> </li> 
  </ul> 
  <h2>46、浏览器怎么解析html文件</h2> 
  <ul> 
   <li>渲染引擎的基本工作流程 
    <ul> 
     <li>解析HTML构建DOM树</li> 
     <li>渲染树构建</li> 
     <li>渲染树布局</li> 
     <li>绘制渲染树</li> 
    </ul> </li> 
   <li>渲染引擎会解析HTML文档并把标签转换成内容树中的DOM节点。它会解析style元素和外部文件中的样式数据。样式数据和HTML中的显示控制将共同用来创建另一棵树——渲染树。渲染引擎会尝试尽快的把内容显示出来。它不会等到所有HTML都被解析完才创建并布局渲染树。它会在处理后续内容的同时把处理过的局部内容先展示出来。</li> 
  </ul> 
  <h2>47、流式布局rem vm/vh px em的区别</h2> 
  <ul> 
   <li><strong>rem</strong> 
    <ul> 
     <li>rem是相对于根元素 html，这样就意味着，我们只需要在根元素确定一个font-size字号，则可以来算出元素的宽高</li> 
    </ul> </li> 
   <li><strong>px</strong> 
    <ul> 
     <li>px意为像素 , 是设备或者图片最小的一个点，比如常常听到的电脑像素是1920x1080的，表示的是水平方向是1920个像素点，垂直方向是1080个像素点。是我们网页设计常用的单位，也是基本单位。通过px可以设置固定的布局或者元素大小，缺点是没有弹性。</li> 
    </ul> </li> 
   <li><strong>em</strong> 
    <ul> 
     <li>参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身的font-size来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。<br> 特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小。</li> 
    </ul> </li> 
   <li><strong>vw/vh</strong> 
    <ul> 
     <li>vw view width的简写，是指可视窗口的宽度。假如可视区域宽度是1920px的话。那1vw = 1920px/100 = 19.2px</li> 
     <li>vh view height的简写，是指可视窗口的高度。假如可视区域宽度是1080px的话。那1vh = 1080px/100 = 10.8px</li> 
    </ul> </li> 
   <li><strong>vm</strong> 
    <ul> 
     <li>相对于视口的宽度或高度中较小的那个。最小的那个被均分为100单位的 vm</li> 
     <li>例如： 浏览器高度900px，宽度1200px，取最小的浏览器高度，1vm = 900px / 100 = 9px。</li> 
    </ul> </li> 
  </ul> 
  <h2>48、媒体查询是什么</h2> 
  <p><strong>媒体查询</strong>：是可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。</p> 
  <p><strong>媒体查询的基本语法如下：</strong></p> 
  <pre><code>@media 媒体设备 and (min-width:300px){
    选择器{
        属性：值；
    }
}
@media 表示媒体查询
screen 表示查询设备；媒体设备是个变量，在什么设备下就使用什么值  
	speech 阅读设备 all所有设备 screen 电脑手机平板
and 链接符号；并列条件
（屏幕条件）
max-width：230px 在230px以下的尺寸中。使用媒体样式。
min-width：230px 表示在大于230px尺寸中使用媒体样式。
</code></pre> 
  <h2>49、能够设置文本加粗的样式属性是什么</h2> 
  <p>加粗属性为 font-weight:属性值; 效果为加粗的值有 bold bolder 600 700 800 900</p> 
  <h2>50、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?经常遇到的兼容性有哪些，原因，解决方法是什么？</h2> 
  <ul> 
   <li> <h5>主要测试的浏览器有 :</h5> 
    <ul> 
     <li>IE,Mozilla,Opera ,Safari ,谷歌</li> 
    </ul> </li> 
   <li> <h5>浏览器的内核</h5> 
    <ul> 
     <li>Trident内核：IE搜狗浏览器等</li> 
     <li>Gecko内核：Mozilla等</li> 
     <li>Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]</li> 
     <li>Webkit内核：Safari,谷歌(旧版)等。</li> 
     <li>Blink : 谷歌(28及以后版本) opera</li> 
    </ul> </li> 
   <li> <h5>兼容新及解决方法</h5> 
    <ul> 
     <li><strong>1)图片有边框BUG</strong> 
      <ul> 
       <li>当图片加在IE上会出现边框</li> 
       <li>Hack:给图片加border:0;或者border:0 none;</li> 
      </ul> </li> 
     <li><strong>2)图片间隙</strong> 
      <ul> 
       <li>div中的图片间隙BUG</li> 
       <li>描述：在div中插入图片时，图片会将div下方撑大大约三像素。</li> 
       <li>hack1:将与写在一行上；</li> 
       <li>hack2:将转为块状元素，给添加声明：display:block;</li> 
      </ul> </li> 
     <li><strong>3) 双倍浮向（双倍边距）（只有IE6出现）</strong> 
      <ul> 
       <li>描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。</li> 
       <li>hack:给浮动元素添加声明：display:inline;</li> 
      </ul> </li> 
     <li><strong>4)默认高度（IE6、IE7）</strong> 
      <ul> 
       <li>描述：在IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）</li> 
       <li>hack1:给元素添加声明：font-size:0;</li> 
       <li>hack2：给元素添加声明：overflow:hidden;</li> 
      </ul> </li> 
     <li><strong>5)表单元素对齐不一致</strong> 
      <ul> 
       <li>描述：表单元素行高对齐方式不一致</li> 
       <li>hack:给表单元素添加声明：float:left;</li> 
      </ul> </li> 
     <li><strong>6)按钮元素默认大小不一</strong> 
      <ul> 
       <li>描述：各浏览器中按钮元素大小不一致</li> 
       <li>hack1： 统一大小/（用a标记模拟）</li> 
       <li>hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。</li> 
       <li>hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。</li> 
      </ul> </li> 
     <li><strong>7)鼠标指针bug</strong> 
      <ul> 
       <li>描述：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。</li> 
       <li>hack: 如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer</li> 
      </ul> </li> 
     <li><strong>8)透明属性</strong> 
      <ul> 
       <li>兼容其他浏览器写法：opacity:value;(value的取值范围0-1;<br> 例：opacity:0.5;)</li> 
       <li>IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100(整数)</li> 
      </ul> </li> 
    </ul> </li> 
  </ul> 
  <h2>51、padding-top: 50%的效果，margin-top: 50%的效果</h2> 
  <ul> 
   <li> <p>padding-top:50%;的效果是 基于父元素宽度的一半</p> </li> 
   <li> <p>margin-top:50%;的效果:在没有出现垂直外边距重合与溢出的情况下分为两种情况:</p> 
    <ul> 
     <li>情况一: 当是两个并列元素中添加margin-top:50%;是距离是浏览器宽度的一半</li> 
     <li>情况二:当是嵌套元素中子元素添加了margin-top:50%; 是子元素距离父元素高度的一半</li> 
    </ul> </li> 
  </ul> 
  <h2>52、前端页面由哪三层构成，分别是什么，作用是什么</h2> 
  <ul> 
   <li><strong>HTML (结构)</strong> : 超文本标记语言, 由 HTML 或 xhtml之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。</li> 
   <li><strong>CSS (表现)</strong> : 层叠样式表 , 由css负责创建。css对“如何显示有关内容”的问题做出了回答。</li> 
   <li><strong>JS (行为)</strong> : 客户端脚本语言 , 内容应该如何对事件做出反应</li> 
  </ul> 
  <h2>53、请按照如下布局在pc端实现html和css样式</h2> 
  <pre><code>要求如下:
a)A区域是header部分，高度100像素，宽度根据屏幕自适应，居顶部展示
b)B区域固定宽度200像素，居左侧展示
d)D区域固定宽度200像素，居右侧展示。
e)E区域高度80像素，宽度自适应，当整体内容不够满屏展示，E居屏幕底部展示。
f)当整体内容超出屏幕高度，出现垂直滚动
</code></pre> 
  <pre><code class="prism language-html"><span class="token comment"><!--结构：--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>outer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>b<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>d<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span>e<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token comment"><!--样式部分：--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
    <span class="token selector">*</span><span class="token punctuation">{</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">header</span><span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.left</span><span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> slateblue<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.right</span><span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> springgreen<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">footer</span><span class="token punctuation">{</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> tomato<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.outer</span><span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 100vw<span class="token punctuation">;</span>
        <span class="token property">min-height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span>
        <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
        <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>

    <span class="token punctuation">}</span>
    <span class="token selector">main</span><span class="token punctuation">{</span>
        <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
        <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
        <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
</code></pre> 
  <h2>54、清除浮动</h2> 
  <p>浮动带来的影响：浮动之后，后面的元素会上去补位置；导致父元素的高度降低，这种情况被称为：高度塌陷解决高度塌陷方法如下：</p> 
  <pre><code>前情描述:父元素不设置高度,子元素有自己的高度,当给前面的子元素添加浮动之后,后面的子元素会上去补位置,补位完成之后,父元素的的高度会降低。这种情况被称之为高度塌陷
</code></pre> 
  <pre><code>情况1：父元素添加高度
</code></pre> 
  <pre><code>情况2：给后面的子元素添加清楚浮动，不上去补位置，clear：both
</code></pre> 
  <pre><code>情况3：如果只有一个子元素，添加浮动之后，父元素高度就会降低为0
	如何解决高度塌陷：
		给父元素添加oveflow:hidden
		给浮动子元素后面悄悄的补一个元素,然后给这个补位元素,清除浮动,
		记住:补位元素必须是一个块级元素,行内元素清楚不了浮动
</code></pre> 
  <pre><code class="prism language-CSS">/*情况4:万能清除法*/
	.box:after{
		content:"铁牛最帅";
		display:block;
		clear:both;
		/*如果上面的content没有文本的话则下面的代码可以省略*/
		width:0px;
		height:0px;
		overflow:hidden;
		visibility:hidden;
		font-size:0px;
	}
</code></pre> 
  <h2>55、请戳出ie6/7下特有的cssbug</h2> 
  <ul> 
   <li>li边距“无故” 增加 设置ul的显示形式为display:inline一block;即可，前面加是只 针对IE6/IE7有效</li> 
   <li>IE6 不支持min-height属性，但它却认为height就是最小高度 使用ie6不支持但其余浏览器支持的属性!important。</li> 
   <li>Overflow: 在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。</li> 
   <li>border：none 在IE6不起作用： 写成border：0 就可以了 五:100%高度 在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义 height:100%;。</li> 
   <li>双边距 Bug 当元素浮动时，IE6会错误的的把浮动方式的margin值双倍计算，给float的元素添加一个display：inline</li> 
   <li>躲猫猫bug 定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。 1.在（那个未浮动的）内容之后添加一个<span style=”clear: both;”> 2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;</li> 
   <li>IE6 绝对定位的元素1px 间距bug 当绝对定位的父元素或宽度为奇数时，bottom和right会多出现1px， 解决方案，针对IE6进行hack处理</li> 
  </ul> 
  <h2>56、请写出XHTML和css如何注释</h2> 
  <pre><code>HTML注释：<!--    -->   快捷键  ctrl+/
CSS注释：/*   */    快捷键  ctrl+/
</code></pre> 
  <h2>57、请写出至少20个HTML5标签</h2> 
  <pre><code>header——标记头部区域的内容（用于整个页面或页面中的一块区域）
footer——标记脚部区域的内容（用于整个页面或页面中的一块区域）
section——Web页面中的一块区域
article——独立的文章内容
aside——相关内容或者引文
nav——导航类辅助内容
main----主要内容区域
figure----独立的文档流区域
figcaption---独立文档流区域标题
time------时间标签
mark-----着重标记,默认高亮背景变黄
audio-----音频
video-----视频
canvas----绘图
datalist---模拟虚拟搜索列表  
output---- 输出框
var------倾斜标签
meter----标签来显示该给定范围内的数据
progress--标签显示某个任务完成的进度的指示器
time------标签用来表示HTML网页中出现的日期和时间
</code></pre> 
  <h2>58、rem布局字体太大怎么处理？</h2> 
  <p>可以紧接着在body标签内设置一个字体大小为该应用的基本字体大小,例如给body设置{font-size:0.5rem;},文本大小属性可以继承,这样的话就可以让页面中所有的文本变小</p> 
  <h2>59、rem的原理，如何做一个能自动根据手机大小不同，自动配置rem的功能</h2> 
  <ul> 
   <li>rem的原理，如何做一个能自动根据手机大小不同，自动配置rem的功能<br> rem是root em 的简写 ,是根据根元素的字号大小进行的,它是CSS3中新增加的一个尺寸（度量）单位，根节点（html）的font-size决定了rem的尺寸，也就是说它是一个相对单位，相对于(html),浏览器的默认的font-size是16px，1rem默认就等于16px。<br> 因为不同手机型号的屏幕大小都不同，所以这时候我们就不能用px来做单位，rem是适配不同手机屏幕的一种方案,设置根元素的font-size来改变rem尺寸<br> 假如 html{font-size:20px;} .box{width:1rem;height:1rem;background:red;}将根元素html的font-size设置为20px，此时box的宽高都为20px，也就是1rem = 20px<br> 如果用1rem=20px去写页面，那么即使所有的单位换成了rem，依旧还是最终相对于px，没有意义,还是px,不会根据手机大小进行适配,想要做一个能自动根据手机大小不同，自动配置rem的功能</li> 
   <li>方法1:利用js动态获取实现<br> 首先用js根据不同的视窗宽度动态的改变根元素的font-size ```//获取视窗宽度（兼容性写法） let rootWidth = document.documentElement.clientWidth || document.body.clientWidth;</li> 
  </ul> 
  <p>//获取html元素<br> let rootDom = document.querySelector(‘html’);</p> 
  <p>//动态设置html的font-size（除以10是让浏览器的font-size达到比较合适目的）<br> rootDom.style.fontSize = rootWidth / 10 + ‘px’;</p> 
  <ul> 
   <li>方法2:根元素的font-size:某某vw;<br> 前面说了如果用1rem=20px去写页面，那么即使所有的单位换成了rem，依旧还是最终相对于px，没有意义,还是px,不会根据手机大小进行适配,想要做一个能自动根据手机大小不同，自动配置rem的功能，所以此时就需要把html{font-size：？px；}这里的单位px换成一个其他的相对单位，如果想要书写QQ音乐或者网易新闻这样的页面，他们是会随着窗口变化而变化的，所以需要换的这个单位得是一个相对于窗口变化的单位，此时就需要引入一个新单位vw v是viewport w是width vw就是一个相对于视口宽度的单位 满屏的时候是100vW，固html设置font-size的时候，单位就可采用vw，但是现在就面临一个问题 font-size：？vw；多少合适回到页面书写的时候，UI设计师给的数据单位是px，而我们页面书写想用rem，但是rem是相对于根元素html，html需要设置的font-size的单位是vw？此时就需要知道px rem vw这3个单位之间的换算px rem vw这3个单位之间的换算已知：1rem=16px 满屏是100vw 假如当前设备是iPhone6，那么此时100vw=375pxtodo 1rem=16px 100vw=375px —》 1rem=16px 1vw=3.75px 1rem=16px=4.26667vw依次类推，可以假设1rem=100px 假设当前设备是iPhone6，那么此时100vw=375pxtodo 1rem=100px 100vw=375px —》 1rem=100px 1vw=3.75px 1rem=100px=26.6667vw依次类推，可以假设1rem=120px 假设当前设备是iPhone6，那么此时100vw=375pxtodo 1rem=120px 100vw=375px —》 1rem=120px 1vw=3.75px 1rem=120px=32vw依次类推，可以假设1rem=100px 假设当前设备是iPhone6plus，那么此时100vw=414pxtodo 1rem=100px 100vw=414px —》 1rem=100px 1vw=4.14px 1rem=100px=24.15vw 以上只要比例换算是相等的都可以，但是前面2个的换算都是除不尽四舍五入来的，想要保证数据的准确度，建议采用1rem=120px=32vw这个比例假如现在在750的设计图上，ps测量上的文字大小是90px，因为dpr是2，所以此时书写px就是45px，把45px转换成rem，根据1rem=120px这个比例，最终代码书写font-size:0.375rem（45px/120px）; 其实就相对于是90/2/120 90/240 这样口算很麻烦，可以在vscode上安装插件 px to rem 插件 设置一下转换比例即可 转换的快捷键是 alt+Z ，设置转换比例为240最终代码书写的时候，需要给html{font-size：32vw;} 假如测量文字大小是90px，代码书写font-size：90px按一下alt+Z，结果就是font-size: 0.38rem;假设现在的设计图是750的，想要用1rem=100px=26.6667vw比例换算，假如ps测量的高度是100px，请问此时书写height：？rem；<br> 过程：因为设计图是750的，所以此时dpr是2 如果写px，那么100px此时写成50px但是最终想要用rem写 已知1rem=100px 所以 此时的50px 写成rem就是 0.5rem 。假设现在的设计图是1242的，想要用1rem=100px=24.15vw比例换算，假如ps测量的高度是90px，请问此时书写height：？rem；，过程：因为设计图是1242的，所以此时dpr是3 如果写px，那么90px此时写成30px，但是最终想要用rem写 已知1rem=100px 所以 此时的30px 写成rem就是 0.3rem</li> 
  </ul> 
  <h2>60、语义化的理解？有哪些语义化标签，有什么作用！</h2> 
  <pre><code>语义化:顾名思义,见名知意,通过明智知道意思;
在HTML5里面为了方便我们的开发,W3C为我们提供了大量的语义化标签,
通过这些语义化标签能够清楚的了解区块的功能,也能让页面的结构更加的简化避免起类名和id名字
HTML5新增的语义化标签有
header——标记头部区域的内容（用于整个页面或页面中的一块区域）
footer——标记脚部区域的内容（用于整个页面或页面中的一块区域）
section——Web页面中的一块区域
article——独立的文章内容
aside——相关内容或者引文
nav——导航类辅助内容
main----主要内容区域
figure----独立的文档流区域
figcaption---独立文档流区域标题
time------时间标签
mark-----着重标记,默认高亮背景变黄
audio-----音频
video-----视频
canvas----绘图
datalist---模拟虚拟搜索列表
</code></pre> 
  <h2>61、怎么实现多重边框</h2> 
  <ul> 
   <li> <p>**方法1:**利用描边(outline)属性==实现双重</p> <pre><code class="prism language-CSS">/**案例:**/
.borders {
      border: solid 6px #fff;
      outline: solid 6px #888;  
}
</code></pre> </li> 
   <li> <p>**方法2:**使用边框样式为double</p> <pre><code class="prism language-CSS">/*案例:*/
.box{
      border:10px dashed gray;
}
</code></pre> </li> 
   <li> <p>**方法3:**利用额外的DIV外层多嵌套几层div</p> </li> 
   <li> <p>**方法4:**利用伪元素（:before）的方式实现双重边框,但是属于CSS中的hack问题,不推荐使用</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>borders base<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>利用伪元素实现双重边框<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
 <span class="token selector">.borders</span> <span class="token punctuation">{</span>
     <span class="token property">border</span><span class="token punctuation">:</span> solid 6px #fff<span class="token punctuation">;</span>
     <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
 <span class="token selector">.borders:before</span> <span class="token punctuation">{</span>
     <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
     <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
     <span class="token property">top</span><span class="token punctuation">:</span> -12px<span class="token punctuation">;</span>
     <span class="token property">left</span><span class="token punctuation">:</span> -12px<span class="token punctuation">;</span>
     <span class="token property">right</span><span class="token punctuation">:</span> -12px<span class="token punctuation">;</span>
     <span class="token property">bottom</span><span class="token punctuation">:</span> -12px<span class="token punctuation">;</span>
     <span class="token property">border</span><span class="token punctuation">:</span> solid 6px #888<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
 <span class="token selector">.base</span> <span class="token punctuation">{</span>
     <span class="token property">background</span><span class="token punctuation">:</span> #222<span class="token punctuation">;</span>
     <span class="token property">padding</span><span class="token punctuation">:</span> 4rem 2rem<span class="token punctuation">;</span>
     <span class="token property">color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span>
     <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
     <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
     <span class="token property">margin</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
</code></pre> </li> 
   <li> <p>**方法5:**使用box-shadow阴影实现对应的多边框效果</p> </li> 
   <li> <p>**方法6:**使用多背景属性:background:url1() no-repeat,url2() no-repeat,url3() no-repeat</p> </li> 
  </ul> 
  <h2>62、怎么实现三角形</h2> 
  <pre><code class="prism language-HTML"><div></div>
<style>
    div{
        /*为啥使用行内块元素,因为这样能与前面文本横向排列,避免浮动*/
        display:inline-block;
        width:0px;
        height:0px;
        border:10px solid transparent;
        border-top:10px solid red
    }
</style>
</code></pre> 
  <h2>64、css选择器提取a标签中的href</h2> 
  <p>CSS 当中可以通过 attr() 来获取，比如显示所有链接的 href：</p> 
  <pre><code class="prism language-css"><span class="token selector">a:after</span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" ("</span> <span class="token function">attr</span><span class="token punctuation">(</span>href<span class="token punctuation">)</span> <span class="token string">")"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
  <h2>64、rem怎么做适配，em是根据什么来决定的？</h2> 
  <ul> 
   <li><strong>rem</strong>是root 和 em的结合，root是指根元素HTML，em是指父元素字号的倍数，所以rem就是指根元素字号的倍数，如果我们把页面中的元素单位都转换成rem，那么他们的大小就会随着根子号变化而变化，如果根子号的大小可以随着视口大小变化而变化，那么我们页面中的元素尺寸就可以实现适配效果了，如果想实现根字号随着视口变化，那就需要用到一个单位vw，vw是视口宽的1%，根据当前设计稿可以换算出1vw是多少个px，然后再利用他们之间的比例关系，把根字号的px单位转换成vw，那么根字号就可以随着视口变化而变化了，页面中的元素也就会随着视口变化而变化了。</li> 
   <li><strong>em</strong>这个单位具体要看你用在什么属性上，如果是用在字号上面，那么他参照的就是父元素字号的倍数，如果用在其他属性上，比如width,height,text-indent那么它参照的就是当前元素字号的倍数</li> 
  </ul> 
  <h2>65、如何居中一个浮动元素</h2> 
  <p>单纯的浮动元素其实不是很好居中的，除非你再给他嵌套一个盒子，那这也就不是给浮动盒子居中了；要么就是加相对定位进行辅助，具体代码如下：</p> 
  <ul> 
   <li> <p>方法一：嵌套一个父盒子</p> <pre><code class="prism language-CSS">.container{width:200px;margin:0 auto;}  /*设置父盒子的宽度和子盒子一样就可以了*/
.container .inner{width:200px; float:left}
</code></pre> </li> 
   <li> <p>方法二：利用相对定位</p> <pre><code class="prism language-CSS">.box{width:200px;float:left; position:relative;left:50%; margin-left:-100px}
</code></pre> </li> 
  </ul> 
  <h2>66、如何实现一个自适应div，宽高比始终为4:3</h2> 
  <ul> 
   <li>如果想实现一个元素的宽高比例固定，那么就需要让他们参照同一个参照物，宽高本身是两个方向的，各自参照自己的父元素，所以不太好实现，那么就需要转换思维了，大家都知道我们的padding margin 如果设置了百分数，他们不论是哪个方向参照的都是父盒子的width，所以我们可以这样来做：</li> 
   <li>父盒子{position:relative;width:100%;padding-top:75%;height:0;}<br> 子盒子{position:absolute;top:0;bottom:0; left:0;right:0}</li> 
   <li>用padding来模拟父元素的高度，子元素设置绝对定位，四个方向都设置为0，就会把宽高拉伸开，那么他的宽高就会一直保持比例为4:3了</li> 
  </ul> 
  <h2>67、设置元素显示隐藏的几种方式，与区别？</h2> 
  <p>常见隐藏元素的方法有opacity:0; visibility:hidden; display:none; transform:scale(0);height:0px;<br> 他们之间的区别是：</p> 
  <p>opacity：0; 是把透明度设置为0，但是这个元素还是真实存在的，只是看不见了而已，他在页面中依然占位，所有的点击事件也都是可以触发的；</p> 
  <p>visibility:hidden; 他在页面中的效果和opacity：0；有一点相似，他也是看不见的，并且在页面中依然占位，但是不同的是它不能够触发点击事件；</p> 
  <p>display：none；和他们就不一样了，它属于是完全删除的状态，相当于不存在于页面当中了，因此它不占位，也不能触发点击事件。</p> 
  <p>transform:scale(0);使用缩放,按照x和y的中心位置进行缩小占位置</p> 
  <p>height:0px;的时候不占页面空间如果元素中有文本的话需要给元素添加oveflow:hidden;font-size:0px</p> 
  <h2>68、实现垂直居中的几种方法，不知道宽高的情况下如何实现元素水平垂直居中？</h2> 
  <ul> 
   <li> <p><strong>实现垂直居中的几种方式</strong>：</p> 
    <ul> 
     <li>1.单行文本垂直居中：当此标签高度和行高的值相等时；</li> 
     <li>2.定位： 父元素{position:relative;} 子元素{position:absolute;top:50%;margin-top:-高度的一半；}</li> 
     <li>3.定位： 父元素{position:relative;} 子元素{position:absolute;top:0;bottom:0;margin:auto;}</li> 
     <li>4.定位： 父元素{position:relative;} 子元素{position:absolute;top:50%;transform:translateY(-50%);}</li> 
     <li>5.弹性盒：父元素{display:flex;align-items:center;}</li> 
    </ul> </li> 
   <li> <p> <strong>不知道宽高的情况下如何实现元素水平垂直居中</strong>:</p> 
    <ul> 
     <li> <p>1.定位： 父元素{position:relative;}</p> <p> 子元素{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}</p> </li> 
     <li> <p>2.定位： 父元素{position:relative;}</p> <p> 子元素{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}</p> </li> 
     <li> <p>3.弹性盒： 父元素{display:flex;} 子元素{margin:auto;}</p> </li> 
     <li> <p>4.弹性盒： 父元素{display:flex;justify-content:center;align-items:center;}</p> </li> 
    </ul> </li> 
  </ul> 
  <h2>69、双飞翼布局跟圣杯布局</h2> 
  <ul> 
   <li>圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。</li> 
   <li>圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：</li> 
   <li>圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。</li> 
   <li>双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。多了1个div，少用大致4个css属性（圣杯布局中间divpadding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；</li> 
   <li>而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2 =4），个人感觉比圣杯布局思路更直接和简洁一点。简单说起来就是”双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了“，而不是你题目中说的”去掉relative"就是双飞翼布局“</li> 
   <li>注意：实际开发的时候双飞翼圣杯布局实际就是两栏或者是三栏布局,为了提高开发效率可以选择直接使用弹性盒子直接实现也是非常高效的</li> 
  </ul> 
  <h2>70、说说移动端Web分辨率</h2> 
  <ul> 
   <li>分辨率有两种，分别是屏幕分辨率和图像分辨率。 
    <ul> 
     <li><strong>屏幕分辨率</strong>：是指一个屏幕上可以显示多少信息，通常以像素为单位来衡量。例如，分辨率1920 ×1080表示水平方向含有1920个像素，垂直方向含有1080个像素，两者相乘可知，屏幕上总共有2 073 600个像素点。在屏幕的大小相同的情况下，如果屏幕的分辨率低（如640 ×480），则屏幕上显示的像素少，单个像素尺寸比较大，看起来会有种颗粒感；如果屏幕的分辨率高（如1920 ×1080），则屏幕上显示的像素多，单个像素尺寸比较小，看起来会比较清晰。</li> 
     <li><strong>图像分辨率</strong>，在同一台设备上，图片的像素点和屏幕的像素点通常是一一对应的。图片的分辨率越高，图片越清晰；图片的分辨率越低，图片越模糊。例如，一张图片分辨率是500 ×200，这就表示这张图片在屏幕上按1:1显示时，水平方向有500个像素点（色块），垂直方向有200个像素点（色块）。</li> 
    </ul> </li> 
  </ul> 
  <h2>71、table了解多少</h2> 
  <p>在网页发展的初期，会用表格来实现网页布局，但这种布局方式会让网页出现很多问题，逐渐不再用于网页布局结构中，现在表格标签一般用于数据展示。而且在公司项目开发中，很多都不是直接使用table，而是使用ui组件库中封装了的表格，比如el-table。table表格中常用的标签有tr/td/th/caption等等。table布局作为基础的内容就类似于生活整的基础设施一样虽然使用频率低，但是不会被淘汰</p> 
  <h2>72、谈谈flex布局，你知道flex:110吗</h2> 
  <ul> 
   <li> <p><strong>flex布局</strong>：弹性盒布局（形成弹性盒后可以控制子元素在父级元素中排列位置）</p> </li> 
   <li> <p>**flex：**1 1 0 是由 flex-grow:1 flex-shrink:1 flex-basis:0复合而成 也可以简写为flex：1</p> <p>表示占据主轴上剩下的空间 当子级内容超出的时候会将当前区域撑大</p> </li> 
   <li> <p><strong>flex-grow</strong>默认值为0，当值大于0时，当父元素有剩余空间时当前元素放大，父元素没有剩余空间时，该元素不放大。</p> </li> 
   <li> <p><strong>flex-shrnk</strong>默认值为1，父元素有剩余空间时，该元素不缩小，父元素没有剩余空间时，该元素缩小。</p> </li> 
   <li> <p><strong>flex-basis</strong>相当于width属性。</p> </li> 
  </ul> 
  <h2>73、弹性盒有哪些属性是在父元素身上?那些在子元素身上?你知道flex-grow吗</h2> 
  <ul> 
   <li> <p>添加在父级元素上的属性：</p> 
    <ul> 
     <li>1.flex-direction 设置弹性盒的主轴方向</li> 
     <li>2.justify-content 设置主轴上的对齐方式</li> 
     <li>3.align-items:设置侧轴上的对齐方式</li> 
     <li>4.flex-wrap:设置弹性盒中默认换行</li> 
     <li>5.justify-content:换行之间行与行之间的间距设置</li> 
    </ul> </li> 
   <li> <p>添加在子级元素上的属性</p> 
    <ul> 
     <li>1.align-self：设置单个元素在侧轴上的对齐方式</li> 
     <li>2.order:设置元素的排序优先级</li> 
     <li>3.flex:1 占据主轴上剩下空间</li> 
    </ul> </li> 
  </ul> 
  <h2>74、谈一下怎么实现一个椭圆,使用css</h2> 
  <ul> 
   <li>使用border-radius属性 属性值可以设置一个/两个/三个/四个/八个 以下是两种方法实现椭圆 
    <ul> 
     <li>第一种: width: 250px; height: 150px;background: #FFD900;border-radius: 50%</li> 
     <li>第二种: width: 250px; height: 150px;background: #FFD900;border-radius: 50% / 100% 100% 0 0;</li> 
    </ul> </li> 
  </ul> 
  <h2>75、脱离布局流有几种方法？</h2> 
  <ul> 
   <li>常见的有浮动和定位 
    <ul> 
     <li>第一种:浮动布局（float）浮动一般用于让块级元素排成一行在同一行显示任何元素都可浮动，如一个元素设置为浮动元素，浮动元素无论最初是什么都会变成一个行块级元素，拥有disolay：inline-block属性</li> 
     <li>第二种:定位布局(position) 定位中的absolute绝对定位可以让元素脱离文档流的 如果父级有定位属性就相对于父级定位 如果父级没有就会一直往上级查找直至浏览器</li> 
    </ul> </li> 
   <li>脱离文档流布局的缺点初始位置不存在就会破坏网页布局</li> 
  </ul> 
  <h2>76、伪类伪元素区别</h2> 
  <ul> 
   <li>**相同点：**都是属于选择器中的一种，能实现对于页面元素的修饰</li> 
   <li><strong>不同点：</strong> 
    <ul> 
     <li>**1、概念不同：**伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的；例如鼠标的悬停效果；伪元素：用于创建一些不在DOM树中的元素，并为其添加样式；例如：先前向后插入元素内容等等</li> 
     <li>**2、使用方法不同：**css3规范中要求使用双冒号（::）表示伪元素，以此来区分伪类和伪元素，比如::before和::after等伪元素使用双冒号（::），:hover和:active伪类使用单冒号（:）目前来看有一部分浏览器为了达到一个更好的兼容性的问题，我们的双冒号也可以写成单冒号；但是在一些低版本浏览器里面有些时候还是需要使用双冒号的</li> 
    </ul> </li> 
  </ul> 
  <h2>77、为什么无法定义1px左右高度的容器</h2> 
  <p>高版本浏览器里面是能够定义1px的高度的容器的<br> 但是由于浏览器的版本和浏览器的内核不一样导致低版本浏览器中的兼容性不一样<br> 在低版本 IE6浏览器下面,容易出现这个问题,产生问题的原因是因为默认的行高造成的,<br> 解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px</p> 
  <h2>78、现在想调节—下父元素的透明度，但是又不影响子元素的透明度，怎么破？</h2> 
  <ul> 
   <li><strong>原因分析：</strong> 
    <ul> 
     <li>使用css的opcity属性改变某个元素的透明度，但是其元素下的子元素的透明度也会被改变，即便重定义也没有用，不过有个方法可以实现，大家可以看看。<br> 可以使用一张透明的图片做背景可以达成效果，但是有没有更简单的方法呢？使用 RGBA。</li> 
    </ul> </li> 
   <li><strong>例如：</strong> 
    <ul> 
     <li>设置父元素opacity：0.5，子元素不设置opacity，子元素会受到父元素opacity的影响，也会有0.5的透明度。<br> 即使设置子元素opacity：1，子元素的opacity：1也是在父元素的opacity：0.5的基础上设置的，因此子元素的opacity还是0.5。</li> 
    </ul> </li> 
   <li><strong>解决方法：</strong> 
    <ul> 
     <li>为父元素设置background: rgba(0,0,0,0.5)。</li> 
    </ul> </li> 
  </ul> 
  <h2>79、有没有了解过box-sizing，除了border-box还用过哪些，有没有用过其他的box-sizing的属性值属性</h2> 
  <ul> 
   <li>box-sizing从本质角度触发，他控制盒子大小的尺寸，在这里里面他有两个取值经常被使用 
    <ul> 
     <li>1、box-sizing:content-box;content-box可以理解成计算盒子大小的时候从内容区域开始进行计算,也就是计算的时候按照标准盒子模型进行计算;遵循W3C官方盒子模型的计算方法<br> 如果是不携带box-sizing这个属性的话,盒子模型的大小计算仍然按照标准盒子模型进行计算因为content-box是box-sizing属性的默认值</li> 
     <li>2、box-sizing:border-box;border-box可以理解成计算盒子大小的时候从边框区域进行计算,也就是按照怪异盒子模型的标准进行计算,遵循的是ie怪异盒子的标准,通过box-sizing:border-box能够改变盒子模型的计算方法</li> 
    </ul> </li> 
  </ul> 
  <h2>80、语义化的理解？有哪些语义化标签，有什么作用！</h2> 
  <pre><code>语义化:顾名思义,见名知意,通过名字知道意思;
在HTML5里面为了方便我们的开发,W3C为我们提供了大量的语义化标签,
通过这些语义化标签能够清楚的了解区块的功能,也能让页面的结构更加的简化避免起类名和id名字
HTML5新增的语义化标签有
header——标记头部区域的内容（用于整个页面或页面中的一块区域）
footer——标记脚部区域的内容（用于整个页面或页面中的一块区域）
section——Web页面中的一块区域
article——独立的文章内容
aside——相关内容或者引文
nav——导航类辅助内容
main----主要内容区域
figure----独立的文档流区域
figcaption---独立文档流区域标题
time------时间标签
mark-----着重标记,默认高亮背景变黄
audio-----音频
video-----视频
canvas----绘图
datalist---模拟虚拟搜索列表
</code></pre> 
  <h2>81、怎么实现多重边框</h2> 
  <ul> 
   <li> <p>**方法1:**利用描边(outline)属性==实现双重</p> <pre><code class="prism language-CSS">/**案例:**/
.borders {
      border: solid 6px #fff;
      outline: solid 6px #888;  
}
</code></pre> </li> 
   <li> <p>**方法2:**使用边框样式为double</p> <pre><code class="prism language-CSS">/*案例:*/
.box{
      border:10px dashed gray;
}
</code></pre> </li> 
   <li> <p>**方法3:**利用额外的DIV外层多嵌套几层div</p> </li> 
   <li> <p>**方法4:**利用伪元素（:before）的方式实现双重边框,但是属于CSS中的hack问题,不推荐使用</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>borders base<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>利用伪元素实现双重边框<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
 <span class="token selector">.borders</span> <span class="token punctuation">{</span>
     <span class="token property">border</span><span class="token punctuation">:</span> solid 6px #fff<span class="token punctuation">;</span>
     <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
 <span class="token selector">.borders:before</span> <span class="token punctuation">{</span>
     <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
     <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
     <span class="token property">top</span><span class="token punctuation">:</span> -12px<span class="token punctuation">;</span>
     <span class="token property">left</span><span class="token punctuation">:</span> -12px<span class="token punctuation">;</span>
     <span class="token property">right</span><span class="token punctuation">:</span> -12px<span class="token punctuation">;</span>
     <span class="token property">bottom</span><span class="token punctuation">:</span> -12px<span class="token punctuation">;</span>
     <span class="token property">border</span><span class="token punctuation">:</span> solid 6px #888<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
 <span class="token selector">.base</span> <span class="token punctuation">{</span>
     <span class="token property">background</span><span class="token punctuation">:</span> #222<span class="token punctuation">;</span>
     <span class="token property">padding</span><span class="token punctuation">:</span> 4rem 2rem<span class="token punctuation">;</span>
     <span class="token property">color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span>
     <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
     <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
     <span class="token property">margin</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
</code></pre> </li> 
   <li> <p>**方法5:**使用box-shadow阴影实现对应的多边框效果</p> </li> 
   <li> <p>**方法6:**使用多背景属性:background:url1() no-repeat,url2() no-repeat,url3() no-repeat</p> </li> 
  </ul> 
  <h2>82、响应式布局</h2> 
  <ul> 
   <li>**响应式布局的含义：**就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本</li> 
   <li><strong>响应式布局的优缺点</strong> 
    <ul> 
     <li><strong>优点：</strong> 
      <ul> 
       <li>面对不同分辨率设备灵活性强</li> 
       <li>能够快捷解决多设备显示适应问题</li> 
      </ul> </li> 
     <li><strong>缺点：</strong> 
      <ul> 
       <li>兼容各种设备工作量大，效率低下</li> 
       <li>代码累赘，会出现隐藏无用的元素，加载时间加长</li> 
       <li>其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果</li> 
       <li>一定程度上改变了网站原有的布局结构，会出现用户混淆的情况</li> 
      </ul> </li> 
    </ul> </li> 
   <li><strong>响应式布局实现方法:</strong> 
    <ul> 
     <li>响应式为了兼容不同的终端,需要我们去检测不同设备的大小,根据设备的大小不同来实现不同的布局效果<br> 在这里要想实现响应式就需要使用媒体查询技术来实现:</li> 
     <li>在这里需要使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式</li> 
    </ul> </li> 
   <li><strong>基本语法</strong> 
    <ul> 
     <li>@media screen and (max-width: 300px) {样式}</li> 
     <li>@media=====媒体查询的关键词</li> 
     <li>screen=====检测设备的类型</li> 
     <li>and========满足设备类型的关键词</li> 
     <li>()=========查询检测设备的条件 如果条件满足的话这实现{}里面的样式;不满足的话不执行</li> 
    </ul> </li> 
  </ul> 
  <h2>83、写一个1px的边框移动端是怎么处理的（根据什么转成rem）</h2> 
  <ul> 
   <li><strong>方法一：用伪元素结合transform实现元素的1px边框设置 ,比如设置某元素的右边框</strong></li> 
  </ul> 
  <pre><code class="prism language-CSS">.box{position:relative} 
.box::after{
    content:"";
    height:100%;
    width:1px;
    background:red;
    position:absolute;
    right:0;
    top:0;
    transform:scaleX(0.5)
}
/*样式使用的时候，也要结合 js 代码，判断是否 Retina 屏*/
</code></pre> 
  <ul> 
   <li><strong>方法二：使用border-image实现</strong></li> 
  </ul> 
  <pre><code class="prism language-css"><span class="token selector">.box</span><span class="token punctuation">{</span>
    <span class="token property">border-right</span><span class="token punctuation">:</span>1px solid<span class="token punctuation">;</span>
    <span class="token property">border-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>border.gif<span class="token punctuation">)</span></span>   2 repeat<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
  <ul> 
   <li><strong>方法三：使用box-shadow模拟边框实现</strong></li> 
  </ul> 
  <pre><code class="prism language-css"><span class="token selector">.box</span> <span class="token punctuation">{</span>   
	<span class="token property">box-shadow</span><span class="token punctuation">:</span> 1px 0 0px 0px chartreuse<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
  <h2>84、选择器（有几种选择器，如何获取所有li标签如何获取一个ul下子li标签如何获取一个ul下的所有li标签)</h2> 
  <pre><code>(1)  li{ }-使用元素选择符，可以获得所有li标签
(2)  ul > li{ } - 使用子选择符，可以获得ul下子li标签
(3)  ul  li{ } - 使用后代选择符，可以获取ul下所有的li标签
</code></pre> 
  <h2>85、样式link引入，style引入，哪个层级高</h2> 
  <p>style标签设置的样式为内部样式，link标签设置的样式为外部样式，html文件的执行是从上而下的顺序执行，所以style设置的样式和link设置样式的优先级，根据书写顺序而定，后书写的会把先书写的覆盖掉(选择符权重相同的情况下)，所以后书写的层级高。</p> 
  <h2>86、移动端经常出现的兼容问题，谈谈移动端应用或者wap站的—些优化技巧和心得</h2> 
  <ul> 
   <li><strong>移动端上下拉动滚动条时卡顿、慢</strong> 
    <ul> 
     <li><strong>解决</strong>：设置弹性滚动条<br> body {<br> 一webkit一overflow一scrolling: touch;<br> overflow一scrolling: touch;<br> }</li> 
    </ul> </li> 
   <li><strong>长时间按住页面出现闪退</strong> 
    <ul> 
     <li><strong>解决</strong>：禁止触摸并出现提示<br> element {<br> -webkit-touch-callout: none;<br> }</li> 
    </ul> </li> 
   <li><strong>圆角bug</strong> 
    <ul> 
     <li>某些Android手机圆角失效 background-clip: padding-box;</li> 
    </ul> </li> 
   <li><strong>iphone及ipad下输入框默认内阴影</strong> 
    <ul> 
     <li>将webkit浏览器中的元素默认样式去除<br> element{<br> -webkit-appearance: none;<br> }</li> 
    </ul> </li> 
  </ul> 
  <h2>87、重绘和重排</h2> 
  <ul> 
   <li>当影响DOM元素可见性的属性发生变化 (如 color) 时, 浏览器会重新描绘相应的元素, 此过程被称之为 <strong>重绘</strong>（Repaint)，</li> 
   <li>当涉及到DOM节点(页面的结构)的布局属性发生变化时，就会重新计算该属性，浏览器会重新描绘相应的元素，此过程叫<strong>重排</strong>（Reflow），</li> 
   <li>任何会改变元素的位置和尺寸大小的操作，都会触发重排，比如添加、删除可见的dom、元素的位置改变、元素的尺寸改变、浏览器窗口尺寸改变、内容变化(在input框中输入文字)等都会引起重排；</li> 
   <li>重绘不一定需要重排，重排必然会导致重绘，重排成本比重绘成本高得多，因为一个节点的重排可能导致子节点、兄弟节点或祖先节点的重排，所以我们要尽可能减少重排次数、重排范围。</li> 
  </ul> 
  <h2>88、怎么实现网页优化</h2> 
  <ul> 
   <li><strong>页面优化的作用</strong>：让网站被搜索引擎搜索到,提高搜索排名</li> 
   <li><strong>页面头部优化</strong></li> 
  </ul> 
  <pre><code class="prism language-html">页面头部指的是代码部分，具体一点就是指的“Description（描述）”和“Keywords（关键字）”两部分：
1、“描述”部分应该用近乎描述的语言写下一段介绍你网站的文字，在这其中，你应该适当的对你网站的特色内容加以重复以求突出；
2、“关键字”部分应该列出你认为合适的，能突出网站内容的关键字就可以了，关键字不要设置太多，可设置10---8个，搜索引擎只会浏览靠前的几个关键字。
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>keywords<span class="token punctuation">"</span></span>   <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>向搜索引擎说明你的网页的关键词；
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span>    <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>告诉搜索引擎你的站点的主要内容；
</code></pre> 
  <ul> 
   <li><strong>超链接优化</strong></li> 
  </ul> 
  <pre><code>搜索引擎为何可以能够索引全世界的网站，是因为各个搜索引擎程序中都有一个会自动“爬行”于互联网上的智能机器人程序，这个机器人就是顺着网站之间的链接游览世界的，那么我们就应该为它创造一个良好的爬行通道——合理的设置链接。 怎样的链接才是合理的呢？
1、采用纯文本链接，少用，最好是别用Flash动画设置链接，因为搜索引擎无法识别Flash上的文字.
2、按规范书写超链接，这个title属性，它既可以起到提示访客的作用，也可以让搜索引擎知道它要去哪里.
3、最好别使用图片热点链接，理由和第一点差不多。
</code></pre> 
  <ul> 
   <li><strong>图片优化</strong></li> 
  </ul> 
  <pre><code>图片优化并不是修改图片的大小、颜色，而是你应该为每个标签加上alt属性。
alt属性的作用是当图片无法显示时以文字作为替代显示出来，而对于SEO来说，它可以令搜索引擎有机会索引你网站上的图片，对于一些确实没什么意义的图片，最好也不要省略alt，而应该留空，即 alt=""。
</code></pre> 
  <ul> 
   <li><strong>结构优化</strong></li> 
  </ul> 
  <pre><code>1、压缩页面所在的内存大小，尽量控制在100kb左右，因为搜索引擎搜索的时候容易爬取
2、充分做到结构样式行为的分离，尽量不要结构样式行为混用。
</code></pre> 
  <ul> 
   <li><strong>css的优化</strong></li> 
  </ul> 
  <pre><code>A：合理的整合css文件
B: 后代选择符的层级不易过多，一般保持到4层以内
C：正确的使用精灵图，减少图片的请求加载次数
D：注意样式的冗余，比如设置了display:inline,但还给元素设置width height等属性，这样的设置造成属性无效但是不影响显示效果，造成样式的冗余，文件繁琐过大的问题
</code></pre> 
  <h2>89、一个div设置了margin-bottom:10px 另一个div 设置了margin-top 10px 两者之间产生了重合空间如何取消重合空间？</h2> 
  <ul> 
   <li>产生这个问题的原因是:外边距重叠是指两个垂直相邻的块级元素，当上下两个边距相遇时，起外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。考虑两种情况，兄弟关系和父子关系</li> 
   <li><strong>相邻垂直的兄弟盒子</strong>： 
    <ul> 
     <li>只设置一个盒子的外边距</li> 
    </ul> </li> 
   <li><strong>父子盒子外边距重叠</strong>： 
    <ul> 
     <li>将父盒子或子盒子设计为BFC容器（overflow只能设置在父盒子上） 
      <ul> 
       <li>float 除 none 以外的值</li> 
       <li>position (absolute、fixed)</li> 
       <li>display 为 inline-block、table-cells、flex</li> 
       <li>overflow 除了 visible 以外的值 (hidden、auto、scroll)</li> 
      </ul> </li> 
     <li>将父子盒子的margin值隔离 
      <ul> 
       <li>给父盒子设置padding、border：1px</li> 
      </ul> </li> 
    </ul> </li> 
  </ul> 
  <h2>90、有几种方式？让元素竖直方向居中</h2> 
  <p><strong>实现垂直居中的几种方式</strong>：</p> 
  <ul> 
   <li>1.单行文本垂直居中：当此标签高度和行高的值相等时；</li> 
   <li>2.定位： 父元素{position:relative;} 子元素{position:absolute;top:50%;margin-top:-高度的一半；}</li> 
   <li>3.定位： 父元素{position:relative;} 子元素{position:absolute;top:0;bottom:0;margin:auto;}</li> 
   <li>4.定位： 父元素{position:relative;} 子元素{position:absolute;top:50%;transform:translateY(-50%);}</li> 
   <li>5.弹性盒：父元素{display:flex;align-items:center;}</li> 
  </ul> 
  <h2>91、有两个div，上下关系，给上div设置margin-bottom:10px,给下div设置margin-top:20px）问他们之间的距离多大，（涉及盒子塌陷问题）</h2> 
  <p>垂直排列的两个盒子给上面盒子添加下外边距，给下面盒子添加上外边距，两个盒子之间的距离为较大值20px；这里是涉及到了margin的外边距重合的问题；</p> 
  <p>如何取消间距重合：兄弟关系只设置一个间距；可以给一个盒子后面的盒子添加一个父元素，ran父元素触发BFC能解决该问题</p> 
  <h2>92、有没有了解过box-sizing，除了border-box还用过哪些，有没有用过其他的box-sizing属性</h2> 
  <ul> 
   <li>box-sizing从本质角度触发，他控制盒子大小的尺寸，在这里里面他有两个取值经常被使用 
    <ul> 
     <li>1、box-sizing:content-box;content-box可以理解成计算盒子大小的时候从内容区域开始进行计算,也就是计算的时候按照标准盒子模型进行计算;遵循W3C官方盒子模型的计算方法<br> 如果是不携带box-sizing这个属性的话,盒子模型的大小计算仍然按照标准盒子模型进行计算因为content-box是box-sizing属性的默认值</li> 
     <li>2、box-sizing:border-box;border-box可以理解成计算盒子大小的时候从边框区域进行计算,也就是按照怪异盒子模型的标准进行计算,遵循的是ie怪异盒子的标准,通过box-sizing:border-box能够改变盒子模型的计算方法</li> 
    </ul> </li> 
  </ul> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1726595282591887360"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端,面试,css)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1835509897106649088.htm"
                           title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div>
                    </li>
                    <li><a href="/article/1835498925755297792.htm"
                           title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a>
                        <span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
                        <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
                    </li>
                    <li><a href="/article/1835497792265613312.htm"
                           title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a>
                        <span class="text-muted">加密社</span>
<a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a>
                        <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div>
                    </li>
                    <li><a href="/article/1835496149843275776.htm"
                           title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a>
                        <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div>
                    </li>
                    <li><a href="/article/1835496148601761792.htm"
                           title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div>
                    </li>
                    <li><a href="/article/1835495517774245888.htm"
                           title="python八股文面试题分享及解析(1)" target="_blank">python八股文面试题分享及解析(1)</a>
                        <span class="text-muted">Shawn________</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>#1.'''a=1b=2不用中间变量交换a和b'''#1.a=1b=2a,b=b,aprint(a)print(b)结果：21#2.ll=[]foriinrange(3):ll.append({'num':i})print(11)结果:#[{'num':0},{'num':1},{'num':2}]#3.kk=[]a={'num':0}foriinrange(3):#0,12#可变类型，不仅仅改变</div>
                    </li>
                    <li><a href="/article/1835494257746604032.htm"
                           title="MYSQL面试系列-04" target="_blank">MYSQL面试系列-04</a>
                        <span class="text-muted">king01299</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>MYSQL面试系列-0417.关于redolog和binlog的刷盘机制、redolog、undolog作用、GTID是做什么的？innodb_flush_log_at_trx_commit及sync_binlog参数意义双117.1innodb_flush_log_at_trx_commit该变量定义了InnoDB在每次事务提交时，如何处理未刷入（flush）的重做日志信息（redolog）。它</div>
                    </li>
                    <li><a href="/article/1835493753083752448.htm"
                           title="Kafka 消息丢失如何处理？" target="_blank">Kafka 消息丢失如何处理？</a>
                        <span class="text-muted">架构文摘JGWZ</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
                        <div>今天给大家分享一个在面试中经常遇到的问题：Kafka消息丢失该如何处理？这个问题啊，看似简单，其实里面藏着很多“套路”。来，咱们先讲一个面试的“真实”案例。面试官问：“Kafka消息丢失如何处理？”小明一听，反问：“你是怎么发现消息丢失了？”面试官顿时一愣，沉默了片刻后，可能有点不耐烦，说道：“这个你不用管，反正现在发现消息丢失了，你就说如何处理。”小明一头雾水：“问题是都不知道怎么丢的，处理起来</div>
                    </li>
                    <li><a href="/article/1835493753557708800.htm"
                           title="每日算法&面试题，大厂特训二十八天——第二十天（树）" target="_blank">每日算法&面试题，大厂特训二十八天——第二十天（树）</a>
                        <span class="text-muted">肥学</span>
<a class="tag" taget="_blank" href="/search/%E2%9A%A1%E7%AE%97%E6%B3%95%E9%A2%98%E2%9A%A1%E9%9D%A2%E8%AF%95%E9%A2%98%E6%AF%8F%E6%97%A5%E7%B2%BE%E8%BF%9B/1.htm">⚡算法题⚡面试题每日精进</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a>
                        <div>目录标题导读算法特训二十八天面试题点击直接资料领取导读肥友们为了更好的去帮助新同学适应算法和面试题，最近我们开始进行专项突击一步一步来。上一期我们完成了动态规划二十一天现在我们进行下一项对各类算法进行二十八天的一个小总结。还在等什么快来一起肥学进行二十八天挑战吧！！特别介绍小白练手专栏，适合刚入手的新人欢迎订阅编程小白进阶python有趣练手项目里面包括了像《机器人尬聊》《恶搞程序》这样的有趣文章</div>
                    </li>
                    <li><a href="/article/1835493267907637248.htm"
                           title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a>
                        <span class="text-muted">dmengmeng</span>

                        <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div>
                    </li>
                    <li><a href="/article/1835491353451130880.htm"
                           title="【华为OD技术面试真题 - 技术面】- python八股文真题题库（4)" target="_blank">【华为OD技术面试真题 - 技术面】- python八股文真题题库（4)</a>
                        <span class="text-muted">算法大师</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选**1.Python中的`with`**用途和功能自动资源管理示例：文件操作上下文管理协议示例代码工作流程解析优点2.\_\_new\_\_和**\_\_init\_\_**区别__new____init__区别总结3.**切片（Slicing）操作**基本切片语法</div>
                    </li>
                    <li><a href="/article/1835491354004779008.htm"
                           title="【华为OD技术面试真题 - 技术面】-测试八股文真题题库（1）" target="_blank">【华为OD技术面试真题 - 技术面】-测试八股文真题题库（1）</a>
                        <span class="text-muted">算法大师</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.黑盒测试和白盒测试的区别2.假设我们公司现在开发一个类似于微信的软件1.0版本，现在要你测试这个功能：打开聊天窗口，输入文本，限制字数在200字以内。问你怎么提取测试点。功能测试性能测试安全性测试可用性测试跨平台兼容性测试网络环境测试3.接口测试的工具你了解哪些</div>
                    </li>
                    <li><a href="/article/1835485681187647488.htm"
                           title="【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面" target="_blank">【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面</a>
                        <span class="text-muted">一个射手座的程序媛</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a>
                        <div>最后的话最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！资料预览给大家整理的视频资料：给大家整理的电子书资料：如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以点击这里获</div>
                    </li>
                    <li><a href="/article/1835483915071090688.htm"
                           title="【华为OD技术面试真题 - 技术面】- python八股文真题题库（1）" target="_blank">【华为OD技术面试真题 - 技术面】- python八股文真题题库（1）</a>
                        <span class="text-muted">算法大师</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.数据预处理流程数据预处理的主要步骤工具和库2.介绍线性回归、逻辑回归模型线性回归（LinearRegression）模型形式：关键点：逻辑回归（LogisticRegression）模型形式：关键点：参数估计与评估：3.python浅拷贝及深拷贝浅拷贝（Shal</div>
                    </li>
                    <li><a href="/article/1835469672334585856.htm"
                           title="Java企业面试题3" target="_blank">Java企业面试题3</a>
                        <span class="text-muted">马龙强_</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>1.break和continue的作用(智*图)break：用于完全退出一个循环（如for,while）或一个switch语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在for循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。2.if分支语句和switch分</div>
                    </li>
                    <li><a href="/article/1835464504918503424.htm"
                           title="Java面试题精选：消息队列(二)" target="_blank">Java面试题精选：消息队列(二)</a>
                        <span class="text-muted">芒果不是芒</span>
<a class="tag" taget="_blank" href="/search/Java%E9%9D%A2%E8%AF%95%E9%A2%98%E7%B2%BE%E9%80%89/1.htm">Java面试题精选</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a>
                        <div>一、Kafka的特性1.消息持久化：消息存储在磁盘，所以消息不会丢失2.高吞吐量：可以轻松实现单机百万级别的并发3.扩展性：扩展性强，还是动态扩展4.多客户端支持：支持多种语言（Java、C、C++、GO、）5.KafkaStreams（一个天生的流处理）:在双十一或者销售大屏就会用到这种流处理。使用KafkaStreams可以快速的把销售额统计出来6.安全机制：Kafka进行生产或者消费的时候会</div>
                    </li>
                    <li><a href="/article/1835460785443270656.htm"
                           title="2019考研 | 西交大软件工程" target="_blank">2019考研 | 西交大软件工程</a>
                        <span class="text-muted">笔者阿蓉</span>

                        <div>本科背景：某北京211学校电子信息工程互联网开发工作两年录取结果：全日制软件工程学院分数：初试350+复试笔试80+面试85+总排名：100+从五月份开始脱产学习，我主要说一下专业课和复试还有我对非全的一些看法。【数学100+】张宇，张宇，张宇。跟着张宇学习，入门视频刷一遍，真题刷两遍，错题刷三遍。书刷N多遍。从视频开始学习，是最快的学习方法。5-7月份把主要是数学学好，8-9月份开始给自己每个周</div>
                    </li>
                    <li><a href="/article/1835448238103162880.htm"
                           title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a>
                        <span class="text-muted">苹果酱0567</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div>
                    </li>
                    <li><a href="/article/1835437775344726016.htm"
                           title="博客网站制作教程" target="_blank">博客网站制作教程</a>
                        <span class="text-muted">2401_85194651</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
                        <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div>
                    </li>
                    <li><a href="/article/1835428317084348416.htm"
                           title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a>
                        <span class="text-muted">全能全知者</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
                        <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div>
                    </li>
                    <li><a href="/article/1835427057752961024.htm"
                           title="补充元象二面" target="_blank">补充元象二面</a>
                        <span class="text-muted">Redstone Monstrosity</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div>
                    </li>
                    <li><a href="/article/1835420753252675584.htm"
                           title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a>
                        <span class="text-muted">jun778895</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a>
                        <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div>
                    </li>
                    <li><a href="/article/1835413064636264448.htm"
                           title="Day_11" target="_blank">Day_11</a>
                        <span class="text-muted">ROC_bird..</span>
<a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a>
                        <div>面试题16.15.珠玑妙算-力扣（LeetCode）/***Note:Thereturnedarraymustbemalloced,assumecallercallsfree().*///下标和对应位置的值都一样，answer[0]+1,对应位置的值猜对了，但是下标不对，answer[1]+1int*masterMind(char*solution,char*guess,int*returnSiz</div>
                    </li>
                    <li><a href="/article/1835411044768509952.htm"
                           title="字节二面" target="_blank">字节二面</a>
                        <span class="text-muted">Redstone Monstrosity</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div>
                    </li>
                    <li><a href="/article/1835398064727224320.htm"
                           title="前端代码上传文件" target="_blank">前端代码上传文件</a>
                        <span class="text-muted">余生逆风飞翔</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div>
                    </li>
                    <li><a href="/article/1835389111658180608.htm"
                           title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a>
                        <span class="text-muted">陈在天box</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在</div>
                    </li>
                    <li><a href="/article/1835385458356482048.htm"
                           title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a>
                        <span class="text-muted">2401_85123349</span>
<a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a>
                        <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。</div>
                    </li>
                    <li><a href="/article/1835382685745377280.htm"
                           title="html+css网页设计 旅游网站首页1个页面" target="_blank">html+css网页设计 旅游网站首页1个页面</a>
                        <span class="text-muted">html+css+js网页设计</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a>
                        <div>html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击</div>
                    </li>
                    <li><a href="/article/1835379662918873088.htm"
                           title="【从问题中去学习k8s】k8s中的常见面试题（夯实理论基础）（二十八）" target="_blank">【从问题中去学习k8s】k8s中的常见面试题（夯实理论基础）（二十八）</a>
                        <span class="text-muted">向往风的男子</span>
<a class="tag" taget="_blank" href="/search/k8s/1.htm">k8s</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/kubernetes/1.htm">kubernetes</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a>
                        <div>本站以分享各种运维经验和运维所需要的技能为主《python零基础入门》：python零基础入门学习《python运维脚本》：python运维脚本实践《shell》：shell学习《terraform》持续更新中：terraform_Aws学习零基础入门到最佳实战《k8》从问题中去学习k8s《docker学习》暂未更新《ceph学习》ceph日常问题解决分享《日志收集》ELK+各种中间件《运维日常》</div>
                    </li>
                    <li><a href="/article/1835376505543290880.htm"
                           title="css设置当字数超过限制后以省略号（...）显示" target="_blank">css设置当字数超过限制后以省略号（...）显示</a>
                        <span class="text-muted">周bro</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a>
                        <div>1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin</div>
                    </li>
                                <li><a href="/article/36.htm"
                                       title="ASM系列四 利用Method 组件动态注入方法逻辑" target="_blank">ASM系列四 利用Method 组件动态注入方法逻辑</a>
                                    <span class="text-muted">lijingyao8206</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%97%E8%8A%82%E7%A0%81%E6%8A%80%E6%9C%AF/1.htm">字节码技术</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E4%BB%A3%E7%90%86/1.htm">动态代理</a><a class="tag" taget="_blank" href="/search/ASM/1.htm">ASM</a>
                                    <div>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;这篇继续结合例子来深入了解下Method组件动态变更方法字节码的实现。通过前面一篇，知道ClassVisitor 的visitMethod()方法可以返回一个MethodVisitor的实例。那么我们也基本可以知道，同ClassVisitor改变类成员一样，MethodVIsistor如果需要改变方法成员，注入逻辑，也可以</div>
                                </li>
                                <li><a href="/article/163.htm"
                                       title="java编程思想 --内部类" target="_blank">java编程思想 --内部类</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E9%83%A8%E7%B1%BB/1.htm">内部类</a><a class="tag" taget="_blank" href="/search/%E5%8C%BF%E5%90%8D%E5%86%85%E9%83%A8%E7%B1%BB/1.htm">匿名内部类</a>
                                    <div>内部类;了解外部类&nbsp;并能与之通信&nbsp;内部类写出来的代码更加整洁与优雅 
&nbsp; 
1,内部类的创建&nbsp;&nbsp;内部类是创建在类中的 
 
package com.wj.InsideClass;

/*
 * 内部类的创建
 */
public class CreateInsideClass {

	public CreateInsideClass(</div>
                                </li>
                                <li><a href="/article/290.htm"
                                       title="web.xml报错" target="_blank">web.xml报错</a>
                                    <span class="text-muted">crabdave</span>
<a class="tag" taget="_blank" href="/search/web.xml/1.htm">web.xml</a>
                                    <div>web.xml报错 
&nbsp; 
The content of element type &quot;web-app&quot; must match &quot;(icon?,display- 
&nbsp;name?,description?,distributable?,context-param*,filter*,filter-mapping*,listener*,servlet*,s</div>
                                </li>
                                <li><a href="/article/417.htm"
                                       title="泛型类的自定义" target="_blank">泛型类的自定义</a>
                                    <span class="text-muted">麦田的设计者</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E6%B3%9B%E5%9E%8B/1.htm">泛型</a>
                                    <div>&nbsp; &nbsp;为什么要定义泛型类，当类中要操作的引用数据类型不确定的时候。 
采用泛型类，完成扩展。 
&nbsp; 例如有一个学生类 
&nbsp; &nbsp; 
Student{
  Student(){
   System.out.println(&quot;I'm a student.....&quot;);
  }
} 
&nbsp;有一个老师类 
&nbsp; 
</div>
                                </li>
                                <li><a href="/article/544.htm"
                                       title="CSS清除浮动的4中方法" target="_blank">CSS清除浮动的4中方法</a>
                                    <span class="text-muted">IT独行者</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                                    <div>清除浮动这个问题，做前端的应该再熟悉不过了，咱是个新人，所以还是记个笔记，做个积累，努力学习向大神靠近。CSS清除浮动的方法网上一搜，大概有N多种，用过几种，说下个人感受。 
1、结尾处加空div标签 clear:both      1   2   3   4      
.div 
1 
{ 
background 
: 
#000080 
; 
border 
: 
1px &nbsp; 
s</div>
                                </li>
                                <li><a href="/article/671.htm"
                                       title="Cygwin使用windows的jdk 配置方法" target="_blank">Cygwin使用windows的jdk 配置方法</a>
                                    <span class="text-muted">_wy_</span>
<a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/cygwin/1.htm">cygwin</a>
                                    <div>1.[vim /etc/profile] 
&nbsp;&nbsp; JAVA_HOME=&quot;/cgydrive/d/Java/jdk1.6.0_43&quot;&nbsp; (windows下jdk路径为D:\Java\jdk1.6.0_43) 
&nbsp;&nbsp; PATH=&quot;$JAVA_HOME/bin:${PATH}&quot; 
&nbsp;&nbsp; CLAS</div>
                                </li>
                                <li><a href="/article/798.htm"
                                       title="linux下安装maven" target="_blank">linux下安装maven</a>
                                    <span class="text-muted">无量</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E8%A3%85/1.htm">安装</a>
                                    <div>Linux下安装maven(转)  1.首先到Maven官网 
下载安装文件，目前最新版本为3.0.3，下载文件为 
apache-maven-3.0.3-bin.tar.gz，下载可以使用wget命令； 
 
2.进入下载文件夹，找到下载的文件，运行如下命令解压 
  tar&nbsp;-xvf&nbsp;&nbsp;apache-maven-2.2.1-bin.tar.gz  
解压后的文件夹</div>
                                </li>
                                <li><a href="/article/925.htm"
                                       title="tomcat的https 配置,syslog-ng配置" target="_blank">tomcat的https 配置,syslog-ng配置</a>
                                    <span class="text-muted">aichenglong</span>
<a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/http%E8%B7%B3%E8%BD%AC%E5%88%B0https/1.htm">http跳转到https</a><a class="tag" taget="_blank" href="/search/syslong-ng%E9%85%8D%E7%BD%AE/1.htm">syslong-ng配置</a><a class="tag" taget="_blank" href="/search/syslog%E9%85%8D%E7%BD%AE/1.htm">syslog配置</a>
                                    <div>1) tomcat配置https,以及http自动跳转到https的配置 
&nbsp;&nbsp;&nbsp; 1)TOMCAT_HOME目录下生成密钥(keytool是jdk中的命令) 
&nbsp;&nbsp;&nbsp;&nbsp; keytool -genkey -alias tomcat -keyalg RSA -keypass changeit -storepass changeit</div>
                                </li>
                                <li><a href="/article/1052.htm"
                                       title="关于领号活动总结" target="_blank">关于领号活动总结</a>
                                    <span class="text-muted">alafqq</span>
<a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a>
                                    <div>关于某彩票活动的总结 
具体需求，每个用户进活动页面，领取一个号码，1000中的一个； 
活动要求 
1，随机性，一定要有随机性； 
2，最少中奖概率，如果注数为3200注，则最多中4注 
3，效率问题，（不能每个人来都产生一个随机数，这样效率不高）； 
4，支持断电（仍然从下一个开始），重启服务；（存数据库有点大材小用，因此不能存放在数据库） 
 
解决方案 
1，事先产生随机数1000个，并打</div>
                                </li>
                                <li><a href="/article/1179.htm"
                                       title="java数据结构 冒泡排序的遍历与排序" target="_blank">java数据结构 冒泡排序的遍历与排序</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>java的冒泡排序是一种简单的排序规则 
&nbsp; 
冒泡排序的原理：&nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;比较两个相邻的数，首先将最大的排在第一个，第二次比较第二个 ，此后一样； 
&nbsp; &nbsp; &nbsp; &nbsp; 针对所有的元素重复以上的步骤，除了最后一个 
&nbsp; 
&nbsp; 
例题；将int array[] </div>
                                </li>
                                <li><a href="/article/1306.htm"
                                       title="JS检查输入框输入的是否是数字的一种校验方法" target="_blank">JS检查输入框输入的是否是数字的一种校验方法</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a>
                                    <div>如下是JS检查输入框输入的是否是数字的一种校验方法： 
&lt;form method=post target=&quot;_blank&quot;&gt;
   数字：&lt;input type=&quot;text&quot; name=num onkeypress=&quot;checkNum(this.form)&quot;&gt;&lt;br&gt;
&lt;/form&gt;
</div>
                                </li>
                                <li><a href="/article/1433.htm"
                                       title="Test注解的两个属性：expected和timeout" target="_blank">Test注解的两个属性：expected和timeout</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a><a class="tag" taget="_blank" href="/search/expected/1.htm">expected</a><a class="tag" taget="_blank" href="/search/timeout/1.htm">timeout</a>
                                    <div>JUnit4：Test文档中的解释： 
　　The Test annotation supports two optional parameters. 
　　The first, expected, declares that a test method should throw an exception. 
　　If it doesn't throw an exception or if it </div>
                                </li>
                                <li><a href="/article/1560.htm"
                                       title="[Gson二]继承关系的POJO的反序列化" target="_blank">[Gson二]继承关系的POJO的反序列化</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a>
                                    <div>父类 
&nbsp; 
&nbsp; 
package inheritance.test2;

import java.util.Map;

public class Model {
    private String field1;
    private String field2;

    private Map&lt;String, String&gt; infoMap</div>
                                </li>
                                <li><a href="/article/1687.htm"
                                       title="【Spark八十四】Spark零碎知识点记录" target="_blank">【Spark八十四】Spark零碎知识点记录</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a>
                                    <div>1. ShuffleMapTask的shuffle数据在什么地方记录到MapOutputTracker中的 
ShuffleMapTask的runTask方法负责写数据到shuffle map文件中。当任务执行完成成功，DAGScheduler会收到通知，在DAGScheduler的handleTaskCompletion方法中完成记录到MapOutputTracker中 
&nbsp; 
   </div>
                                </li>
                                <li><a href="/article/1814.htm"
                                       title="WAS各种脚本作用大全" target="_blank">WAS各种脚本作用大全</a>
                                    <span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/WAS+%E8%84%9A%E6%9C%AC/1.htm">WAS 脚本</a>
                                    <div>　　　http://www.ibm.com/developerworks/cn/websphere/library/samples/SampleScripts.html 
　　　无意中，在WAS官网上发现的各种脚本作用，感觉很有作用，先与各位分享一下 
　　　 
获取下载 
这些示例 jacl 和 Jython 脚本可用于在 WebSphere Application Server 的不同版本中自</div>
                                </li>
                                <li><a href="/article/1941.htm"
                                       title="java-12.求 1+2+3+..n不能使用乘除法、 for 、 while 、 if 、 else 、 switch 、 case 等关键字以及条件判断语句" target="_blank">java-12.求 1+2+3+..n不能使用乘除法、 for 、 while 、 if 、 else 、 switch 、 case 等关键字以及条件判断语句</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/switch/1.htm">switch</a>
                                    <div>借鉴网上的思路，用java实现： 
 




public class NoIfWhile {

	/**
	 * @param args
	 * 
	 * find x=1+2+3+....n
	 */
	public static void main(String[] args) {
		int n=10;
		int re=find(n);
		System.o</div>
                                </li>
                                <li><a href="/article/2068.htm"
                                       title="Netty源码学习-ObjectEncoder和ObjectDecoder" target="_blank">Netty源码学习-ObjectEncoder和ObjectDecoder</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a>
                                    <div>Netty中传递对象的思路很直观： 
Netty中数据的传递是基于ChannelBuffer（也就是byte[]）； 
那把对象序列化为字节流，就可以在Netty中传递对象了 
相应的从ChannelBuffer恢复对象，就是反序列化的过程 
 
Netty已经封装好ObjectEncoder和ObjectDecoder 
 
先看ObjectEncoder 
ObjectEncoder是往外发送</div>
                                </li>
                                <li><a href="/article/2195.htm"
                                       title="spring 定时任务中cronExpression表达式含义" target="_blank">spring 定时任务中cronExpression表达式含义</a>
                                    <span class="text-muted">chicony</span>
<a class="tag" taget="_blank" href="/search/cronExpression/1.htm">cronExpression</a>
                                    <div>一个cron表达式有6个必选的元素和一个可选的元素，各个元素之间是以空格分隔的，从左至右，这些元素的含义如下表所示： 
代表含义&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 是否必须 允许的取值范围&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb</div>
                                </li>
                                <li><a href="/article/2322.htm"
                                       title="Nutz配置Jndi" target="_blank">Nutz配置Jndi</a>
                                    <span class="text-muted">ctrain</span>
<a class="tag" taget="_blank" href="/search/JNDI/1.htm">JNDI</a>
                                    <div>1、使用JNDI获取指定资源： 
 

var ioc = {
    dao : {
        type :&quot;org.nutz.dao.impl.NutDao&quot;,
        args : [ {jndi :&quot;jdbc/dataSource&quot;} ]
    }
}
 
以上方法,仅需要在容器中配置好数据源,注入到NutDao即可. </div>
                                </li>
                                <li><a href="/article/2449.htm"
                                       title="解决 /bin/sh^M: bad interpreter: No such file or directory" target="_blank">解决 /bin/sh^M: bad interpreter: No such file or directory</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a>
                                    <div>在Linux中执行.sh脚本，异常/bin/sh^M: bad interpreter: No such file or directory。 
&nbsp; 
分析：这是不同系统编码格式引起的：在windows系统中编辑的.sh文件可能有不可见字符，所以在Linux系统下执行会报以上异常信息。 
解决： 
1）在windows下转换： 
利用一些编辑器如UltraEdit或EditPlus等工具</div>
                                </li>
                                <li><a href="/article/2576.htm"
                                       title="[转]for 循环为何可恨？" target="_blank">[转]for 循环为何可恨？</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6/1.htm">读书</a>
                                    <div>&nbsp; 
Java的闭包(Closure)特征最近成为了一个热门话题。 一些精英正在起草一份议案，要在Java将来的版本中加入闭包特征。 然而，提议中的闭包语法以及语言上的这种扩充受到了众多Java程序员的猛烈抨击。 
不久前，出版过数十本编程书籍的大作家Elliotte Rusty Harold发表了对Java中闭包的价值的质疑。 尤其是他问道“for 循环为何可恨？”[http://ju</div>
                                </li>
                                <li><a href="/article/2703.htm"
                                       title="Android实用小技巧" target="_blank">Android实用小技巧</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                                    <div>1、去掉所有Activity界面的标题栏 
　　修改AndroidManifest.xml&nbsp;　　在application 标签中添加android:theme=&quot;@android:style/Theme.NoTitleBar&quot; 
&nbsp; 
2、去掉所有Activity界面的TitleBar 和StatusBar&nbsp; 
　　修改AndroidManifes</div>
                                </li>
                                <li><a href="/article/2830.htm"
                                       title="Oracle 复习笔记之序列" target="_blank">Oracle 复习笔记之序列</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/Oracle+%E5%BA%8F%E5%88%97/1.htm">Oracle 序列</a><a class="tag" taget="_blank" href="/search/sequence/1.htm">sequence</a><a class="tag" taget="_blank" href="/search/Oracle+sequence/1.htm">Oracle sequence</a>
                                    <div>转载请出自出处：http://eksliang.iteye.com/blog/2098859 
1.序列的作用 
 
 序列是用于生成唯一、连续序号的对象 
 一般用序列来充当数据库表的主键值 
 
2.创建序列语法如下： 
&nbsp; 
create sequence s_emp
start with 1      --开始值
increment by 1    --増长值
maxval</div>
                                </li>
                                <li><a href="/article/2957.htm"
                                       title="有“品”的程序员" target="_blank">有“品”的程序员</a>
                                    <span class="text-muted">gongmeitao</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a>
                                    <div>完美程序员的10种品质　　 
&nbsp; 
 完美程序员的每种品质都有一个范围，这个范围取决于具体的问题和背景。没有能解决所有问题的 
&nbsp; 
完美程序员（至少在我们这个星球上），并且对于特定问题，完美程序员应该具有以下品质： 
　　1. 才智非凡- 能够理解问题、能够用清晰可读的代码翻译并表达想法、善于分析并且逻辑思维能力强 
&nbsp; 
（范围：用简单方式解决复杂问题）　　 
 </div>
                                </li>
                                <li><a href="/article/3084.htm"
                                       title="使用KeleyiSQLHelper类进行分页查询" target="_blank">使用KeleyiSQLHelper类进行分页查询</a>
                                    <span class="text-muted">hvt</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a>
                                    <div>本文适用于sql server单主键表或者视图进行分页查询，支持多字段排序。KeleyiSQLHelper类的最新代码请到http://hovertree.codeplex.com/SourceControl/latest下载整个解决方案源代码查看。或者直接在线查看类的代码：http://hovertree.codeplex.com/SourceControl/latest#HoverTree.D</div>
                                </li>
                                <li><a href="/article/3211.htm"
                                       title="SVG 教程 （三）圆形，椭圆，直线" target="_blank">SVG 教程 （三）圆形，椭圆，直线</a>
                                    <span class="text-muted">天梯梦</span>
<a class="tag" taget="_blank" href="/search/svg/1.htm">svg</a>
                                    <div>SVG &lt;circle&gt;   SVG 圆形 - &lt;circle&gt; 
&lt;circle&gt; 标签可用来创建一个圆： 
下面是SVG代码： 
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;&gt;
  &lt;circle cx=&quot;100&quot; c</div>
                                </li>
                                <li><a href="/article/3338.htm"
                                       title="链表栈" target="_blank">链表栈</a>
                                    <span class="text-muted">luyulong</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a>
                                    <div>
public class Node {
	private Object object;
	private Node next;

	public Node() {
		this.next = null;
		this.object = null;
	}

	public Object getObject() {
		return object;
	}

	public</div>
                                </li>
                                <li><a href="/article/3465.htm"
                                       title="基础数据结构和算法十：2-3 search tree" target="_blank">基础数据结构和算法十：2-3 search tree</a>
                                    <span class="text-muted">sunwinner</span>
<a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a><a class="tag" taget="_blank" href="/search/2-3+search+tree/1.htm">2-3 search tree</a>
                                    <div>&nbsp; 
Binary search tree works well for a wide variety of applications, but they have poor worst-case performance. Now we introduce a type of binary search tree where costs are guaranteed to be loga</div>
                                </li>
                                <li><a href="/article/3592.htm"
                                       title="spring配置定时任务" target="_blank">spring配置定时任务</a>
                                    <span class="text-muted">stunizhengjia</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a>
                                    <div>最近因工作的需要，用到了spring的定时任务的功能,觉得spring还是很智能化的,只需要配置一下配置文件就可以了,在此记录一下，以便以后用到： 
&nbsp; 
&nbsp; 
//------------------------定时任务调用的方法------------------------------
    /**
     * 存储过程定时器
    */
    publi</div>
                                </li>
                                <li><a href="/article/3719.htm"
                                       title="ITeye 8月技术图书有奖试读获奖名单公布" target="_blank">ITeye 8月技术图书有奖试读获奖名单公布</a>
                                    <span class="text-muted">ITeye管理员</span>
<a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a>
                                    <div>ITeye携手博文视点举办的8月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 
 
 
8月试读活动回顾： 
http://webmaster.iteye.com/blog/2102830 
 
 
本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）： 
 
 
《跨终端Web》 
 
 
 
 gleams：http</div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>按字母分类：</strong>
            <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
                href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
                href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
                href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
                href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
                href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
                href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
                href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
                href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a target="_blank" href="/">首页</a> -
            <a target="_blank" href="/custom/about.htm">关于我们</a> -
            <a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
            <a target="_blank" href="/sitemap.txt">Sitemap</a> -
            <a target="_blank" href="/custom/delete.htm">侵权投诉</a>
        </div>
        <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
        </div>
    </div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>





</body>

</html>

前端经典面试500题【上】

一阶段面试题集锦

文章目录

1、 rem em vw vw 百分比区别

2、750的设计图，20px为多少rem

3、app怎么做适配的

4、bfc是什么，清楚浮动的原理

5、简单的一个盒子移动到另一个盒子，你用什么方式实现动画效果

6、boder实现0.5像素

7、场景题（两个盒子，左边固定宽，右边自适应，你能想到几种方法）

8、css 选择器有哪些，权重是什么样的

9、css布局，左侧宽度最小150px，最大25 %，右侧自适应。怎么实现

10、CSS的基本语句构成是？

11、css复用

12、CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？

13、css引入的方式有哪些，link和@import的区别是什么

14、css：一个容器（页面），里面有两个div左右摆放并且高度和容器高度一致，左div不会随着页面左右伸缩而变化，右div随页面左右伸缩宽度自适应（手写）

15、CSS3动画知道吗，怎么实现的

16、CSS3新增了哪些东西

17、当margin-top、padding-top 的值是百分比时,分别是如何计算的?

18、定位知道吗，说下，几种不同的定位分别有什么特点，详细说明

19、display有哪几种属性值？分别代表什么？Img属于什么元素？

display属性的含义：display控制元素的显示类型；

display属性的属性值可以分成两大类

常用的属性值

不常用的属性值

20、display：inline-block后为什么有间距

21、Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式?

Doctype的作用

严格模式和混杂模式的区别，以及如何触发两种模式

22、对WEB标准以及w3c的理解与认识？

23、FireFox中标签的居中问题的解决办法

24、Flex的横向平铺填充

25、flex用法场景

26、flex:0 1 100px什么意思？flex两个参数,三个参数什么意思？表示三个参数，flex-grow、flex-shrink、flex-basis分别是啥意思

27、父元素visibility：hidden；子元素设置visibility：visible，子元素显示吗

28、知道渐变嘛，说下你的了解

29、一条0.5px的线，几种方法

30、行内元素有那些。块级元素有那些。空元素有哪些

31、Html和xhtml有什么区别?

32、html页面渲染方式和流程

33、html5有哪些新特性、移除了那些元素