前端知识点总结

知识点总结：

网站制作流程：与客户沟通，制定方案->签订合同->预付定金->初稿审核->前台页面设计，后台功能开发->测试验收->上线培训->后期维护

工具：stylish插件：定义样式
fontlab:做字体的工具

span标签没有语义

1.下面哪个不是相对定位的特点?()
A:绝对定位的子元素会相对于相对定位的父元素进行定位
B:以自己左上角为基准进行定位
C:该定位的元素可以使用层级 z-index
D:不能实现模式转换
//D

2.实现行内元素垂直居中对齐的是()
A:vertical-align:middle;
B:align: center;
C: margin-top: center;
D:margin: 0 auto;
//A

3.一个 div 里嵌套一张图片，选中 div 的时候，下边会多几个像素，以下不能解决这个问题的代码 是()
A:给图片设置 vertical-align:top B:给图片设置 vertical-align:baseline
C:vertical-align:middle
D:将 div 的宽高定义为和图片宽高一致
//B

4.其中.two{background:blue;position:relative;top:20px;left:20px;}这段代码描述正确的是()
A:相对于原来的位置盒子往右侧走了 20 像素，往上走了 20 像素
B:相对于原来的位置盒子往下走了 20 像素，往右侧走了 20 像素
C:设置了相对定位的元素不占位置了
D:以浏览器左上角水平和垂直移动 20 像素
//B

5 关于 CSS 继承性说法正确的是()
A:h 标签的字体大小不能通过继承修改，如果一定要修改 h 标签的字体大小直接作用在 h 标签上面
B:text-,font-,line-开头的属性都是不可以继承的
C:div 的高度如果不设置由内容来决定(没有内容那么高度为 0)，宽度默认和父元素一样宽
D:a 标签的颜色不能通过继承修改，如果一定要修改 a 标签的颜色直接作用在 a 标签上面
//ACD

IE6及以下的浏览器不支持子元素选择器 (父元素>子元素)

伪类选择器：(:link,:visited,:hover,:active,:focus,:before,:after,(before,after需要结合content使用)::selection(火狐中需要采用另一种编写方式 ::-moz-selection )) IE6中，不支持对超链接以外的元素设置:hover和:active

属性选择器

1. p[title]{提示内容}
2. p[title=值]{}
3. [属性名]
4. [属性名=“属性值”]
5. [属性名^=:以…开头元素]
6. [属性名$:以…结尾]
7. [属性名*:包含某元素]

子元素的伪类：==结构伪类选择器

8. :first-child
   :last-child
   :nth-child
   :first-of-type
   :last-of-type
   :nth-of-type

选择器的优先级(CSS声明的优先级)
9. 内联样式 1000
10. id选择器 100
11. 类和伪类，属性选择器 10
12. 元素选择器，伪元素选择器 1
13. 通配 0
14. 继承（没有优先级）

文本标签：
< em >:表示一段内容中的着重点，斜体
< strong >表示内容的重要性，粗体
< sup >上标
< sub >下标
< ins >插入，下划线

列表去掉项目符号：list-style:none
链接去掉下划线:text-decoration:none

解决高度塌陷问题：开启BFC
BFC(Block Formatting Context)该属性可以设置打开或者关闭，默认关闭
当元素开启BFC以后，元素将会有如下特征：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素
如何开启元素的BFC：
1.设置元素浮动：使用这种方法开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，并且用这种方法导致下边的元素上移，不能解决问题
2.设置元素绝对定位
3.设置元素为inline-block：可以解决问题，但是会导致宽度丢失，不推荐使用
4.将元素的overflow设置为一个非visible的值
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式
在IE6及以下的浏览器可以通过开hasLayout来解决该问题，开启方式有很多，我们直接选择一种副作用最小的，直接将元素的zoom设置为1，zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
zoom：1 表示不放大元素，但是通过该样式可以开启hasLayout(只在IE中支持)

opacity:设置元素的透明背景，IE8以下的浏览器中使用filter:alpha(opacity=50) 0~100之间的值

表格：colspan:横向合并单元格 rowspan纵向合并单元格 border-spacing来设置边框距离 border-collapse:collapse来设置表格边框合并，如果设置了边框合并，border-spacing失效
thead:表头，tbody表格主体，tfoot表格底部（都是table子标签）

清除浮动，解决高度塌陷：
		.clearfix:before,.clearfic:after{
												content=' ';
												display:table;
												clear:both;
									}

表单中的select
< select name=“” multiple=“multiple” > 下拉列表变为一个多选的下拉列表
< option value=“”></ option >
< optgroup lable=“”>lable指定分组的名字< /optgroup>对选项进行分组
< /select>
文本域：resize="none"文本域不能调整大小

cursor:pointer可以用来设置鼠标指针的样式的属性

lable标签可以指定一个for属性，该属性需要指定一个表单项的id值
< fieldset>在表单中可以使用fieldset来为表单项进行分组，可以将表单项中的同一组放到一个fieldset中，< legend>在fieldseet中可以使用legend中指定组名

条件hack
CSS hack实际上一个特殊的代码，这段代码只在某些浏览器可以识别，而其他浏览器不能识别，通过这种方式，来为一些浏览器设置特殊的代码，条件hack只对IE浏览器有效。

圣杯布局：特点：1.两边固定，中间自适应
2.中间列要优先加载
3.中间列要优先显示
技术点：浮动，相对定位，margin是负值
双飞翼布局与圣杯布局的区别：两种布局方式都是把主列放在文档流最前面，使主列优先加载，都是让三列浮动，通过负外边距形成三列布局。不同之处在于如何处理主列的位置，圣杯布局是利用父容器的左右内边距+两个从列的相对定位。双飞翼布局是把主列嵌套在新的块元素当中，利用主列的内边距进行布局。

解决IE6底下fixed失效的问题：
html,body{
height:100%;
overflow:hidden
}//禁止系统默认滚动条
使用绝对定位模拟固定定位：禁止滚动条
html滚动条作用于文档
body滚动条作用于自己
html{
overflow:hidden;
height:100%;
}
body{
overflow:Auto;
height:100%;
}

溢出的文字省略号显示：

单行文本：1.white-space:nowrap;
2.overflow:hidden;
3.text-overflow:ellipsis;
多行文本：(有较大兼容性问题，适合于-webkit-浏览器或移动端，移动端大部分是webkit内核，更推荐后端去做，可设置显示多少个字，操作更简单)
1.text-overflow:ellipsis;
2.display:-webkit-box
3.-webkit-line-clamp:2
4.-webkit-box-orient:vertical

确定如何向用户发出来显示的溢出内容信号
text-overflow:ellipsis;

线性渐变：linear-gradient(red,blue);默认：从上到下
改变渐变的方向：top,bottom,left,right linear-gradient(to 结束方向，red,blue)
角度 linear-gradient(角度，red,blue)
透明度渐变：linear-gradient(red30%,blue100%)

行内块元素中间有缝隙
浮动的盒子，绝对定位，固定定位也不会触发外边距合并的问题
相对定位保留原来的位置，绝对定位，固定定位不再占有原来的位置。

固定定位的小技巧：固定定位在版心的右侧
小算法：1.让固定定位的盒子left：50%，走到浏览器可视区（也可以看作版心）的一半位置
2.让固定定位的盒子margin-left：版心宽度的一半距离，多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

css3新特性：伪元素选择器
::before ::after必须有content属性

less上设置placeholder的样式
&::placeholder {
color: #aaa;
font-size: 12px;
}

classList的用法

var a = document.getElementBy(“DIV”);

1.使用classList返回所选元素的类名，是一个数组，一个类名占一个长度(a.classList.length)。

2.a.classList.add(“classname1”) ; 添加一个类名

3.a.classList.remove(“classname2”) ; 去掉一个类名

4.a.classLis.toggle(“classname3”); 引号中的类名，有就删除，没有就添加。比较智能的结合了1,2点，用于切换十分方便

5.a.contains(“classname4”); 判断一个类型是不是存在，返回true和false

classList兼容性：除了IE，其他浏览器兼容性都可以。

CSS 百分比参照问题

参照父元素宽度的元素：padding margin width text-indent

参照父元素高度的元素：height

参照父元素属性:font-size line-height

特殊：相对定位的时候，top(bottom) left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度