平时收集到的一些问题

【1.网页乱码的问题是如何产生的。怎么样解决？】
形成html网页乱码缘由主要是html源代码内中文字内容与html编码不一样形成.主要状况有如下三种：
1.好比网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码。
二、html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会形成编码乱码。
三、浏览器不能自动检测网页编码，形成网页乱码。
解决办法 ：
在编辑html代码时，在meta中添加charset 告诉浏览器该页面的编码方式，并在保存代码的时候以指定的编码方式保存。网页乱码的问题的产生是由于网页被保存时的编码格式与浏览器解析该网页时用的编码格式不一致，保存网页的格式与声明网页的解码格式一致，便可解决问题

【颜色有几种写法】
有三种：
颜色名称：red blue yellow black等
十六进制：#ffffff(可简写为#fff)
RGB原色：rgb（255，233，242）【区间：0~255】
RGBA透明色：rgba（233，243，211，0.2）【a的区间：0~1】

【doctype html 的做用是什么？】
：DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记 语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

【严格模式和混杂模式指什么？】
浏览器厂商开始建立与标准兼容的浏览器时，他们但愿确保向后兼容性。为了实现这一点，他们建立了两种呈现模式：标准模式和混杂模式
在标准模式中，浏览器以其支持的最高标准呈现页面，；
在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式一般模拟老式浏览器的行为以防止老站点没法工做。

【meta 有什么做用，常见的值有哪些？】
meta 用name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类。http-equiv用以说明主页制做所方法。
常见的值有：charset=“utf-8” name=“content-type” content=“text/html” name=“keywords” content=“ ····”

【常见的浏览器有哪些，什么内核】
常见的浏览器有

• IE——irident-俗称IE内核
• chrome——blink内核（基于webkit）
• opera——presto内核
• safari——webkit内核
• firefox——gecko内核

【样式有几种引入方式? link 和 @import有什么区别】
：样式有三种引入方式。主要分为
1.外部样式 例如
<link rel=“stylesheet” href=“xx.css”>
2.内部样式 例如
<style type=“text/css”>
p{
color:red;
}
</style>
3.内联样式 例如
<div style=“width:20px;height:20px;color:red;”>内联样式</div>

link和@import有什么区别？
我的以为通俗来讲，link和@import标签做用都是调用css文件。区别就是：
①：link标签是一个html标签，而@import标签是个css标签（至关于两个不一样阵营。）
②：link标签除了调用CSS以外还有其余做用，臂如：声明页面连接属性，声明目录，rss等。而@import就只能调用css。
③：当一个页面被访问时，link引用的CSS会同时被加载，而@import引用的CSS 会等到页面所有被下载完再被加载。

用link引用css文件
<link rel="stylesheet"type=“text/CSS” href=“my.css”>
用@import引用css文件
<style>
@import url(my.css)
</style>

【文件路径…/main.css 、./main.css、main.css有什么区别】
./main.css=main.css 都是当前文件夹下的mian.css文件
…/main.css 是当前文件夹上一级文件夹下面的mian.css文件

[console.log的做用是什么？]
主要是方便你调式javascript用的。你能够看到你在页面中输出的内容。

相比alert他的优势是：
用console.log用来前端调试，能够在console页面查看，console.log的输出相对alet更加方便，可以显示对象的内容，不会打断页面操做，输入完之后仍可对页面继续操做。

【text-align: justify是什么？】
text-align:justify是：单词两端对其，每一行被展开为宽度相等，

上面一个是使用text-align:justify后的效果：（和平时看的报纸杂志相似）
中间一个是使用text-left后的效果
下面一个是使用text-align:center后的效果（至关于从最中间开始往两边分散排列。）

【.px、em、rem分别是什么？有什么区别？如何使用】

.px固定大小。

而em 是相对于父级的文字大小，若是父级没有设置。则以继续向上查找父级，直到根目录，都没有则以浏览器默认字体大小16px 相对换算。
rem。则是相对于html根目录。与父级设定文字大小关系无关。

display: none 和 visibility: hidden有什么做用？有什么区别？
两者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM操做中两者仍是有所不一样的。
CSS display:none;
使用该属性后，HTML元素（对象）的宽度、高度等各类属性值都将“丢失”; 浏览器视为不存在，且不加载！
visibility:hidden;
使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（彻底透明），可是在浏览时仍保留位置。而它所占据的空间位置仍然存在，也便是说它仍具备高度、宽度等属性值。

【line-height有什么做用?】
line-height:的意思是设置字体行间高度，line-height 不直接影响元素高度，而是影响文本每行的高度，若是元素内因换行而产生多行文本，那么 line-height 对元素高度的影响也要乘上行数
line-height高度和height高度设置一致可让文本实现垂直居中。

【a 标签的href, title, target 是什么？ title 和 alt有什么区别？如何新窗口打开连接?】
a标签的href中文意思是超文本引用，用于指定超连接目标的URL.
title 至关于解释a标签是作什么的。给a标签取名字加注释，当鼠标放在a标签上时，回显示title内容。
target 设置a标签的打开方式(规定在何处打开链接文档)。是在本窗口打开，仍是在一个新窗口打开等等。

①：若是正常浏览网页图片时，不会显示出alt.鼠标放置上去会显示title名称.可是若是网速很差，或者图片连接地址错误，使得图片加载不出来，会显示alt名称，
②：同时设置alt信息会方便搜索引擎搜索图片更加直接，有利于被搜索引擎抓取。

【1.有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？使用场景是什么？ 可否嵌套？】

三者语义上的区别：
有序列表用于表示存在顺序关系的列表项（用阿拉伯数字标记）
无序列表用于表示没有级别顺序关系的列表项（用小黑点标记）
自定义列表用于表示层级关系的列表dt与dd是层级关系（例如：某班某某）
三者能够互相嵌套。

【如何去除列表前面的点或者数字？】
使用list-style:none;属性去除列表前面的点或者数字

【class 和 id 有什么区别？何时用 class 何时用 id？】
class是类选择器，能够重复使用，而id选择器只能使用一次。
大多数状况使用class。由于id选择器只能使用一次。推荐在大范围的时候用ID（例如head和footer）ID中分类小的部分用class,这样就能更好的布局了
另外id的优先级高于class选择器
类型例如p（1）<class(10)<id(100)<style(1000)<js

【块级元素、行内元素是什么？有什么区别？分别对应哪些经常使用标签？】
块级元素特色
①老是在新行上开始，占据一整行；
②高度，行高以及外边距和内边距均可控制；
③宽带始终是与浏览器宽度同样，与内容无关；
④它能够容纳内联元素和其余块元素。
经常使用的块级元素标签：
<ul>,<ol>,<dl>,<div>,<li>,<dd>,<dt>,<p>,<form>,<h1>~<h6>,<table>,<tr>

行内元素特色
①和其余元素都在一行上；
②高，行高及外边距和内边距部分可改变；
③宽度只与内容有关；
④行内元素只能容纳文本或者其余行内元素。
不能够设置宽高，其宽度随着内容增长，高度随字体大小而改变，内联元素能够设置外边界，可是外边界不对上下起做用，只能对左右起做用，也能够设置内边界，可是内边界在ie6中不对上下起做用，只能对左右起做用
经常使用的行内元素标签
<a>、<span>、<img>、<input>、<textarea><em><strong><label>

【display: block、display: inline、display: inline-block分别有什么做用?】
display: block表示该元素显示为一个块级元素,单独占一行
display: inline表示该元素显示为内联元素，不换行
display: inline-block表示内联块元素，既不换行又可使用块元素所拥有的属性

下面代码的做用

做用于页面布局。将页面分为头部、内容、页脚三部分

【如何理解 HTML CSS 语义化?】
html css的语义化就是。标准规范的使用这些元素，使其正确、方便、高效的呈现页面内容。确保后期维护人员对于代码的维护，和搜索引擎对于相关内容精确的抓取。

【form表单有什么做用？有哪些经常使用的input 标签，分别有什么做用？】
form表单的做用是：把表单中的数据提交到后台进行处理，进行数据交互。
经常使用的input标签

type=“text”: 用于输入文本。placeholder属性（可选）展现的是输入框里的提示，maxlength（可选）限制最大输入长度
type=“password”: 用于输入密码，输入的内容显示为星号
type=“radio”: 单选圆圈按钮。注意：name要相同才能实现单选，value要有值
type=“checkbox”: 复选框。加checked属性会默认选上
type=“textarea”: 文本域，用于输入多行文本
type=“hidden”: 隐藏域，用户看不到，用于暂存数据。或者安全性校验

【post 和 get 方式的区别？】
post和get都是用来与后台之间传输数据区别在于
①：get通常作传输少许数据使用，post作传输大量数据使用
②：get提交数据最大值为1K。受浏览器限制。post提交数据理论上无限制，但受后台服务器的限制。
③：get安全性不如post。get传输会在url中记录下来，浏览记录能够查阅到，get提交数据的最大值与url可输入值最大值有关。最大为1k。而post则不会在url留下痕迹，浏览记录查询不到，安全性优于get.

【在input里，name 有什么做用？】
就是一个记号。能够经过document.getElementsByName(" ")来取到全部具备同一个名字的节点。接下来就能够进行操做了。
同一个id在每一个文档里只能赋给一个节点，而name能够被多个节点使用。

【<button>提交</button>、<a class=“btn” href="#">提交</a>、<input type=“submit” value=“提交”> 三者有什么区别？】
<button>提交</button>只是一个按钮,能够经过例如：
<button type=“submit” value=“Submit”>Submit</button>
<button type=“submit” value=“reset”>reset</button>
为其设置事件，若是不设置，只是一个单纯的按钮.

<a class=“btn” href="#">提交</a> 是一个a标签,点击会跳转到当前页面。

<input type=“submit” value=“提交”>提交表单数据

【radio 如何 分组?】
依据name内容。name内容相同的为一组。

【placeholder 属性有什么做用?】
placeholder 占位符.在用户没有输入时，在区域内的一段提示性文字.填写时消失。

【type=hidden隐藏域有什么做用? 举例说明】
<input type=“hidden” name=“word” value=“aaaaa”>
隐藏域中能够存储表单数据，可是对访问者不可见。
提交表单时，隐藏域中的内容也会被提交给服务器进行处理，
例如；用户修改或提交数据时的验证功能。具体例子还不是很清楚。

【CSS选择器常见的有几种?】
常见的css选择器有：
全局选择器：例如*{margin:0;padding:0}
id选择器：例如#box{margin:0;padding:0}
类选择器：例如.box{margin:0;padding:0}
标签选择器：例如a{text-decoration:none;}
组合选择器：例如 a，p{color:red;}
属性选择器：例如input[type=“text”]{color:blue;}
伪类选择器:例如 a:hover{color:red;}
继承选择器:例如 li a{color:red}
子元素选择器：例如 ul > li{border:1px solid red;}
!important选择器：例如 p{color:red； !important}

【选择器的优先级是怎样的】
全局选择器<标签选择器<属性选择器<类选择器<id选择器<行间样式<!important
注：同级权重 后加载样式会覆盖以前加载样式
继承的样式优先级低于设置的样式。

【class 和 id 的使用场景?】a

ID选择器常做用于大范围，标示度高的标签上.如页面布局的头部标签和页脚标签.
而头部和页脚标签中具体的标签经常用class选择器

使用CSS选择器时为何要划定适当的命名空间？
主要是为了使本身定义的样式只对当前区块生效，避免与他人产生冲突；

#header{
}/选取id=header的标签为其添加样式/
.header{
}/选取class=header的标签为其添加样式/
.header .logo{
}/选取class=header的标签后代中 class="logo"的标签为其添加样式/
.header.mobile{
}/选择class=header和mobile的元素/
.header p, .header h3{
}/选择class=header标签中后代为p和h3的元素/
#header .nav>li{
}/选取id=header的元素后代中class为nav元素的直接后代li元素/
#header a:hover{
}/选取id=header的元素后代中a元素为其添加鼠标悬停时的样式./

---

【列出你知道的伪类选择器】
：hover——鼠标悬停元素时候的样式；
：active——鼠标点击元素时候的样式；
：link——元素的常态样式；
：actived——元素被点击事后的样式；
：first-of-type——所选标签元素中的第一个使用样式；
：nth-of-type（n）——所选标签元素中的第n个使用样式；
：nth-child（n）——所选标签的父元素的第n个子元素使用样式；
：last-of-type——所选标签元素中的最后一个使用样式；
：first-child——所选标签元素的父元素的第一个子元素使用样式；
：last-child——所选标签元素的父元素的最后一个子元素使用样式；
focus——当元素获取焦点时候使用样式；

【first-of-type和first-child的做用和区别？】
例如：

.box h4:first-of-type{color:red}意思是 做用于class=box的标签后代中的h4元素,把它父级元素第一个出现的h4元素颜色显示为红色
使用后0.0和0.1 1都会变红

.box h4:first-child{color:red;}的意思是 做用于class=box的标签后代中中的h4元素，若他是它父级元素下顺序为第一的则颜色显示为红色.
使用后只有0.1变红.

【运行以下代码，解析下输出样式的缘由。】
运行以下代码 输出后的结果是：
.item1:first-of-type{background: red;}
选中class="item1"标签，对于父元素而言，他是父元素的第一出现class="item1"的标签，故选中.item1,ct-item2-item1两项

.item1:first-child{color: blue; }
选中class=".item1"标签，对于父元素而言，排列顺序为第一个的class="item1"的标签，若第一个标签不是class="item1"的标签。则不生效。故选中.item1,ct-item2-item1两项.

text-align: center的做用是什么，做用在什么元素上？能让什么元素水平居中
text-align：center的做用是:做用于块级元素之上。 使其中的内联元素实现文本水平居中。

若是遇到一个属性想知道兼容性，在哪查看?
caniuse上查看。

opacity 和 rgba都能设置透明，有什么区别
opacity能够将块里的全部元素已经属性设置为透明；
rgbsa只能将其中的元素设置透明，并不能改变背景等透明度

如何让一个div水平居中？如何让图片水平居中
div水平居中：div{margin:0 auto;}
让图片水平居中：再其块级父元素上添加 text-align:center;

如何设置元素透明? 兼容性？
添加:opacity:0.6 (0~1数字)
IE6，IE7浏览器：filter:alpha(opacity=60) (0~100数字)

CSS Sprite(雪碧图)指什么? 有什么做用
CSS雪碧，也有人叫CSS精灵，将小图标和背景图像合并到一张图片上，而后利用css的背景定位来显示须要显示的图片部分。
好处：
①：减小加载网页图片时对服务器的请求次数，减小服务器压力，节约服务器流量。
②：提升页面的加载速度。

img标签和CSS背景使用图片在使用场景上有何区别
若是内容对每一个访问者是恒定不变的，则选用css背景图。
若是图片是须要变化的，好比网站的广告图片，则须要用img标签。

title 和 alt属性分别有什么做用
title做用，当鼠标悬停在某一个标签上，会出现对此标签的一个注释。title内容就是表情的注释内容。
alt:是在你的图片由于某种缘由不能加载时在页面显示的提示信息(临时代替图片的做用)，它会直接输出在本来加载图片的地方；

background: url(abc.png) 0 0 no-repeat;这句话是什么意思
以abd.png这个图片设置为背景，水平位置0,垂直位置0，不重复铺垫。

background-size有什么做用? 兼容性如何? 经常使用的值是?
background-size:设置背景图片大小。经常使用数值：px % contain cover

absolute, relative, fixed 偏移的参考点分别是什么
position:relative偏移的参考点是相对于本身自己原来的位置
position:fixed偏移的参考点是相对于浏览器窗口
position:absolute偏移的参考点是相对于父容器或者浏览器窗口

z-index 有什么做用? 如何使用?
属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素老是会处于堆叠顺序较低的元素的前面，具备更高的优先级。
在position属性标签重叠时的状况下使用。

position:relative和负margin均可以使元素位置发生偏移?两者有什么区别
position:relative和负margin都是不脱离文档流，使得元素发生偏移，

position:relative排列后不会对周围元素的排列发生影响，而负margin排列后会对文档流中的页面布局产生影响。前者不管如何定位，元素所占区域大小不变，然后者随着margin的值的变化，元素所占页面的区域也在变化。

position:relative能够调整定位元素的z-index层级，而负margin不能；position：relative主要配合绝对定位对页面进行版块布局方面的定位，而负margin主要用于小的细节方面的位置调整。

文档流的概念指什么？有哪一种方式可让元素脱离文档流?
文档流是文档中可显示对象在排列时所占用的位置。按照本身设定的顺序来进行排列
在浏览器窗体中,块元素一个一个从上往下排列,行内元素从左到右排列显示,即为文档流

使用position：absolute position:fixed 和float会使得元素脱离文档流。

5.浮动致使的父容器高度塌陷指什么？为何会产生？有几种解决方法
当一个浮动元素的父容器未设置高度，其中元素浮动后悔脱离文档流，使得父容器没法计算浮动元素的高度，致使父容器高度塌陷。
解决方法有：

• 单独给父容器设置一个固定高度。
• 使父容器触发BFC,触发后浮动元素也会计算高度，从而撑开父容器高度。触发方法能够设置：float,overflow,inlink-block;display:table-cell等
• 给父容器设置一个伪类
  div:after{
  content:"";
  display:block;
  clear:both;}`

【在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？】
在CSS当中，相邻的两个盒子（多是兄弟关系也多是祖先关系）的外边距能够结合成一个单独的外边距。这种合并外边距的方式被称为折叠，而且于是所结合成的外边距称为折叠外边距。
边距折叠时的状况：

• 两个相邻盒子的外边距都为整数.取他们二者之间的较大的值。
• 两个相邻盒子的外边距都为负数，取他们二者之间绝对值较大的值。
• 两个相邻盒子的外边距为一正一负，取二者和。

如何不让相邻元素外边距合并：

• 使得其中一个元素浮动起来。
• 使得其中一个元素触发BFC：例如设置position:absolute、position:fixed、设置overflow:hidden、overflow:auto、display:table-cell、display:inline-block;

---

去除inline-block内缝隙有哪几种常见方法？
使用display:inline-block后代码换行会被解析,造成内缝隙
经常使用解决方法有：

• 全部代码写一行，没有换行，就不会出现内缝隙
• 元素设置浮动
• 父级元素设置font-size:0;子元素根据须要再另外设置字体大小.
• 设置一个负的margin-left:，在对第一个子元素单独设置margin-left。

---

父容器使用overflow: auto| hidden撑开高度的原理是什么？
给父容器添加overflow: auto| hidden样式，也就是触发了BFC，在BFC中，就算是浮动元素也是要计算高度的，而后就撑开了父容器。

4.BFC是什么？如何造成BFC，有什么做用?
BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
如何造成BFC：
CSS2.1中规定知足下列CSS声明之一的元素便会生成BFC。

• 根元素
• float的值不为none
• overflow的值不为visible
• display的值为inline-block、table-cell、table-caption
• position的值为absolute或fixed`

BFC的运用：

• 清除浮动；在父容器内部元素浮动以后形成父容器高度塌陷，这个时候将父容器设定样式，创建BFC，因为浮动元素也计算高度，就把塌陷的父元素给撑起来了；
• 用于防止边距合并，实质上外边距合并是由BFC致使的，毗邻块盒子的垂直外边距折叠只有他们是在同一BFC时才会发生，若是他们属于不一样的BFC，他们之间的外边距将不会折叠。因此经过建立一个新的BFC咱们能够防止外边距折叠；
• 用于防止文字环绕；
• 用于多列布局；当咱们设计一个多列布局占满宽度时，最后一列被挤到下一行，在其中一个列的布局中创建了一个新的BFC，它将会在前一列填充完以后的后面占据所剩余的空间。

1.负边距在让元素产生偏移时和position: relative有什么区别?

• 负边距margin是元素产生偏移的缘由是经过改变元素的外边距margin。使得元素在文档流中的位置发生改变。从而会影响后面元素的文档流。
• 而position:relative是让元素自己相对于原来位置发生偏移，可是元素在文档中的原来的位置并无发生变化，不会影响到后面元素的排版。

---

使用负 margin 造成三栏布局有什么条件?

• 三栏布局中的三个元素都发生浮动，（中间自适应元素，放在第一个优先渲染。）
• 在父容器上设置左右padding给侧边栏预留出位置.(padding值等于侧边宽度)
• 左右两侧边栏元素设置负的margin-left；使得三个浮动元素都在同一行。
• 使用position:relative 使得左右侧边栏分别到左右两边。造成一个三栏布局

---

圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤

• 圣杯布局是利用了给浮动元素设置负margin从而实现垂直方向的偏移，而后利用position定位来对侧边栏进行位置调整；
• 首先须要将三栏块元素所有float，而后分别对每一个侧边栏的浮动元素添加合适的负margin，
• 其次对父容器进行padding值的设置，最后利用position：relative进行位置的偏移

双飞翼布局的原理？实现步骤？
双飞翼布局至关于在圣杯布局的基础上。人为的用margin 把两个侧边栏的位置给空出来。
实现步骤：

• 先用一个div把main元素包裹起来，利用float:left使div块和两个侧边栏都浮动。
• 而后利用负margin。让三个元素都在同一行。
• 再给main元素加一个左右的外边距margin（距离等于左右边框的宽度）。
• 再给父级元素清除浮动。