最近学习前端，总结了一些常见的问题和知识点，给出了一点解决办法，作为参考。
hyper text markup language 超文本标记语言
cascading style sheets 层叠样式表
Netscape navigator 网景浏览器
001、浮动不上去的原因
1、宽度不够浮动不上去
2、前一个元素不浮动后一个元素加了浮动你也浮动不上去
3、都加了浮动还是浮动不上去！那么请你检查你的类名有没有写错
002、图片出不来的原因
1、没有设置宽度和高度
2、如果你的盒子里面有内容可以不设置宽度和高度，因为是你的内容给你撑开的高度
3、路径错误，一般情况下来说如果路径错误了，按照正常来说会在console里面会报一个红色的错误
4、检查你的类名 以及你的class及id是否写的正确
003、为什么我的内容不居中
1、一般情况下如果让一个内容区居中的话必须设置两个条件 a:宽度必须设置 b、margin:0 auto;
2、一般情况下外围盒子用id 内容元素如果需要取名字的情况下统一用class来取名
004、样式加不上去
1、请检查你的link标签的书写是否跟我下面的一模一样
<link rel="stylesheet" type="text/css" href="路径"/>
2、请检查你的类名 和你的取得名字
3、如何实在加不上去了请您看一下你们的权重是否被覆盖了
005、什么时候需要减掉padding
1、如果这个盒子设定宽度和高度的话那么padding就需要减掉
2、如果这个盒子没有设定的话那么就不需要减掉
006html标签嵌套的一些坑
1、a标签
a标签不能嵌套，若a标签中嵌套了a标签，浏览器会自动添加结束符号，故不能嵌套
例如:
<a href="#">首页
<a href="#">千锋</a>
</a>
浏览器解析：
<a href="#">首页</a>
<a href="#">千锋</a>
如果代码结构复杂，会导致html层级错乱
不能嵌套的还有： h不能直接套h标签 p标签是不可以套块标签的
2、p标签
3、h标签
rel的作用
rel 属性用于指定当前文档与被链接文档的关系
1、!DOCTYPE html
声明文档类型
2、网页的三大组成部分
结构层 表现层 行为层
html css js
3、什么是html
超文本标记语言 Hyper Text Markup Language
4、什么是xhtml
可扩展的超文本标记语言
5、文件名规范
小写英文字母、数字、下划线的组合， 其中不得包含汉字、空格和特殊字符； 必须以英文字母开头
6、站点的作用
整合网站资源 规划网站的内容和代码
7、html的注释
<!-- -->
8、html中的三种列表分别是哪几个？基本语法怎么写
无序列表
<ul>
<li></li>
...
</ul>
有序列表
<ol>
<li></li>
...
</ol>
扩展：可以通过type来改变有序列表的序列号
自定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
8、alt与title的区别
title:提示信息的作用
alt：当图片不显示的时候显示的信息
9、如何设置单元格与单元格之间的距离
cellspacing="0"
10、如何设置单元格与内容之间的距离
cellspadding="0"
11、设置单元格的几个必要的条件
width:宽度
height：高度
border：边框
12、单元格的行合并和列合并
rowspan:行合并
colspan：列合并
13、target打开页面的两种方式
target="_self" 本页面打开另一个页面
target="_blank" 新开一个页面
14、input的type类型都有哪些？
type:
text文本输入框
password密码输入框
button:空按钮
submit:提交按钮
reset：重置按钮
radio:单选按钮
checkbox:复选按钮
15、如何禁止表单或者输入框输入
disabled 禁用
16、如何让checkbox默认为选中状态
checked 默认选中
17、post和get的区别
1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的action属性所指的URL中，在URL中可以看到。post是通过HTTP post机制，用户看不到这个过程 。
3. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。
4. get安全性非常低，post安全性较高。但是执行效率却比Post方法好
18、css的基本语法
选择符{属性:属性值;属性:属性值;}
19、css的引入方式有哪几种？优先级如何分配？
1、外部引入 <link rel="stylesheet" type="text/css" href="这里面是路径"
2、内部引入
<style>
....css代码
</style>
3、行间样式
<div style="属性:属性值;属性:属性值;"></div>
优先级：
遵循一个"近水楼台先得月"的原则
行间的最大 外部和内部的优先级主要看书写的先后顺序
css
全拼：Cascading Style Sheets 全称：层叠样式表
内部样式<style type="text/css">样式</style>
内联样式 <style="属性：属性值"【直接标签引用】
外部样式 方式一：<link rel="stylesheet" type="text/css" href="路径"/> 方式二：<style type="text/css"> @ ！important url(路径) </style> 【老版本不支持】
权重
内联样式：1000
ID选择符：0100
类（class）选择符：0010
类型选择符：0001 属性选择符：0010
伪类选择符：0010
伪元素选择符：0001
继承：0000
子选择符：0000
包含选择符：包含选择符权重之和
20、css的选择符都有哪些？ 权重分别是多少？
id选择符 class选择符 标签选择符 伪类选择符 全局选择符 群组选择符 包含选择符
权重：100 10 1 10 1 相加
21伪类选择器的几种状态
:link-------默认状态
:visited--------已访问的一个状态
:hover------鼠标滑过的一个状态
:active-----鼠标按下去的一个状态
22、link和import导入外部样式的区别
差别1：老祖宗的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS。
差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。
差别3：兼容性的差别。：@import是CSS2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.
23、px em pt ppi个是什么意思？绝对大小关键字都有哪些
PPI是图像分辨率的单位，图像ppi值越高，画面的细节就越丰富，因为单位面积的像素数量更多。PPI也叫图像的采样率（在图像中，每英寸所包含的像素数目）。
px是像素单位，em是相对单位，pt是绝对单位
xx-small =9px
large =19px
x-small =11px
x-large=23px
small=13px
xx-large =27px
medium=16px
24、字体的属性都有哪些
font-size
font-style normal / italic / oblique
font-family
font-weight normal / 100-900 / bold /bolder
color
line-height
属性值自己看课件
25、文本属性都有哪些
text-transform 大小写字母切换 none / caplitalize(首字母大写）/ uppercase(仅有大写字母） / lowercase(仅有小写字母）
text-align
left / right / center / justify
text-decoration
文本划线 none / underline / overline(上划线)/ line-thruogh (添加删
除线)
text-indent
首行缩进 只对第一行起作用，可以取负值
letter-spacing
文本字间距 控制英文字母或汉字的字距
word-spacing
单词间距属性 控制英文单词词距
属性值自己看课件
26、列表属性有哪些
list-style-type 列表符号样式 disc(实心圆)/ square(实心方块)/ none
list-style-image
list-style-position
简写 ：list-stylle :none
属性值自己看课件
27、background-repeat的属性值有哪些，意思是什么？
no-repeat:不平铺
repeat：平铺 (默认)
repeat-x：横向平铺
repeat-Y:竖向平铺
28、实现文本三个点的几个条件
text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
1、容器宽度：width：value；（px、%，都可以）
2、强制文本在一行内显示:white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号：text-overflow：ellipsis;
注：必须是单行文本才能设置本文溢出！！！
IE6+；chrome1.0+；safari3.1+（firefox,opera暂不支持）
29、请你解释一下jpg gif 与png之间的不同之处
jpg:有背景颜色，背景不能够透明，不支持动画
png:没有背景颜色，不支持动画
gif:有动画效果，支持背景透明
30、常见的内联元素和块级元素都有哪些
。
div -最常用的块级元素（可以写宽高并且独占一行）
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
div
内联元素 （不可以写宽高并且在一行显示)
a –超链接（锚点）
br - 换行
i - 斜体
em - 强调
img - 图片
input - 输入框
span - 常用内联容器，定义文本内区块
strong - 粗体强调
select - 项目选择
可变元素
img input
元素转换
display:
block 块元素 inline 内联元素 、inline-block 可变元素 none list-item
31、vertical-align的用法
三个条件：
1：必须给容器（父元素）加上text-align:center;
2:必须给当前元素转成行内块元素（display:inline-block;）再给当前元素加上vertical-align:middle;
3：在当前元素的后面（没有回车）加上同级元素span;并对span进行vertical-align:middle;width:0;height:100%;display:inline-block
32、请简述一下块级元素和内联元素的特点
块级元素
a、块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，
B:默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。
C:块状元素都可以定义自己的宽度和高度。
D:块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。
内联元素三大特点：
A:内联元素的表现形式是始终以行内逐个进行显示；
B:内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；
C:内联元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但个别属性不能正确显示;(padding-top:;margin-top/bottom:;)
32、什么是置换元素与非置换元素
置换元素：具有内联元素的特征，但是可以直接设置宽度和高度！常见的置换元素----img input select textarea
什么是非置换元素：除了置换元素其他都是非置换元素
33、position定位的属性值都有哪些？每个值得意思是什么？
static：默认值。
位置设置为 static 的元素会正常显示，它始终会处于文档流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
absolute：
相对于父级元素的绝对定位，浮出、脱离布局流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，若父级都没有定位，则以html（根元素）可直接指定 “left”、“top”、“right” 以及 “bottom” 属性。。(层叠的顺序z-index:value)
relative：
是相对于默认位置的偏移定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流】
fixed：
相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。
34、相对定位和绝对定位的区别
1、参照物不同，绝对定位的参照物是包含块（已定位的父元素），相对定位的参照物是元素本身默认的位置；
2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。
35、哪种定位有z-index属性
固定定位(fixed) 绝对定位（absolute）
36、如何让一个元素消失（至少写出5种方式）
1、display:none
2、height:0;
3、overflow:hidden;
4、position定位，然后控制left top right bottom 负值
5、margin负值
37、如果给一个元素设置透明度，如何让这个元素的内容不发生透明度变化
1、rgba()
2、定位脱离文档流
38、如何让一个物体在页面水平垂直居中
1、div{width:200px;height:200px;background:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}
2、div{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;}
39、透明度的兼容写法
透明度设置 IE10以下浏览器写法：
filter:alpha(opacity=value);取值范围 1-100 IE9两种都支持，但是优先显示上面的方法；
兼容其他浏览器写法： opacity: .value（0.2）
(value的取值范围0-1,0.1,0.2,0.3-----0.9) 例如：opacity: .8 ; filter:alpha(opacity=80);
40、什么是精灵图，它的原理是什么。优点是什么 ？
一、将导航背景图片、按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position”来实现背景图片的定位技术。
二、图片整合的优势： 1）通过图片整合来减少对服务器的请求次数，从而提高 页面的加载速度。 2）通过整合图片来减小图片的体积。
41、伪对象选择符有哪些
1、::after: 与content属性一起使用，定义在对象后的内容。
2、before:与content属性一起使用,定义在对象前 的内容。
3、::first-letter 定义对象内第一个字符的样式。
4、::first-line:定义对象内第一行的样式。
5、:selection:定义对象选中后高亮效果
42、清除浮动的几种方式，（至少写4种）
hack1：给父元素添加声明overflow:hidden;
- 优点：简单，代码少，浏览器支持好
- 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
hack2: 给父元素加height
- 优点：简单，代码少，容易掌握
- 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
hack3: 在浮动元素下方添加空div,并给该元素添加 声明：div{clear:both;}
优点 代码少 容易掌握
缺点 若浮动过多，会导致代码累赘
hack4:万能清除浮动法
p:after{content:“.”;clear:both;display:block;height:0;overflow:hidden; visibility:hidden;}
缺点：代码多，不易理解，不适合初学者理解原理。
优点：支持性好，各大网站都在用万能清除浮动
43、*visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失不显示，也不再占用位置。