平时收集到的一些问题

【1.网页乱码的问题是如何产生的。怎么样解决？】
造成html网页乱码原因主要是html源代码内中文字内容与html编码不同造成.主要情况有以下三种：
1.比如网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码。
2、html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。
3、浏览器不能自动检测网页编码，造成网页乱码。
解决办法 ：
在编辑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（距离等于左右边框的宽度）。
• 再给父级元素清除浮动。