HTML篇

ctrl+F按照关键字查找需要的内容

网页的组成：

结构（HTML）、样式(CSS)、行为(js)

HTML:超文本标记语言

ECMA:管JS

W3C:管HTML,CSS

xhtml:扩展超文本标记语言

HTML5:HTML的第五代

建立站点：

• 规划所有的资源和代码
• 整合资源

主要标签

<标签 属性=“值”></标签>
双标签，也叫常规标签
<标签 属性=“值”/>
单标签，也叫空标签

单双引号是成对出现的

常用标签：

标题标签：
h1~h6，默认加粗变大，独占一行，依次变小

倾斜标签：
i/em:在一行内显示，默认倾斜
i是视觉效果上的倾斜，em是倾斜体（强调作用）



加粗标签：
b/strong:加粗标签，默认文本加粗，在一行显示，strong强调 作用



下划线标签：
u,在一行内显示



功能标签：
br换行，hr水平线



上下标：
sup:上标；sub:下标


段落标签:
单独占据一行，里面不能嵌套块元素，div,p,a,h

转义字符：

&nbsp:空格
&gt:>
&lt:<
&copy ©

路径：

目录文件夹：
普通的项目文件夹
根目录：
打开文件夹的第一层
绝对路径：
从盘符开始往下
相对路径：
图片相对于HTML的位置。

./强调在这一级；…/返回上一级

列表：

1. 无序列表：
   独占一行，默认显示实心圆点修饰符
   
   
   设置修饰符type="circle/square/disc"
   
   
   取消修饰符style="list-style:none;"
   
   一般用来做导航或列表
2. 有序列表：
   独占一行，默认阿拉伯数字修饰单元格

start="起始序号"；
type="a/A/i/I/1"		//修改修饰符
style="list-style:none";	//删除修饰符

一般用来做导航或列表

3. 自定义列表：
   单独占据一行，一个dl包含一个dt和多个dd
   一般用于做双导航
   
   
   

超链接：

目标：实现应用之间的跳转

<a href ="跳转地址"  target = "跳转方式"></a>
target = "_new"在新页面刷（很久没点击会打开新页面而不是在新页
				面刷新）
		="_self"当前页面刷新
		="_blank"打开新页面
title="鼠标悬停提示文本"

图片标签：

图片常见格式：png,jpg,gif

<img 
src="图片地址" 
alt="加载失败时显示，搜索引擎判断用，必须有" 
title="鼠标悬停文本" 
height/width="只写一个另一个等比例缩放"
>

文件夹的命名：
数字字母下划线美元符号中划线，第一个不能是数字

div

盒子标签：单独占据一行，结合CSS搭建页面结构

表格：

table>tr>td
属性：

border:边框
bordercolor：边框颜色
BgColor:背景颜色
width：
height：
cellspacing：单元格间隙
cellpadding:边框与内容之间的间距
align：center,left,right对齐方式（写在表格上是表格相对于窗口的位置）
valign:top/bottom/middle垂直对齐方式
colspan:跨行对齐
rowspan:水平对齐

th:
加粗居中的td

建议不要省略tbody

表单标签：

<form action="提交地址">
<input type=""	name="" value=""/>
type属性值：text,password,button,submit,reset
value的属性值：值
name = "名字"  提交的数据的名字
</form>

注意事项：

1. input写在form里面
2. List item
3. 按钮属性value
4. 需要提交的写上name
   
   
   
   POST和GET的区别：
   POST非明文提交，不在地址栏输出，没有长度限制，不会丢失数据，数据安全，但速度慢
   GET铭文提交，有长度限制，可能会造成数据丢失，数据不安全，一般提交数据较短，提交速度快

CSS篇：

span标签：容器标签，没功能***包裹文本，给文本添加样式***。



样式分类：外部样式，内部样式，行内样式

外部样式：

创建方式：

1. 生成独立的CSS文件，第一行写：

@charset "utf-8";

2. 在head标签中加入
3. 在外部样式表中选中对应的元素添加样式

开发中不建议使用@import的引入方式

@import和link的区别：

1. link是标签，后者是CSS自带的一种写法
2. 同时加载结构代码和link，后者是先加载结构再加载CSS（加载顺序）
3. JS能控制link，但是不能控制后者
4. link不存在兼容性，后者老版本不支持

内联样式（行内样式）：

写在标签内

内部样式：

写在style标签里面

三种样式的权重：

1. 内联》内部》外部
2. 作用范围越大，权重越小
3. 同一样式与书写顺序有关
4. 内部样式和外部样式和书写顺序有关，后写优先级高
   
   
   
   
   

选择器：

1. 类选择器（class选择器）：

.类名 {
	键：值
}

2. ID选择器：

#id {
键值对；
}

4. 标签选择器：

div {
	height:80px;
}

5. 通用选择器：

* {
margin:0;
padding:0;
} 

6. 伪类选择器：
   :link
   :visited
   :hover
   :active

a:link {
	background:red;
}

谁靠后改变谁，谁加上选择器移入谁
7. 群组选择器：

选择器1，选择器2，选择器3 {
	各算各的，用到那个就算哪个的权重
}

9. 包含选择器（后代选择器）;

选择器 选择器  选择器 {
	键值对；
}

11. ！ important写在属性值后面，这样写优先级最高
    
    
    

选择器的权重

1. 行内样式》ID选择器》类选择器》标签选择器》通用选择器
2. 同种选择器看加载顺序
3. 样式冲突是看权重：通用（0）；标签（1）；ID（100）；行内样式（1000），和选择范围有关
   
   
   

CSS文本属性：

文字分为四条线：顶线，中线，基线，底线


两行文字之间的距离：上一行底线和下一行顶线之间也有间隙，测量元素高度（第一行文字顶部到第二行文字顶部，也称为行高）

颜色：color

值：颜色单词；16进制；rgb();rgba() ,a的范围0~1

字体类型：font-family

多个字体逗号隔开，单个单词不需要引号，多个单词或汉字需要引号，优先加载第一个字体，后面为备用字体。

字体大小：font-size

px:具体像素值
%：跟随父元素的大小
em:跟随父元素的大小，成倍数关系
rem:跟随根元素，与根元素大小成倍数关系
默认16px,最小限制12px
middle：16px

字体加粗：font-weight

bolder/bold/normal/100-900{取整百}

字体样式:font-style

italic/oblique/normal
italic是指斜体字，oblique是斜体效果（没有斜体字用这个）

行高：line-height

单位：px
行高小于高度值：偏上
行高大于高度值 ：偏下
不带单位和带%：需要乘以字体大小，从而得到行高为px
不能为负数

综合写法：

font：倾斜 加粗 文本大小/行高 字体类型；（文本大小之后的顺序不可调）

注意：
font-size：20px；
font:16px/16px arial;
显示为16px,但是font-size的值依旧是20px

首行缩进：text-indent

可以取负值
只对第一行起作用
2em代表缩进两个字符

水平对齐方式：text-align

注意：有四个值：left，center，right，justify（两端对齐）

文本修饰方式：text-decoretion

none：去掉修饰
underline：下划线
overline：上划线
line-through：中划线

字间距，词间距

letter-spacing：字符间距（汉字与汉字之间，英文字母之间拆开）
word-spacing：词间距（只对英文单词有效）

可以为负数：字间距，词间距，首行缩进

列表属性：

list-style：修饰符的形状
disc:circle,square
list-style-image:url(“图片地址”);//修饰符替代为图片
list-style-position：outside（默认），inside（都是相对于li来说的）
list-style-type：none等价于list-style:none

边框

border：大小 形态 颜色（没顺序）
border-left
border-left-style/width/color

利用边框写三角形：

先写个容器：宽高为0
border：20px solid transparent(或者rgba(0,0,0,0));
然后：border-left-style:red

背景属性：

background-color：背景颜色
background-image：背景图片
background-position：背景图片位置
关键字写法：left , center,right,top,bottom(水平和垂直都是center可以省略），具体像素（可以为负值）



background-size:背景定位（CSS3）
单位：px或者%（只写一个代表宽度，等比例缩放）
auto：不改变宽高
cover：等比例缩放填满整个容器，不会变形，某些部分可能无法显示
contain：缩放至某一边贴紧容器边缘



background-repeat:背景图是否重复
no-repeat，repeat-x，repeat-y,repeat

background-attachment:背景关联
scroll(滚动，默认)/fixed（固定）

背景的综合写法：

background:color image repeat position/size attachment;
position和size的顺序不能错误

常见错误：
background:url(),url()
前面一个不要设置颜色，不然报错

如何实现垂直居中

line-height：60px；
height：60px;

浮动：

float（浮动）：
值：left，right,none
作用：在一行显示
元素默认文档流：从上至下，从左至右
浮动影响：
脱离文档流，浮动元素会挨着父元素的边缘，浮动影响后写的元素，不影响先写的元素
相同方向：先浮动的显示在前面
不同方向：左浮找左浮，右浮找右浮

浮动的先后是取决于在文档流中的位置，和CSS样式的顺序无关

贴靠现象：浮动最后一个元素超过父元素剩下的宽度，会找上一个元素贴上去，还不够的继续找上一个，宽度超过父元素直接在最下面

浮动是不遮挡文字的

登高不等宽，等宽不等高的两个div可形成图文结合

CSS的属性继承：

不可继承的：

• display, margin,padding,border,background,height,min-height,min-width,max-width,max-height,overflow,position,right,top,bottom,z-index,float,clear,table-layout,vertical-align

所有元素可以继承：

• visibility和cursor

内联元素可以继承;

• letter-sapcing,word-spacing,line-height,color,font,font-family,font-size,font-style,font-vertical,font-weight,text-decoration,text-transform

块级元素可继承：

• text-align和text-indent

列表元素可继承：

• list-style及其子属性（type，position，image）

表格可继承：

• border-collapse
  注：a标签的颜色不可以通过父元素来修改继承

盒模型

标准盒模型:

• 内容区（content），填充（padding），外边距（margin），边框（border）
  怪异盒模型：
  特点：

• padding和border都在元素的宽高内部，不会把盒子撑大
  组成：
  内容区域;width,height,padding
  边框：border
  外边距：margin
  触发条件：

1. 条件1：

• 丢失<!doctype html>,对于IE6,7,8

2. 条件2：

• box-sizing:是否为怪异盒模型
• content-box：标准盒模型
• border-box:怪异盒模型

触发怪异盒模型之后，在给元素添加border或者padding就不会把盒子撑大，也不需要去做减法了

也就是说占位高height+margin*2：

内边距

padding
padding-left:左内边距
padding-right:右内边距
paddingt-top
padding-bottom

综合写法;
padding:上下左右
padding:上下 左右
padding;上 左右 下
padding：上 右 下 左
特点：

1. • 顺时针方向
2. • 不能为负值
3. • 没有auto
4. • 会撑大父元素
     
     

外边距：

margin

综合写法与padding一致

• 顺时针方向；可以为负值；有auto，表示水平自适应让元素水平居中；不会撑大父元素
  
  到此可以为负数的：字间距，词间距，背景定位，首行缩进，外边距

盒子模型占位大小计算：

width= 左右内边距+左右边框+左右外边距
Height = 上下内边距+上下边框+上下外边距

垂直方向外边距相遇重叠（重点）：

加字符或者hr可以隔开，但是带来新的问题

并列关系：

只写一个方向的边距（不要写一个top,一个bottom，外边距集中在一个上）

嵌套关系：

可以通过父元素的内边距或者加边框阻隔（padding或border隔开）


水平方向是不会重叠的

也可以给父元素的第一格子元素加上浮动

overflow：hidden

文本溢出：

overflow:

值：

• visible显示
• hidden隐藏
• scroll滚动查看
• auto超出滚动
• inherit继承父元素overflow属性

overflow可以解决外边距溢出问题（子元素外边距设置大了超出），但是子元素超出部分被隐藏

给父元素加上hidden，可以解决外边距重叠，但是超出部分隐藏

div里面的数字和字母没有空格是不会换行的，被解析成一个单词

white-spacing 空白空间

• normal：默认值
• nowarp:强制不换行（遇到br还是得换行）
• pre：原格式输出（换行和缩进保留，在一行溢出也不换行）
• pre-line：原格式同时换行（换行是缩进的）
• pre-warp：原格式不缩进换行
  主要就是wrap和nowrap

text-overflow：文本超出

clip;裁减超出部分
ellipse：省略号(一般用这个)

省略号实现的三个步骤（记住）：

white-spacing：nowrap
overflow:hidden
text-overflow:ellipse
必须是单行文本才能设置文本溢出（多行文本可自行百度）

元素类型

分块级元素，内联元素，内联块元素（CSS2.1增加）

块级元素

block，如div，form，table，ul，li,dl等
特征：

• 单独占据一行
• 能设置宽高
• 能设置正常内外边距
• 矩形显示

内联元素

inline，如：span，a,i,em,textarea,select

特征：

• 在一行显示
• 不能设置宽高
• 能设置左右内外边距，不能正常设置上下内外边距
• 不是矩形显示

（上下外边距无效，上下内边距会遮挡文本或被文本遮挡）

内联块元素

inline-block，也属于内联（可以说只分两种，块级，内联）
img,input
特征：

• 在一行显示
• 能正常设置宽高
• 能正常设置内外边距
• 矩形显示

多个空格和换行解析成一个空格,想要实现多个可以借助之前说的转义字符和<br>标签

display的值

• block：块，还有是显示的意思
• inline：行内
• inline-block：行内块元素
• none：隐藏
• list-item:列表属性
• table，table-cell
• inherit

这里的隐藏是不占位置的

• 大部分的块级元素默认block，其中li为list-item
• 大部分内联元素为inline，其中input，img默认为inline-block

vertical-align

行内块和行内元素的对齐方式（并列关系，垂直对齐）
top/middle/bottom
作用：改变两个元素的垂直对齐方式

下面是最常用的情况：

• 父元素加上text-align：center
• 给当前元素转为行内块元素，再加上vertical-align:center
• 给同级加上span（需要inline-block属性），设置：

vertical-align:middle;
width:0;
height:100%;
display:inline-block;

置换元素，非置换元素

置换元素：浏览器根据元素的属性和标签，来决定具体显示的内容
img依靠src,input依靠type决定（记住这两个就行了）

非置换元素：不是置换元素的元素

基线：英文字母的基线正好是小写字母x的·正下方

三种定位机制

普通流，浮动流，定位流

定位作用：改变元素的位置

position：static（默认），absolute，relative，fixed

• static：写不写无所谓
  
  
  absolute:绝对定位
• 脱离文档流（不占位）
• 会遮挡文字（和浮动的区别）
• 默认参考有定位的父元素，没有满足条件的父级元素就会参考浏览器窗口
• 可以为负值
• 元素大小有内容撑起来
  不设置坐标等同浮动效果（但会产生扑克牌堆叠效果）

参考点默认是浏览器的窗口




relative：相对定位

• 可以遮挡其他元素
• 占据文档流
• 设置坐标参考自身的初始位置（设置left，top实际效果为right，bottom）
• 不会破坏布局
• 设置left，bottom是参考自身的左下角
  
  
  
  sticky：黏性定位
• 结合了相对定位和绝对定位，平时在文档流中，滚动条滚动时（下拉一定程度），会粘在窗口上，一般看到的是导航栏
  left和top有效

二级导航：
ul>li里的li设置为相对定位，，包含ul>li，ul设置相对定位
鼠标划过去会display:none
尽量少用定位

包含块（父相子绝）

包含块就是为定位元素提供坐标，偏移和显示范围的参照物，最大为HTML
元素嵌套：
子用relative，父用absolute

定位元素层级关系：z-index

有定位元素才可以使用，值越大优先级越高，默认0/auto,可为负值

元素在浏览器居中的方法;

div{
	width:200px;
	height:200px;
	background:#f00;
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:auto;
}

	width：200px;
	height:200px;
	background:#f00;
	position:fixed;
	left:50%;
	top:50%;
	margin:-100px  0 0 -100px;

锚点链接

<a href="#box1"></a>
<div id="box1">跳转位置</div>

href里面装id选择器

宽高自适应

使网页更加灵活，适应不用窗口大小和设备等。

外边距最好不要自适应

要写百分比必须加上这个
html,body{
height:100%;
}

宽度自适应：html,body{width:100%}或者不写

高度自适应：自适应元素高度:height:auto或者不写（靠内容撑起来）

子元素浮动可以加高度

子元素高度为百分比，那么父元素必须设置高度

定位时的坐标可以是百分比

实战技巧：
有的背景观察像素发现像素间颜色不一致（为图片），可以纵向切宽一像素 作为图片，然后repeat-x即可。

最小高，最小宽，最大高，最大宽

写版心时候用

最小高：

min-height:IE6不识别,height:在IE6识别成最小高

最小宽：

min-width：加在嵌套在最外层的div（body下最大的div，缩小到一定程度不缩小）
#### 最大宽度，最大高度： max-height，max-width

如何解决IE6不识别最小高的问题：

方法一：

min-height:60px;//IE6不识别
height:auto ! important;//IE6不识别
height:60px://IE6解析成最小高

方法2;

min-height:100px;
height:auto;//IE6不识别
_height:100px;//IE6识别成最小高

方法3：

min-height:100px;
height:100px;

显示隐藏：visibility

值：visible显示；hidden隐藏


和display的区别：
都是显示隐藏
前者占据文档流，后者不占据

伪对象选择器：

通过CSS设置对应的元素


单双引号都可以的

指定元素后面添加内容：

div ::after {
content:"添加的内容";
}

指定元素前面添加内容：

div：：before {
content:"添加的内容";
}

content是必须的，后面可以跟空字符串表示不写内容
注意：下面只是用于块元素

设置第一行文本样式：

选择器：：first-line{}

设置第一个文字的样式：

选择器：：first_letter{}

::before {
	content:""
}
::after {
	content:""
}
div:first-line{
	必须是块元素
}
div:first-letter {
	必须是块元素
}

高度塌陷

原因：
子元素浮动，父元素没有设置高度

解决：

• 1. 给父元素加上高度（不灵活）
  
  
• 2. 父元素加上overflow:hidden（触发BFC,但是超出部分隐藏）
  
  
• 3. 给父元素最后加上一个空div，设置clear:both/left/right(代码冗余，解析网页变慢)
  
  
• 4. 万能清除法（重点）：

clear::after {//伪对象选择器
	content:".";//里面是有内容的
	display:"block";
	clear:both;//前三行效果就出来的
	width:0;//可以不写
	height:0;
	visibility:hidden;
	overflow:hidden;(超出宽0高0部分隐藏)
}

5.父元素也跟着浮动（不准使用，因为父元素产生了新的高度塌陷问题）

基础public.css模板：

目的：引入这个模板可以省事，可被多个页面同时使用，比一个页面写一次要好

@charset "utf-8";
html,body,,ol,ul,lih1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;}//去除这些元素自带的内外边距，不用星号因为*的范围大，有无效功
body{font-size:16px; font-family: '微软雅黑';}
ul,ol,li{ list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:16px; font-weight: normal;}
b,strong{ font-weight: normal;}
i,em{font-style: normal;}
a,u{ text-decoration: none;}
img{border:0;display:block;//去除下边3px的像素}
input,fieldset{ outline: none;//去除框框的蓝色模糊光条border:0;}
.clear_fix:after{//清除浮动
    content:'.';
    clear:both;
height:0;
width:0;
    overflow:hidden;
    display:block;
    visibility: hidden;
}
.clear_fix{//兼容IE浏览器zoom:1;}
.fs12 {font-size:12px}//一直到font-size20px
 .psa{ position:absolute;}//绝对定位
.psr {position：relative}//相对定位
//背景色类,一般是网站主打色
.bgRed{background-color:red;}
.fw_b{font_weight:bold;}
.fw_n{font-weight:none;}
//用得最多的
.fl {float:left}
.fr {float:right}

注意：要写在所有的link最前面

关于表格的补充（全是重点）：

• tbody一定要写
• <colspan span=“列数”> 将列分组 span：几列分为一组
• <th>:标题单元格，文本内容默认水平居中
• <caption>表格标题

表格属性

写在table里面：

• border-spacing：边框间距，不能为负数

• border-colspan:separate(默认)/collapse合并边框

• table-layout:单元格宽度是否固定（加快运行速度）

  auto（默认，自适应）；fixed（固定宽度）

• empty-cell：无内容单元格设置:show显示，hidden隐藏·

关于表单的补充

multiple：多选

单选按钮：

<input：type="radio" value="man" name="sex">男

注意：name值要一致，不然不能单选

checked  或者 checked = "checked“  表示默认选中（单选和多选）

复选按钮：

<input type="checkbox" name="" value=""> 

name值不同，也存在checked

disabled="disabled"或者disabled表示禁用

下拉列表：

<select>//下拉列表
<option><option>//下拉列表项
<option><option>
<option><option>
</select>

selected="selected"或者selected表示默认选中

name不是必须的

disabled有效

文本域

<textarea></textarea>

文本域属性：
resize:禁止拖拽，一般CSS设置宽高
cols:字符宽
rows：字符高
可以自由拖拽

文件上传

<input type="file">

字段集标签（重点）

<fieldset>
<legend></legend>
</fieldset>

• 一个fieldset默认一个legend
  
  
• 可以用CSS修改这些属性的样式
  
  
• 也可以align="left/center/right/justify"改变legend样式
  
  
• 默认带边框，table默认不带边框
  
  
  
  
• label：提示信息标签
  
  

<form>
  <label for="male">Male</label>		//for里面套id选择器
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

行内块元素使用margin： 0 auto无效，对父元素使用text-align:center即可

auto是基于总宽度——已知固定宽度获取到的，inline-block元素水平方向的属性没有总宽度的限制，所以margin设置为auto时，不知道如何取值，所以默认为0，于是没有我们的居中效果

BFC

自己也搞不懂需要常看链接
BFC是一个独立的布局环境，其中的元素不受外界影响，并且在一个BFC中，块盒与行盒（行盒有一行中的所有内联元素组成），都会垂直的沿着其父元素的边框排列

BFC触发条件：

HTML根元素
添加了浮动的元素（除了none）
添加了定位的元素（absolute，fixed）
添加了display的元素（inline-block，table-cell，table-caption，flex，inline-flex）
元素添加了overflow：(visible除外)

BFC的布局规则

内部的Box在垂直方向，一个接一个的放置

BOX垂直方向的距离由margin决定。属于同一个两个相邻的BOX的margin会发生重叠

每个盒子（行盒与块盒）的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此


BFC的区域不会与float box重叠


BFC就是一个页面上隔绝的独立容器，容器里面的元素不会影响外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与了计算。

text-transform：capialize(首字母大写)/uppercase(全大写)/lowercase(全小写)

BFC的应用：

解决了margin叠加问题
解决了高度塌陷问题
解决了覆盖问题（两列布局）：浮动后面跟标准流，标准流变为BFC就可以和浮动元素分开

1、两列布局，三列布局
2、解决高度塌陷（解决高度塌陷的问题）
3、解决外边距溢出的问题

重置样式：就是之前的public.css

@charset "utf-8";
html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;}//去除这些元素自带的内外边距，不用星号因为*的范围大，有无效功
body{
    font-size:16px;
    font-family: '微软雅黑';
}
ul,ol,li{
    list-style:none;
}
h1,h2,h3,h4,h5,h6{
    font-size:16px;
    font-weight: normal;
}
b,strong{
    font-weight: normal;
}
i,em{
    font-style: normal;
}
a,u{
    text-decoration: none;
}
img{
    border:0;
    display:block;//去除下边3px的像素
}
input,fieldset{
    outline: none;//去除框框的蓝色模糊光条
    border:0;
}
.clear_fix:after{//清除浮动
    content:'.';
    clear:both;
    height:0;
    overflow:hidden;
    display:block;
    visibility: hidden;
}
.clear_fix{//兼容IE浏览器
    zoom:1;
}

兼容前缀

不同浏览器去读取对应的css属性

• -ms- IE浏览器
• -moz- firefox浏览器
• -webkit- webkit内核的浏览器
• -o- 欧朋浏览器

CSS3

css3渐变（gardient）

渐变不是背景颜色，而是背景图

background-image也可以，但是background-color是错误的

让你在两个或多个指定的颜色之间平稳的过渡

线性渐变

background:linear-gardient(direction,color-step1,color-step2,…)

direction


默认to bottom 自上而下的变化

to right bottoim 自左上到右下

角度：水平线和渐变线逆时针之间的角度，0deg为自下而上，90deg为自左到右，可为负数

有的浏览器的标准旧的，0deg自左到右，90deg自下而上。

格式转换：90 -标准角度 = 非标准角度

stop：颜色分布位置，默认均匀分布，三个颜色默认每个33.3%。

background:-webkit-linear-gradient(left,red,green);
background:linear-gradient(to left,red,green);

不加to 需要兼容前缀，step可为像素或者百分比

径向渐变

由一点向四周渐变

background:radial-gradient(center,ellipse,closest-side,red,green);

第一个参数开始位置（可为单词或者两个百分比）
第二个参数形状（ellipse默认椭圆，circle默认圆形，容器为正方形时两者一样）
第三个参数：渐变到哪里停止，closest-side,farthest-side;closest-corner;farthest-corner
第四个参数：颜色

重复性渐变

重复性线性渐变

div{background:repeating-linear-gradient (red,yellow 10%,green 20%);}

重复性镜像渐变

div{background:repeating-radial-gradient(red,yellow 10%,green 20%);}

CSS3过渡：transition(IE10以后都支持)

一定的时间内平滑的过渡（如鼠标点击，获得焦点，被点击等对元素改变的触发）

简写：

transition：all/具体属性值	运动时间 s/ms  动画类型  延迟时间

linear(动画类型：线性)

CSS3属性：transform变形转换

CSS3:2D

坐标系：水平x轴（向右为正），垂直y轴（向下为正）

2D的功能函数：

translate():向指定的方向移动

• 水平移动：向右translate（tx,0）和向左translate（-tx，0）
• 垂直移动：向上移动translate（0，-ty）和向下移动（0，ty）
• 对角移动：两个都写

translate（100px）水平向右移动100px

缩放scale（）：

0.01~0.99缩小

• scale(1):默认第二个值和第一个值相等
• 第一个值为水平方向，第二个值为垂直方向
• scaleX():只在水平缩放
• scaleY():只在Y轴缩放
  负数会先缩小，再按照绝对值放大
  
  
  

2D旋转rotate()：

接收角度（单位deg），如果参数为正值围着原点中心顺时针旋转，为负值围着原点中心逆时针旋转

2D倾斜skew（）：

一个值时表示水平方向的倾斜角度
第一个值为水平方向的倾斜角度
第二个值为垂直方向的倾斜角度

变化原点：transform-origin

默认时元素的中心基点，transform进行的函数变换都是围绕着中心位置发生变化的

单位百分比或者像素

小总结

transform:
		translate()两个参数，只写一个默认变x轴
		rotate()默认第二个参数等于第一个参数，可以rotateX和rotateY
		skew()两个参数，第一个水平第二个垂直
		scale():一个参数：正值顺时针，负值原点逆时针
简记：
transform四特点：移缩斜转

井深：perspective元素距离

在父元素中：perspective:1200px;


在子元素中：
transform：perspective（1200px);


通常只设置父元素，数值在900px~1200px之间

perspective-origin：观察3D元素的（位置）角度

center center（中心）
left top
100% 100% 右下角

3D坐标

相对于2D多出来个z轴靠近屏幕为正，远离屏幕为负

实现3D场景：

transform-style属性：指定嵌套位置如何在3D空间中呈现

值：flat（默认，2D）和preserve-3d表示所有子元素在3D空间中展示

3D位移：

translateZ(t)和translate3D(tx,ty,tz)

3D旋转：

rotateX(a)
rotateY(a)
rotateZ(a)
rotate3d(x,y,z,a)

x,y,z为0~1之间的的数值，围绕各自轴旋转的矢量值
a是角度值，旨在3D空间中的旋转，正值代表正旋转，负值代表逆时针旋转

3D缩放：

scaleZ（）和scale3D()两个功能函数
scale3D中，x,y为1时，tz表示在Z轴上等比例缩放

注：单独使用是没有任何效果，需要配合其他的变形函数才能一起使用

CSS3D：动画

关键帧：
过渡动画只实现了第一帧到最后一帧这连个关键帧，而关键帧动画可以实现任意多关键帧，实现更复杂的动画效果

声明：

@keyframes  mymove{
from{初始状态值}
to{结束状态值}
}

或者：

@keyframes mymove {
0%{初始化状态值}
50%{可以添加几个类似的关键帧}
100%{结束状态属性}
}

animation和transition的区别：

相同点：随着时间改变的元素
不同点：transition需要触发一个事件；而animation在不需要任何事件触发的情况下也可以随时改变CSS样式

简写：

animation:  mymove east-in-out	2s	infinite	alternate;
动画名 过渡类型  持续时间		循环次数  是否反向

动画名需要配合keyframes使用
过渡类型：

linear线性		ease-in由慢到快
ease：平滑		ease-out:由快到慢
step-start:马上跳到动画每一帧结束的状态

infinite

无限循环/也可以为数字表示循环次数

是否往返：

normal正常
reverse;反方向
alternate：现正向再反向，交替持续
alternate-reverse：先反向再正向，交替持续

没写的：动画的状态running/paused(暂停鼠标移入动画时)

HTML5基础

文件名：
.html或者.htm

DOCTYPE不区分大小写

指定字符集编码

< meta charset=“UTF-8” >

不可以写结束标记的元素：（和平时一样）

br,col,embed,hr,img,input,link,meta

可以省略结束标记的语句：

li,dt,dd,p,option,colgroup,thead,tbody,tfooter,tr,td,th
基本和表单相关的元素（标签）

可以省略全部的标签元素：

html,body,head,colgrounp,tbody
也就是大框架可以省略，但是不要这么干，不然看不懂

属性值可以用单引号，可以用双引号（前端一向单双引号自由，不严谨）

	小总结：
		文件名
		doctype
		不可以写结束标记的标签
		可以写结束标记的标签
		可以省略全部的标签
		属性上面的引号自由

---

多媒体标签

<video src=""></video>
<audio src=""></audio>

属性：

• controls，出现该属性，向用户展示控件，如播放等控件
• autoplay：视频就绪后立马播放
• loop：重复播放
• muted：静音
• poster：规定视频正在下载时的图像，指导用户点击播放

<source></source>：写在媒体标签内部，后备资源供选择
type属性:
用于视频：video/ogg   video/mp4  video/webm
用于音频：audio/ogg  audio/mpeg

HTML5表单

新增的type值：

• email:限制输入的必须是email类型
• url：限制输入的必须是url类型
• range：产生一个滚动条表单
• number:用户必须输入数字
• search：搜索意义的表单
• color：生成一个颜色的表单
• time：必须是时间类型
• month：必须是月类型
• week：必须是周类型
• datetime-local:选取本地时间
• date：日期

新增的表单属性：(每个都很重要)

• required：检测是否为空
• min:最小
• max：最大
• step：步幅，写一个数字，确定步幅大小
• list：必须结合datalist标签，绑定datalist id名称
• autocomplete：是否自动提示信息（on,off）
• placeholder:文本框提示信息
• autofocus：自动聚焦，一个页面写一个，学号是哪个后光标默认聚焦在那
• pattern:后面的属性值是正则表达式
• multiple：选择多个上传

CSS3：CSS2的升级，完全向后兼容

下面也是面试题：什么是优雅降级，渐进增强

渐进增强：由小到大
优雅降级：针对低版本，
保证最近本的功能，
针对高版本浏览器进行新效果交互等进行改造达到最佳效果体验，由大到小

区别：降级意味着往前看，渐进意味着向后看

属性选择器：

a元素是讲了伪类选择器
双冒号（也可以单个）说了伪对象选择器

p.title {
background:red;
}

选中的是：

<p class="title"></p>

同时满足多个属性选择器可以将中括号写在一起

e[attr]:是e元素，且具有att属性
e[attr="value"],e元素,并且attr="value"
e[attr~="value"]选取属性值中包含指定词汇的元素
e[attr^="value"]选取属性值是指定值开头的元素(类似正则的样子)
e[attr$="value"]选取属性值以指定值结尾的元素（类似正则的样子）
e[attr|="value"]选取必须带有指定值开头的属性值的元素，该值必须是整个单词
e[attr*="value"]:属性值包含指定值的某个元素

属性选择器简记
e[属性="value"]		//只有等于表示必须是value(精准匹配)
等于号前是：（模糊匹配）
	~	包含value这个单词
	^	必须value开头
	$	必须value结尾
	|	必须以value为整个单词开头
	* 	无论什么位置只要有这个单词就行

伪类选择器

下面选择器你知道长什么样子吗

• 伪对象选择器
• 伪类选择器
• 属性选择器
• 群组选择器
• 包含选择器（后代选择器）

结构性伪类选择器

：first-child{第一个子元素}//不是第一个就不选中

：last-child{最后一个子元素}//不是最后一个就不选中

：nth-child(n){指定位置的子元素}(**n从0开始**，可为2n,2n-1,odd(奇数),even(偶数))

：only-child{唯一子元素}//不是唯一子元素不选择

双冒号不可以(那就是伪对象了)

div：nth-last-child(n){倒数第n个不是就不选择}

所有同级同元素属性排序

first-of-type:当前类型的第一个元素
last-of-type：最后一个当前类型的元素
nth-of-type(n)当前类型的指定位置的子元素
only-of-type{}:当前类型的指定位置的子元素
only-of-type{}当前类型下唯一的子元素
nth-last-of-type{}当前类型下倒数指定位置的元素
：root{}根元素选择器，其实就是HTML
: empty{}选择内容为空的元素（不叫空元素选择器），如选择a:emnpty{}选中a内容为空的元素

学习补充：浮动元素大小被撑起来后可以设置宽高，拥有块级特性

目标伪类选择器：

UI状态伪类选择器

：enable{}可以输入的状态
：target{}点击关联元素的
：disabled{}禁用的状态
：checked{}选中的状态
：selection{}选中文字，修改背景颜色和文本颜色
：focus{}光标选中的状态

层级选择器(子元素选择器，相邻兄弟选择器，通用兄弟选择器)

子元素选择器：	
	e>a:			e的子元素a,最终选择的是a
区分后代选择器（子孙级别都选）


相邻兄弟选择器:
e+a	    			e元素最近的a，最终选择a
{因为只能选择一个，按照加载顺序自上而下，第一个不会被选中}


通用兄弟选择器：e~a   
e元素后面的所有a  最终选择a

CSS3属性：

文本阴影：

text-shadow：水平阴影  垂直阴影  模糊度  阴影颜色；
单位都是px

可以用逗号连接多个

文本换行

word-wrap：

normal：断字点换行（浏览器保持默认处理）
break-word：属性允许长单词或者URL地址换到下一行

word-break：

break-all：进行单词内断句
keep-all：文本不会换行，只会在半角空格或者连字符处换行

背景属性

background-origin:背景图起始位置

backfround-clip：背景图裁减（图片不一定完整）
border-box从边框开始
padding-box：从内边距区域开始
content-box：从内容区开始

background-size:背景图大小
数值，百分比，contain（不会超出但可能填不满），cover（超出可能显示不全）

多个背景图：backfround:url(),url();

颜色模式：
hsl(色调，饱和度，亮度)
hsla
h(0~360)
s(0~100%)
l(0~100%)
a(0~1)

图片边框：

border-image是复合写法

border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移(不加单位)。
border-image-repeat	图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)
border-image-outset	边框图像区域超出边框的量(值是一个倍数)

CSS圆角

border-radius:(左上) （右上）（右下） （左下）
border-radius:(左上) （右上左下）（右下）
border-radius:(左上右下) （右上左下）
border-radius:四个角
可以指定单个

字体图标

下载图标
在页面种引入iconfont.css
调用对应图标的类名

盒子阴影

box-shadow：水平阴影  垂直阴影 模糊度 阴影大小  阴影颜色 内外部阴影

默认outside（写了就错），inside（内部）

calc（）：计算宽高公式

calc（ 数值 - 数值 ）
一定要注意空格
有的时候需要加前缀
如width：calc（100% - 200px）;//连个元素浮动在一行

pointer-event:鼠标点击穿透

可以穿透div点中下面的div（没用过，看看知道就好）

flex布局

不推荐看下面的部分，推荐链接阮一峰flex布局

flex容器（父元素）：

第一步：设为弹性盒子

display：flex，inline-flex（类似行内，行内块）

• 子元素宽度超过父元素也不会换行

注：设置容器后子元素的float，clear，vertical-align都失效

• 元素默认在水平摆放；元素宽度由内容撑起来，高度和父元素一致

• 子元素为行内元素也可以设置宽高

特点：

1. 弹性盒子里面的离他最近的一层子元素都可以添加大小
2. 如果想让弹性盒子里面的一个子元素左右上下居中，只需要给子元素加上margin：auto就可以了
3. 弹性盒子里面的子元素都是沿着主轴排列的
   “主轴”可能是X轴也可能是Y轴，如果X是主轴，Y就是侧轴

flex-direction：主轴方向

值	意思
row(默认)	水平主轴（从左到右）
row-reverse	反向水平主轴（从右到左）
column	垂直主轴（从上到下）
row-reverse	垂直反向主轴

flex-wrap：是否设置换行

值	意思
nowrap	不换行
wrap	换行
wrap-reverse	反向换行

综合写法：flex-flow：flex-direction flex-wrap

justify-content:设置项目在主轴上的对齐方式

• flex-start:起始位置

• flex-end:终点位置

• center：整体居中

• space-around：两端平分（像外边距）

• space-between:两端对齐（去除两端的外边距）

• space-evenly:两端对齐（空隙间距一致）（有的不支持）
  
  
  
  align-items：侧轴对齐方式

• flex-start：起始位置

• flex-end：终点位置

• center：整体居中

• baseline：文本底部对齐（容器对不对齐不参与）

• stretch:拉伸（默认值，主轴水平方向拉升的是高度，否则是宽度）
  
  
  
  align-content：侧轴多根轴向对齐方式（应该是换行之后产生多个交叉轴）
  将整个一行作为一个项目

• flex-start:起始位置

• flex-end：终点位置

• center：整体居中

• space-around：两端对齐

• space-between：两端对齐

• stretch：(没设高度时默认自适应高度）拉伸

flex项目（容器里面的子元素）

align-self

会覆盖align-item，对单个项目有效

• auto 默认值
• stretch 拉伸
• center 居中
• flex-start 起始位置
• flex-end 终点位置

order:项目排序

数值越小越靠前，可以为负值，默认是0
flex-grow:项目的放大比例
默认是0，即存在剩余空间也不放大

都为1就会等分剩余空间（剩余空间按照flex-grow的值按比例分配）

flex-shrink:项目的缩小比例

默认是1，不够时都等比缩小；若是有为0的，那么除了为0的都缩小

flex-basis：分配多余空间之前占据的空间（使用和width差不多）

默认值是auto，即项目本来大小

上面的总结起来就是flex属性(建议使用这个属性，不要拆开写，因为浏览器会推算相关值)
flex:flex-grow 		flex-shrink 		flex-basis			(默认值0 	1	auto)
快捷值：auto(1 1  auto)   			none(0  0  auto)

多列布局（看上去像报纸一样）

• column-count: 属性规定元素应该被分隔的列数
• column-gap：属性规定了列之间的大小间隔
• column-rule：属性的列与列之间的边框，复合属性
• column-rule-color：规定列之间规则的颜色
• colum-rule-style：规定列之间规则的样式
• column-rule-width：列之间规则的宽度
• column-fill：对象的所有列的高度是否统一
• auto：列的自适应内容
• balance：所有列的高度中以最高的一列统一
• column-span：对象元素是否横跨所有列
• none:不横跨
• all:横跨所有列
• column-width：设置检索对象每列的宽度
• columns:复合属性
• columns:width count;

菜鸟教程：CSS3多列

媒体查询(适应不同设备的响应式)

用的少，看看就好

@media all and (min-width:320px) {
body { background-color:blue;}
}

and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)

(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。

all支持所有类型，screen支持屏幕

移动端

在vscode里面自动创建的模板中包含一个mate标签（H5只允许它为单标签）

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

不要手写，容易出错

width:宽度等于当前设备的宽度
initial-scale：初始缩放比例（默认设置1.0）
minimum-scale：允许用户缩放最小比例
maxmum-scale：允许用户缩放最大比例
user-scalable：用户是否可以手动缩放（默认no）

什么是物理像素
出场时你屏幕就决定了你的物理像素

逻辑像素
UI给你的设计图测出来的像素就是逻辑像素

css像素
你最终写的像素

设备像素比
这里需要查询文档，我这里离可能不准确

设备像素	设备像素比（物理像素/逻辑像素）	css像素
750px	dpr = 2	375px
640px	dpr=2
1080px	dpr=3

常见单位

单位	表示什么
px	像素
em	父元素大小，和font-size成倍数关系
rem	根元素大小，和font-size成倍数关系
vw	跟浏览器窗口大小相关，100vw=屏宽，随着浏览器宽度变化而变化
vh	同vw，是表示高度的
vmin	选择vm和vh中小的作为基准
vmax	选择vm和vh中大的作为基准

如果浏览器设置为1100px宽、700px高，1vmin会是较小的7px，而1vmax将是较大的11px。
然而，如果宽度设置为800px，高度设置为1080px，1vmin将会是较小的8px，而1vmax将会是较大的10.8px

移动端适配

动态设置font-size

• 通过js(自行上网查找代码,flexible.js)
• 通过vw

注：要给body重置一下font-size，不然行内元素空格特别大

布局模式（记一些专业名词，需要详细需要查看他人博客）

移动端布局：流式布局（文字流式，控件弹性，图片等比例缩放）

grid布局（很好能看到，作为知识扩展，未来有使用的趋势）

好处：横平竖直 ，对仗工整
补充链接:grid布局简单使用

容器（父元素）

display:grid/inline grid   网格布局
grid-template-columns:第一列  第二列 第三列（分列）；
px
,%
,fr,
auto:自动填充列宽
repeat(列数，列宽)
auto-fill：自动根据列宽填充多少列
minmax(最小宽，最大宽)
最小宽可以是px,百分比，不可是fr

grid-template-rows:分行，同上

项目（子元素）

grid-column-gap:列间距  grid-row-gap行间距  grid-gap:行间距  列间距；
新版本可省略grid前缀
grid-template-areas:”第一列  第二列 第三列 第四列”
”第一列  第二列 第三列 第四列”
”第一列  第二列 第三列 第四列”
”第一列  第二列 第三列 第四列”
注：需要结合项目属性grid-area：列名	使用；
区域连接后必须是矩形


grid-auto-flow:row/column//未指定区域的子项的排列顺序，按照行或列去填

justify-items:项目在	单个网格中的水平对齐方式
start，end，center，stretch
align-items：项目在当个网格中的垂直对齐方式
start，end，center，stretch
综合写法：
place-items：垂直对齐方式 水平对齐方式


justify-content:网格整体水平对齐方式
align-content：网格整体垂直对齐方式
综合写法：place-content：垂直 水平
start
end 
center
stretch
space-around
space-between
space-evenly

添加在项目上的：
grid-area：项目调用指定分区

grid-column-start起始列项
grid-column-end结束列项
grid-row-start起始行项
grid-row-end结束列项
综合写法：grid-column:起始/结束
grid-row:起始/结束

后续补充

浏览器兼容；
CSS bug（问题）:
css hack(解决办法):
filter(过滤器)：


IE常见bug：
常见问题：
1)图片有边框BUG
当图片加<a href=“#”></a>在IE上会出现边框
Hack:给图片加border:0;或者border:0    none;


2)图片间隙
div中的图片间隙BUG
描述：在div中插入图片时，图片会将div下方撑大大约三像素。
hack1:将</div>与<img>写在一行上；
hack2:将<img>转为块状元素，给<img>添加声明：display:block;


3)  双倍浮向（双倍边距）（只有IE6出现）
描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。
hack:给浮动元素添加声明：display:inline;


4)默认高度（IE6、IE7）
描述：在IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）
hack1:给元素添加声明：font-size:0;
hack2：给元素添加声明：overflow:hidden;


非IE BUG：

5)表单元素对齐不一致
描述：表单元素行高对齐方式不一致
hack:给表单元素添加声明：float:left;


6)按钮元素默认大小不一

描述：各浏览器中按钮元素大小不一致
hack1： 统一大小/（用a标记模拟）
hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。
hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。


8)鼠标指针bug
描述：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
hack:    如统一某元素鼠标指针形状为手型，
应添加声明：cursor:pointer


cursor:         ;
auto默认
crosshair加号
text文本
wait等待
help帮助
progress过程
inherit继承
move移动
ne-resize向上或向右移动
pointer手形



9)透明属性
兼容其他浏览器写法：opacity:value;(value的取值范围0-1;
	例：opacity:0.5;)
IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100(整数)


过滤器：
  1.下划线属性过滤器
  当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。
  
  语法：选择符{_属性：属性值；}
 

  2. !important关键字过滤器
  
  它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它，
我们可以利用IE6的这个Bug作为过滤器来兼容ＩＥ６和其它标准浏览器。

  语法：选择符{属性：属性值!important;}
 

  3. *属性过滤器

  当在一个属性前面增加了*后，该属性只能被IE7浏览器识别，其它浏览器混略该属
性的作用。

 语法：选择符{*属性：属性值；}


  4.   \9  ：IE版本识别；其它浏览器都不识别
语法：选择符{属性：属性值\9;}

  5.   \0  :   IE8 及以上版本识别；其它浏览器都不识别

---

博文不是很完整，仅作为个人笔记，错误之处还请指正。

HTML/CSS常见面试题
一、HTML篇
1.1、c/s架构和b/s架构分别是什么，有什么优缺点
BS:(Browser/Server,浏览器/服务器模式),web应用 可以实现跨平台，客户端零维护，但是个性化能力低，响应速度较慢。
CS:(Client/Server,客户端/服务器模式),桌面级应用 响应速度快，安全性强，个性化能力强，响应数据较快
区别
硬件环境不同： C/S用户固定，一般只应用于局域网中，要求拥有相同的操作系统，如果对于不同操作系统还要相应开发不同的版本，并且对于计算机电脑配置要求也较高。
B/S 要求有操作系统和浏览器就行，与操作系统平台无关（可以实现跨平台），对客户端的计算机电脑配置要求较低。
B/S 优缺点
优点： 分布性强，客户端零维护。只要有网络、浏览器可以随时随地进行操作。
业务扩展简单方便，通过增加网页就可以实现增加功能。
维护方便，通过修改网页即可实现所有用户的更新。
开发简单，共享性强。
缺点： 个性化弱，个性化定制差。因为基于浏览器
跨浏览器差。
B/S的交互方式是请求→响应，需要动态刷新页面，响应数据考虑到网络问题。后台数据压力大。
安全性和速度上需要进行特定优化
功能不及传统模式
C/S 优缺点
优点： 能充分发挥客户端PC处理能力，可以在客户端处理数据后再发送请求。响应快。
操作界面能满足客户的个性化需求。
C/S结构的管理信息系统具有较强的事务处理能力，能实现复杂的业务流程。
安全，可以对权限多次校验，提供更加安全的存储模式，对信息安全掌控能力较强
缺点： 需要专门的客户端安装程序，
兼容性差，不同的开发工具需要重新修改程序
开发，维护成本高，更新系统需要重新安装客户端
跨平台需要有专门的客户端

1.2、图片有哪几种格式，分别有什么优缺点
png-24 jpg gif svg(可缩放矢量图形)
图片的大小 大 中等 小
图片质量 好 中等 差
透明度 支持半透明 不支持 支持
作用 logo 产品图 动的地方 设计高分辨率的Web图形页面
常年不换的小图标 常换的图

                  WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空                       间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

                  在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

1.3、介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
（1）渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
（2）JS引擎则：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

1.4、你知道什么是文档声明吗？都有哪几种文档声明？如果没有文档声明会怎么样，什么是怪异模式、什么是标准模式？
<!DOCTYPE> 文档声明位于文档中最前面的位置，处于 标签之前。告知浏览器的解析器使用哪种 HTML 或 XHTML 规范解析页面。
IE下如不书写文档声明会使用怪异模式解析网页导致一系列CSS兼容性问题
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
在W3C标准出来之前，浏览器的解析方式为怪异模式(quirks mode)或兼容模式，W3C标准出来之后，浏览器的解析方式为严格模式(strict mode)或标准模式。
使用范围： 怪异模式一般使用在低版本的IE浏览器中
严格模式一般使用在谷歌、火狐等高版本的浏览器中
严格模式、混杂模式和怪异模式的区分
1）严格模式：严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
2）混杂模式：混杂模式的页面以宽松的向后兼容的方式显示；模拟老的浏览器的行为以防止站点无法工作
3）怪异模式：怪异模式则是使用浏览器自己的方式来解析执行代码。

1.5、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
* HTML5 现在已经不是 SGML（通用标言·标准通用标记语言） 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素，比如 article（主体）、footer（脚部）、header（头部）、nav（导航）、section（主体）;
表单控件，calendar（日历 ）、date、time、email、url、search（搜索框）;
新的技术
webworker（执行在后台得Javascrip独立其他脚本，还可以做其他的事情，互不影响）；,
websocket（一种新的网络协议，实现了浏览器与服务器全双工通信）；
Geolocation;（地理位置定位）
移除的元素：
纯表现的元素： Basefont(定义字体的默认颜色和字体，大小 ，兼容性差)，big， center，font, s，strike（给文字加删除线的），tt， u;
对可用性产生负面影响的元素： frame（三角框架）
frameset(组织多个窗口的框架)
noframes （为不支持框架的浏览器显示文本）；
* 支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式。
当然也可以直接使用成熟的框架、比如html5shim;

* 如何区分HTML5： DOCTYPE声明\新增的结构元素\功能元素
H5新特性
表单 画布 音视频 地理定位 媒体查询 css新特性 离线缓存 本地存储 拖拽

1.6、Label的作用是什么？是怎么用的？
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
Number:
<input type=“text“name=“Name” id=“Name”/>
Date:

1.7、如何在页面上实现一个圆形的可点击区域？
1、map+area或者svg
2、border-radius
3、纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

1.8、title与h1的区别、b与strong的区别、i与em的区别？
title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容。
i内容展示为斜体，em表示强调的文本；
Physical Style Elements – 自然样式标签
b, i, u, s, pre
Semantic Style Elements – 语义样式标签
strong, em, ins, del, code
应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。

1.9、div+css的布局较table布局有什么优点
正常场景一般都适用div+CSS布局，
优点： 1. 结构与样式分离
2. 代码语义性好
3. 更符合HTML标准规范
4. SEO友好
Table布局的适用场景： 某种原因不方便加载外部CSS的场景，例如邮件正文，此时用table布局可以在无css情况下保持页面布局正常

1.10、的title和alt有什么区别？
title是global attributes之一，用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。
alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提高图片可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

1.11、常见兼容性问题？
png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
.bb{
background-color:#f1ee18;/所有识别/
.background-color:#00deff\9; /IE6、7、8识别/
+background-color:#a200ff;/IE6、7识别/
_background-color:#1e0bd1;/IE6识别/
}
IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

1.12、如何实现浏览器内多个标签页之间的通信?
WebSocket、SharedWorker；
也可以调用localstorge、cookies等本地存储方式；
localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
我们通过监听事件，控制它的值来进行页面信息通信；
注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；

1.13、iframe有那些缺点？
*iframe会阻塞主页面的Onload事件；
*搜索引擎的检索程序无法解读这种页面，不利于SEO;
*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
动态给iframe添加src属性值，这样可以绕开以上两个问题。

1.14、常见的浏览器内核有哪些？
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

1.15、HTML5的离线储存怎么使用，工作原理能不能解释一下？
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
1、页面头部像下面一样加入一个manifest的属性；
2、在cache.manifest文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在离线状态时，操作window.applicationCache进行需求实现。

1.16、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

1.17、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。

1.18、简述一下你对HTML语义化的理解？
用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

1.19、实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果

1.20、HTML5的form如何关闭自动完成功能
给不想要提示的 form 或某个 input 设置为 autocomplete=off

1.21、 简述一下src与href的区别
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

1.22、谈谈以前端角度出发做好SEO需要考虑什么
搜索引擎主要以:
外链数量和质量,网页内容和结构等来决定某关键字下的网页搜索排名。
前端应该注意网页结构和内容方面的情况：
Meta标签优化：主要包括主题（Title)，网站描述(Description)。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等，符合W3C规范的语义性标签的使用
如何选取关键词并在网页中放置关键词：搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

1.23、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致

1.24、如何在 HTML5 页面中嵌入音频和视频
HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3、Wav 和 Ogg：


Your browser does’nt support audio embedding feature.

和音频一样，HTML5 定义了嵌入视频的标准方法，支持的格式包括：MP4、WebM 和 Ogg：


Your browser does’nt support video embedding feature.

1.25、css sprite是什么,有什么优缺点
概念：精灵图（雪碧图）将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
优点： 减少HTTP请求数，极大地提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
缺点： 图片合并麻烦
维护麻烦，修改一个图片可能需要从新布局整个图片，样式

二、CSS篇
1.1、解释box-sizing
box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。
content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高
border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content
应用场景：统一风格的表单元素 表单中有一些input元素其实还是展现的是传统IE盒模型，带有一些默认的样式，而且在不同平台或者浏览器下的表现不一，造成了表单展现的差异。此时我们可以通过box-sizing属性来构建一个风格统一的表单元素

1.2、CSS3新增伪类有那些
p:first-of-type 选择属于其父元素的首个

元素的每个

元素
p:last-of-type 选择属于其父元素的最后

元素的每个

元素
p:only-of-type 选择属于其父元素唯一的

元素的每个

元素
p:only-child 选择属于其父元素的唯一子元素的每个

元素
p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素
::after 在元素之前添加内容,也可以用来做清除浮动
::before 在元素之后添加内容
:disabled 控制表单控件的禁用状态
:checked 单选框或复选框被选中

1.3、CSS选择符有哪些？哪些属性可以继承？
* 1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a:hover, li:nth-child）
* 可继承的样式： font-size font-family color, UL LI DL DD DT;
* 不可继承的样式：border padding margin width height ;

1.4、CSS优先级算法如何计算？
* 优先级就近原则，同权重情况下样式定义最近者为准;
* 载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高

1.5、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
居中一个浮动元素
确定容器的宽高 宽500 高 300 的层
设置层的外边距
.div {
width:500px ; height:300px;//高度可以不设
margin: -150px 0 0 -250px;
position:relative; //相对定位
background-color:pink; //方便看效果
left:50%;
top:50%;
}
让绝对定位的div居中

  	position: absolute;
  	width: 1200px;
  	background: none;
  	margin: 0 auto;
  	top: 0;
  	left: 0;
  	bottom: 0;
  	right: 0;

1.6、display有哪些值？说明他们的作用。
block 像块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 像行内元素一样显示，但其内容象块类型元素一样显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承 display 属性的值

1.7、position的值relative和absolute定位原点是？
absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit 规定从父元素继承 position 属性的值。

1.8、CSS3有哪些新特性？
新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
圆角 （border-radius:8px）
多列布局 （multi-column layout）
阴影和反射 （Shadow\Reflect）
文字特效 （text-shadow、）
文字渲染 （Text-decoration）
线性渐变 （gradient）
旋转 （transform）
增加了旋转,缩放,定位,倾斜,动画，多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

1.9、一个满屏 品 字布局 如何设计?
简单的方式：
上面的div宽100%，
下面的两个div分别宽50%，
然后用float或者inline使其不换行即可

1.10、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

1.11、为什么要初始化CSS样式。
- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
- 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）
淘宝的样式初始化代码：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

1.12、css定义的权重
!important 行间 > id选择器 > 类选择器(属性,伪类) > 标签选择器（伪元素） > 通配符
infinity 1000 100 10 1 0

1.13、对BFC规范(块级格式化上下文：block formatting context)的理解？
（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。
创建规则：
根元素
浮动元素（float不是none）
绝对定位元素（position取值为absolute或fixed）
display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素
overflow不是visible的元素
作用： 可以包含浮动元素
不被浮动元素覆盖
阻止父子元素的margin折叠

1.14、请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2.使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

1.15、浮动元素引起的问题和解决办法？
浮动元素引起的问题：
（1）父元素的高度无法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决方法：
使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：
.clearfix:after{content: “.”;display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
清除浮动的几种方法：
1，额外标签法，

（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）
2，使用after伪类
#parent:after{
content:"."; height:0; visibility:hidden; display:block; clear:both;
}
3,浮动外部元素
4,设置overflow为hidden或者auto

1.16、移动端的布局用过媒体查询吗？
css的媒体查询允许通过@media标签为特定媒体的浏览器设定样式，其中包含众多筛选，功能强大。

1.17、CSS优化、提高性能的方法有哪些？
将样式表放到页面顶部
不使用CSS表达式
不使用@import
不使用IE的Filter

1.18、在网页中的应该使用奇数还是偶数的字体？为什么呢？
应该是用偶数字体
原因：
一，像谷歌一些比较流行的浏览器一般会有个默认的最小字体，而且对奇数字体渲染的不太好看

1.19、margin和padding分别适合什么场景使用？
何时应当使用margin
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。
何时应当时用padding
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。

1.20、全屏滚动的原理是什么？用到了CSS的那些属性？
全屏滚动的原理就是每次滚动滚轮，屏幕移动的距离就刚好是一个屏幕的距离，利用css的高度百分比实现这个效果，因为设定百分比的值是需要更具父元素设置的所 以需要给html，body都设置为高度百分百，然后一层一层的设置，用js控制鼠标滚轮事件

1.21、什么是响应式设计？响应式设计的基本原理是什么？
响应式设计就是为了实现根据不同设备环境自动响应及调整网页布局的一种设计方案
基本原理就是利用css的媒体查询功能更具不同屏幕的大小，向下兼容设备、移动优先，达到响应的效果

1.22、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。
对于CSS2之前已有的伪元素，比如:before和:after，单冒号和双冒号的写法::before和::after作用是一样的。
如果只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。

1.23、如何修改chrome记住密码后自动填充表单的黄色背景 ？
chrome 表单自动填充后，input文本框的背景会变成黄色的，通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：
input : -webkit-autofill {
background-color : #FAFFBD ; background-image : none ; color : #000 ;
}
在有些情况下，这个黄色的背景会影响到我们界面的效果，尤其是在我们给input文本框使用图片背景的时候，原来的圆角和边框都被覆盖了：
情景一：input文本框是纯色背景的
可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景；如：
input : -webkit-autofill {
-webkit-box-shadow : 0 0 0px 1000px white inset ; border : 1px solid #CCC !important ;
}
如果你有使用圆角等属性，或者发现输入框的长度高度不太对，可以对其进行调整，除了chrome默认定义的background-color，background-image，color不能用!important提升其优先级以外，其他的属性均可使用!important提升其优先级，如：
input : -webkit-autofill {
-webkit-box-shadow : 0 0 0px 1000px white inset ; border : 1px solid #CCC !important ;
height : 27px !important ; line-height : 27px !important ; border-radius : 0 4px 4px 0 ;
}
情景二：input文本框是使用图片背景的
这个比较麻烦，目前还没找到完美的解决方法，有两种选择：
1、如果你的图片背景不太复杂，只有一些简单的内阴影，那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖掉黄色背景，此时只不过是没有了原来的内阴影效果罢了。
2、如果你实在想留住原来的内阴影效果，那就只能牺牲chrome自动填充表单的功能，使用 js 去实现，例如：
$ ( function () {
if ( navigator . userAgent . toLowerCase (). indexOf ( “chrome” ) >= 0 ) {
$ ( window ). load ( function (){
$ ( ‘ul input:not(input[type=submit])’ ). each ( function (){
var outHtml = this . outerHTML ;
$ ( this ). append ( outHtml );
});
});
}
});
遍历的对象可能要根据你的需求去调整。如果你不想使用js，好吧，在form标签上直接关闭了表单的自动填充功能：autocomplete=“off”。

1.24、怎么让Chrome支持小于12px 的文字？
加webkit前缀 transform scale进行缩放

1.25、让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）

1.26、position:fixed;在android下无效怎么处理？
可以使用css的变形功能对文字缩放

1.27、如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

1.28、display:inline-block 什么时候会显示间隙？
移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

1.29、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
box-sizing方案
外层box-sizing: border-box; 同时设置padding: 100px 0 0；
内层100像素高的元素向上移动100像素，或使用absolute定位防止占据空间；
另一个元素直接height: 100%;
absolute positioning
外层position: relative；
百分百自适应元素直接position: absolute; top: 100px; bottom: 0; left: 0
js计算

1.30、什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，
所以不如隔离开。
因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，
这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。
同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，
提高了webserver的http请求的解析速度。

1.31、什么是CSS 预处理器 / 后处理器？
- 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，
还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
- 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的
是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

1.32、什么是CSS reset？
重置浏览器标签的样式表
在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

1.32、渐进增强和优雅降级
渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

1.33、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？
FOUC - Flash Of Unstyled Content 文档样式闪烁

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法简单的出奇，只要在之间加入一个或者

1.34、display: none;与visibility: hidden;的区别
联系：它们都能让元素不可见
区别：
display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容

1.35、rem和em
rem和em都是相对设置大小的单位，而且都是相对于字体大小
rem想对于跟节点html的文字大小
em想对于父级元素的字体大小设置

1.36、css3中的动画
css中动画功能分为transition和animation两种，这个两种方法都可以通过改变css中的属性值来产生动画效果
transition：只能实现两个简单值之间的过渡
animation：通过引用keyframes关键帧来实现复杂动画

1.37、css等高布局如何实现
利用padding-bottom|margin-bottom正负值相抵；
设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，
当它里面的任 一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差

1.38、 重排和重绘？
部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。
由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新。这样的更新被称为重绘。
什么情况会触发重排和重绘？ 添加、删除、更新 DOM 节点
通过 display: none 隐藏一个 DOM 节点-触发重排和重绘
通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，因为没有几何变化
移动或者给页面中的 DOM 节点添加动画
添加一个样式表，调整样式属性
用户行为，例如调整窗口大小，改变字号，或者滚动

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

HTML( Hyper Text Markup Language 超文本标记语言) 

<books id='1'>标签体</books>

HTML( Hyper Text Markup Language 超文本标记语言) 

标签体

1.常见的文本标签

1.1. h1-h6 内容标题

1.2. 段落标签 p

1.3. hr水平分割线

1.4. br换行

2.列表标签

2.1. 无序列表 ul 和 li

2.2. 有序列表 ol和li

2.3.列表嵌套

3.图片标签img

3.1超链接a

4.表格标签table

4.1.表单form

4.2.文本框

4.3.特殊字符（实体引用）

4.4.分区标签

5.CSS 层叠样式表 用于美化页面

5.1.三种引入方式:

5.2.选择器

5.4.颜色赋值

5.5.背景图片

5.6.文本相关

5.7.元素的显示方式display

5.8.盒子模型= 宽高+外边距+边框+内边距

5.9.宽高:

5.10.外边距

5.11.盒子模型之边框

5.12.盒子模型之内边距

CSS的三大特性

1.继承性

2.层叠性

3.选择器优先级

定位方式

1.定位方式之静态定位(文档流定位)

2.定位方式之相对定位

3.定位方式之绝对定位

4.定位方式之固定定位

5.定位方式之浮动定位

溢出设置overflow

行内元素的垂直对齐方式vertical-align

显示层级z-index

---

 

超文本： 不仅仅是纯文本还包括字体样式相关和多媒体信息（音频视频图片）

1.常见的文本标签

1.1. h1-h6 内容标题

   独占一行 自带上下间距 字体加粗 字体大小不一

1.2. 段落标签 p

   独占一行 自带上下间距

1.3. hr水平分割线

1.4. br换行

  在html中 回车只能识别成一个空格  需要换行使用br

2.列表标签

2.1. 无序列表 ul 和 li

2.2. 有序列表 ol和li

属性： type控制图标类型      start控制起始值   reversed 降序

2.3.列表嵌套

有序列表和无序列表可以任意无限嵌套  

3.图片标签img

src：路径

相对路径： 访问站内资源时使用

文件和页面同级： 直接写文件名

文件在页面的上级：  ../文件名

文件在页面的下级： 文件夹名/图片名

绝对路径： 访问站外资源  ，又称为图片盗链（好处节省本站资源，坏处：有可能找不到图片）

alt:图片不能正常显示时显示的文本

title：鼠标悬停时显示的文本

width/height: 设置宽高      

两种方式：1.像素   2. 百分比

如果只设置宽度 高度会等比例缩放

3.1超链接a

href：类似于src， 资源路径， 可以指向页面资源或文件资源，如果是页面资源直接显示，如果是文件资源浏览器支持浏览则直接浏览不支持则下载

图片超链接： 用a标签包裹img图片 则是图片标签

页面内部跳转， 在目的地元素里面添加id=“xxx"     然后通过超链接的href=”#xxx“ 跳转到指定元素的位置

4.表格标签table

标签： table  tr表示行  td表示列  th表头   caption表格标题  

属性： table(border边框  cellspacing单元格间距   cellpadding单元格距内容的距离)   td(colspan跨列  rowspan跨行)

4.1.表单form

作用： 获取用户输入的各种信息 并且把信息提交给服务器

学习form表单主要学习的就是form表单中的各种控件，包括：文本框，密码框，提交按钮，单选，多选，下拉选等  

4.2.文本框

input   type=text  属性  name  value值    placeholder占位文本  maxlength最大字符长度     readonly只读

密码框： input  type=password    属性和文本框通用

单选： input type=radio   checked默认选中      

label标签： 扩充点击范围  点字也能生效

多选：  input  type=checkbox   checked默认选中

日期：  input type=date   

文件：  input type=file  

下拉选： select  里面装多个option标签  option里面可以添加selected

文本域： textarea    cols一行显示的数量  rows行数     

提交按钮： input  type=submit

重置按钮： input  type=reset

自定义按钮： input type=button

4.3.特殊字符（实体引用）

空格  &nbsp： html中连续写多个空格只能识别出一个空格， 这种现象称为空格折叠现象,如果需要显示多个空格使用以下内容;

小于号 &lt

大于号 &gt;

4.4.分区标签

作用: 分区标签可以理解为一个容器,里面装各种有相关性的标签, 便于统一管理

div:块级分区元素, 特点: 独占一行

span:行内分区元素, 特点: 共占一行   

如何对页面内容进行分区?

   一般情况下 一个页面至少分为3大区域,每一个大的区域内还会有n个小的分区

html

  <div>头</div>

  <div>体</div>

  <div>脚</div>

4.5.html5标准中新增了几个分区标签:   

  header头  footer脚   article正文/文章   section区域  nav导航     这几个分区标签的作用和div一样

html

<header>头</header>

<article>体</article>/<section>体</section>

<footer>脚</footer>

5.CSS 层叠样式表 用于美化页面

5.1.三种引入方式:

内联: 在标签的style属性中写样式代码 不能复用

内部: 在head标签里面添加style标签 里面写样式代码 不能多页面复用

外部: 在单独的css文件中写样式代码, 在html页面中通过link标签引入 可以多页面复用 ,可以将css代码和html代码分离 工作中用的最多

优先级:内联最高 内部和外部一样 后执行的覆盖先执行的

5.2.选择器

标签名 div{}

id #id{}

类 .class{}

分组选择器 标签名,#id,.class{}

任意元素 *{}

属性 标签名[属性名='xxx']{}

子孙后代 div span{}

子元素 div>span{}

伪类 a:visited/link/hover/active{}

5.4.颜色赋值

颜色单词 red

6位16进制 #ff0000

3位16进制 #f00

3位10进制 rgb(255,0,0)

4位10进制 rgba(255,0,0,0-1)

5.5.背景图片

background-image:url("路径") ; 设置背景图片

background-size: 宽度 高度; 设置背景图片尺寸

background-repeat: no-repeat; 禁止重复

background-position: 横向百分比 纵向百分比; 位置

5.6.文本相关

文本修饰 text-decoration: underline/overline/line-through/none;

文本水平对齐方式 text-align: left/right/center

文本颜色: color:red;

行高 line-height: 20px ; 可以实现垂直居中

阴影 text-shadow: 颜色 x偏移值 y偏移值 浓度

字体大小 font-size:20px;

字体加粗 font-weight: bold/normal;

斜体 font-style: italic;

字体设置 font-family: xxx,xxx,xxx,xxx; font: 20px xxx,xxx,xxx;

5.7.元素的显示方式display

display: block; 块级元素 独占一行 可以修改宽高 包含: h1-h6,p,div等

display: inline; 行内元素 共占一行 不能修改宽高 包含: span,b,i,u,small,超链接a等

display:inline-block; 行内块元素 共占一行 并且能修改宽高 包括:img,input等

每个元素都有自己默认的显示方式 但是这个显示方式可以根据用户需求改动

5.8.盒子模型= 宽高+外边距+边框+内边距

5.9.宽高:

两种赋值方式

像素

上级元素百分比

行内元素不能修改宽高

5.10.外边距

外边距: 元素距上级元素或相邻兄弟元素的距离称为外边距

赋值方式:

单独某一个方向赋值: margin-left/right/top/bottom:10px;

四个方向赋值: margin:10px;

上下和左右赋值: margin: 10px 20px;

居中 margin:0 auto;

上右下左顺时针赋值 margin:10px 20px 30px 40px;

上下相邻两个元素同时添加上下外边距 此时取最大值 , 左右相邻两个元素同时添加左右外边距此时两个外边距相加

行内元素上下外边距无效

body自带四个方向8个像素的外边距 , h1-h6和p标签都是自带上下间距 这个间距就是通过外边距实现的

粘连问题: 当元素的上边缘和上级元素的上边缘重叠时, 给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden解决此问题

5.11.盒子模型之边框

赋值方式:

四个方向赋值 border: 粗细 样式 颜色;

单独某个方向赋值 border-left/right/top/bottom: 粗细 样式 颜色;

圆角: border-radius:20px; 值越大越圆 当超过宽高一半时 为正圆形.

5.12.盒子模型之内边距

元素边缘距元素内容(元素文本或子元素)的距离称为外边距

给元素添加内边距会影响元素的宽高

赋值方式和外边距类似

padding-left/right/top/bottom:10px;  单独某一个方向赋值
padding:10px;  四个方向赋值
padding:10px 20px;  上下10  左右20
padding:10px 20px 30px 40px; 上右下左顺时针    

CSS的三大特性

1.继承性

元素可以继承上级元素文本和字体相关的样式, 部分标签自带效果不受继承影响 比如: 超链接字体颜色,h1-h6字体大小不受继承影响

2.层叠性

多个选择器有可能选择到同一个元素, 如果设置的样式不同则全部层叠生效,如果作用的样式相同,则由优先级决定.

3.选择器优先级

作用范围越小优先级越高

#d1{ color:red; } div{ color:blue; }

定位方式

包括: 静态定位,相对定位,绝对定位,固定定位,浮动定位

1.定位方式之静态定位(文档流定位)

格式: position:static; 这是默认的定位方式

特点: 块级元素从上往下排列 行内元素从左向右排列

如何控制元素位置: 通过外边距

2.定位方式之相对定位

格式: position:relative;

特点: 元素不脱离文档流(不管元素显示到什么位置 仍然占着文档流中的位置)

如何控制元素位置: 通过left/right/top/bottom , 相对于元素的初始位置做偏移

3.定位方式之绝对定位

格式:position:absolute;

特点: 元素脱离文档流(不占原来的位置)

如何控制元素位置: 通过left/right/top/bottom,相对于窗口(默认)或某一个上级元素做位置偏移

如果需要以某个上级元素做参照物的话需要给上级元素添加 position:relative;

4.定位方式之固定定位

格式: position:fixed;

特点: 元素脱离文档流

如何控制元素位置: 通过left/right/top/bottom 相对于窗口做位置偏移.

5.定位方式之浮动定位

格式: float:left/right;

特点: 脱离文档流,元素从当前所在行向左或向右浮动, 当撞到上级元素或其它浮动元素时停止.

如果一行装不下会自动换行,换行时有可能被卡住

应用场景: 当需要将纵向排列改成横向排列时使用浮动定位

当元素的所有子元素全部浮动时,自动高度会识别为0, 通过给元素添加overflow:hidden解决此问题

溢出设置overflow

visible 超出显示(默认)

hidden 超出隐藏, 解决粘连问题和高度识别为0的问题

scroll 超出滚动显示

行内元素的垂直对齐方式vertical-align

top: 上对齐

middle:中间对齐

bottom:下对齐

baseline: 基线对齐

显示层级z-index

z-index的值越大显示越靠前