前端简介

web 发展史

WEB1.0(网页展示内容) -> WEB2.0(AJAX) -> WEB3.0(HTML5:在网页上实现虚拟现实的效果)

协作流程

一个 web 系统，大公司。传统流程

策划 -> 交互 -> 视觉 -> 前端 -> 后端 -> 测试

现在开发流程：

策划 -> 交互 -> 视觉
-> 前端
-> 后端 -> 测试

工作职责

视觉稿 -> 页面制作：CSS HTML PS
交互稿 -> 页面逻辑：Javascript DOM

交互稿、视觉稿 -> 前端开发 (UI)

课程体系

页面制作 -> 页面架构 -> 前端架构设计
Javascript 程序设计 -> DOM 编程艺术

开发工具

文本编辑器

Sublime Text
Notepad++
EditPlus

IDE(继承开发环境)

WebStorm
IntelliJ IDEA
Eclipse

Sublime Text

跨平台，启动快
多行选择
各种实用插件
Snippets (支持代码片段)
支持 VIM 兼容模式可以直接使用 VI 的命令

快捷键：

Ctrl + p 查找

: + 行定位到具体到行
@ + 函数名定位到具体的函数名(JS 的函数名 CSS 的选择器名)
# + 关键字，匹配到具体的关键字

alt + f3 选中文件中所有的变量。

命令面板：(Ctrl + Shift + P)
多行选择：(Ctrl + D ，Ctrl + Shilf + L)

常用插件：

Package Control

Emmet 快速编写 HTML CSS 代码
DocBlockr 快速写注释
SideBarEnhancements 使用的右键菜单增强工具
Terminal 直接打开命令行终端

调试工具

chrome

Elements 调试 HTML CSS
Network 调试接口
Sources 所有资源 js 图片
Console 命令行工具，输出内容进行调试 js
Resources 网站本地数据资源 cookie 等等

Profiles Timeline 等调试性能

元素的盒模型

IE 8+ 都自带调试工具
IE 6的效果，

IETester 软件可以查看 IE6的效果

如果想要调试就必须安装 IE6 原生浏览器然后安装

Internet Explorer Developer Toolbar 来进行调试

HTML(Hyper Text Markup Language)

HTML 文档，可以分为三个部分

文档声明 - 首行、顶格写
文档头部
文档主题

文档声明的作用是告诉浏览器，你要用哪个标准解析我这份文档，HTML5之前，DOCTYPE 有很多种类型 HTML4.01 就有三种类型

HTML5

文档头部描述了文档的基本属性和信息

title 文档的标题

meta charset = “utf-8”> 文档的字符编码格式

meta name=”keywords” content=”音乐…”> 描述文档基本信息

meta name=”description” content=”网易”> content 是给搜索引擎用的

meta name=”viewport” content=”width=device-width”>设定移动端浏览器的东西

link rel=”” href=”favicon.ico”> 默认情况下不需要手动引入，如果子站和总站的 icon 不一样，则需要用这个标签引入

link rel=”” href=”../css/style.css”> 引入 css 样式
样式也可以用 style 引入

HTML 文档主题

用户真正可以在页面上看到的内容

语法

全局属性：

id ：标记元素

class：标记一类元素

style：规定了样式 CSS 样式，没有特殊情况不推荐在 style 标签中写样式

title 属性规定了元素额外的信息

a title=”收藏”> 当用户 hook 上去就能看到额外信息

HTML 标签

文档章节：

body

HTML5新增标签：

header
nav：导航
aside：和主要内容不相关的区域，插入的广告、边栏等
article：表示独立的可重复的结构，论坛的帖子、新闻，可嵌套
section：文档中的区域，或者一节。一般会带标题，相邻的 section 有关联
footer ：版权信息等等

h1 - h6

文本

超链接

创建指向另一个文档的链接
创建一个文档内部的锚点
链接到 Email 的地址

创建指向另一个文档的链接

带下划线的文字，
a href=”http://tech.163.com/“ 科技 /a
默认是 _self
a href=”http://tech.163.com/“ target=”_self” 电影 /a
在当前窗口显示
a href=”http://tech.163.com/“ target=”_blank” 财经 /a
在新窗口显示
a href=”http://tech.163.com/“ target=”inner”>财经</a

iframe frameborder=”0” name=”inner”></iframe
名称要一致

这样就会在 iframe 里面显示内容

创建一个文档内部的锚点

a href=”#pay”>下单支付</a

div id=”pay”>下单支付…</div 要跳转的地方

点击后来到对应的 div

可以通过地址栏直接让文档回到某个地方

top 回到顶部

链接到 Email 地址

联系我们
直接打开邮件
13646498666
直接跳转拨号软件

强调-em,strong

¥39

换行

引用 cite q

cite 出处，比如作品名称，人物
q 作品中的一段文字，某人说的话(会加上引号)

代码 code

格式化 b i

b：摘要中的关键字
i：技术术语

组合内容

div 分区结构

p 段落

列表

无序列表

ul
	li /li
 	li /li
/ul

有序列表

 ol
	li /li
 	li /li
/ol

自定义列表

dl
	dt 作者 /dt               dt 列表内容 (只能是一个)
	dd Cbuck Musciano /dd    dd 列表描述
	dd Bll Kennedy /dd
	dt 出版年 /dt
	dd 2007-4 /dd
/dl

嵌入式资源

img

img src=”…/cover.jpg” alt=”封面” 当图片无法显示时会展示出来

第三方的页面嵌入

iframe src=””></iframe

当前页面的 js CSS 和嵌入页面是隔离的。

嵌入插件

引入外部插件

object type:application/x-shockwave-flash  // 插件类型
param name="" value=""         // param插件参数  播放器地址写在 value 属性中
param name="" value=""
/object

object data="http://pdfReader.swf" type:  // 也可以使用 data IE8以及以下浏览器不兼容

embed type="application/x-shockwave-flash" src="http://pdfReader.swf" width= height=                             // type 插件类型，src 写上地址

视频

之前在 html 上播放视频，之前都是嵌入插件完成的。现在在 html5中会有 video 标签

video controls = "controls" poster = "/img/poster.jpg"
	source src = "movie.mp4" type = "video/mp4"
	source src = "movie.webm" type = "video/webm"
	source src = "movie.ogg" type = "video/ogg"
	<track kind = "subtitles" src = "video.srt" label = "English"
	您的浏览器不支持 video 标签  // 不支持该标签的浏览器会显示这个文字
/video

controls 属性控制播放器进度条通过 poster 属性插入视频的封面
source 标签的 src 属性里写上地址，type 写上类型，浏览器会选支持的格式进行播放。
给 video 加入 autoplay 属性会让视频自动播放，循环播放加入 loop 属性

音频

audio controls = "controls"
	source src = "someaudio.wav" type = "audio/wav"
	source src = "someaudio.mp3" type = "audio/mp3"
	您的浏览器不支持 audio 标签
/audio

与 video 类似

图

canvas(复杂，实时数据展示，游戏) svg(高保真)

热点区域

map area 点在不同的区域跳转到不同的商品页面

img src = ""  alt = "运动" width = "" height = "" usemap = "#Map2"
map	 name = "Map2"
	area shape = "rect"(原形，多边形) coords = "" href = "" target = "_blank"
	area shape = "rect" coords = "" href = "" target = "_blank"
	...
/map

表格

table

caption 标题
thead 表格的头部
tr th相片尺寸/th th富士/th tr
/thead

tbody
	tr th /th td /td td /td /tr
	tr th /th td /td td /td /tr
/tbody

tfoot
tr td colspan = 3 运费… /td /tr
/tfoot

colspan 跨列的效果
rowspan 跨行

表单

form action = “后台接口” method = “提交方式(POST)”
fieldset 对表单内容分区
legend 照片选择 /legend 分区内容标题
/fieldset

fieldset
    legend 综合设置 /legend
    div 选择尺寸 /div
    ...
/fieldset

/form

radio 单选 checkbox 复选 name 和后台交互时的字段名，value 和后台交互时的值。

input type = submit
input type = reset

分组：

label for = “delivery” 标签标示某一个 select 提示信息通过 for 属性与 id 对应
select id = “delivery”

标示 label 里面的内容表示 select 标签。

在文本框 placeholder属性中可以定义占位字符高级浏览器才有实现
默认值可以写在 value 属性中
文本框不能让用户输入只能看，readonly 属性。像后端传递隐藏属性，hidden 属性。用户看不到但是文本框的数据会传到后端

HTML5 中 input type 新类型：
email
url
number
tel
search
range
color
date picker(date, month, week, time, datetime, datetime-local)

语义化

用正确的标签描述内容

有利于 SEO(Search Engine Optimization) 搜索引擎的优化。更早的出现早用户的搜索结果中

可访问性

代码可读性

CSS

概念：Cascading Style Sheet 陈叠样式表

定义页面中的表现

引入

外部样式表

1
2
3

head
	<link rel="stylesheet" href="base.css"> // url地址
/head

内部样式表

head
	<style>
		body{background-color: red;}
		p{margin-left: 20px;}
	</style>
/head

内嵌样式

1	<p style="color: red; margin-left:20px;">this is a paragraph</p>

语法

selector {
property1: value;
property2: value;
}

选择器属性声明=属性名：属性值每个属性声明需要用分号分割
注释：/* */

浏览器的私有属性

chrome,safari
-webkit-

firefox
-moz-

IE
-ms-

opera
-o-

兼容私有浏览器：

.pic {
	-webkit-transform:rotate(-3deg);
	-moz-transform:rotate(-3deg);
	-ms-transform:rotate(-3deg);
	-o-transform:rotate(-3deg);
	transform:rotate(-3deg);
}

把私有属性写在前面，标准写在后面

属性值语法

margin:[<lengh> | <percentage> | auto]{1, 4}
基本元素组合符号数量符号

基本元素

关键字
auto, solid bold 关键字
类型
基本类型：, , …
其他类型：, …
符号
(/,)
inherit, initial(每个属性都可以取到这两个值)

组合符号

空格

<'font-size'> <'font-family'> (严格按照顺序和格式)

合法值：- 12px arial
不合法值：- 2em(只有一个) -aril 14px(顺序反了)

&&

&& (顺序无所谓，数量有要求)

合法值： - green 2px - 1em blue
不合法： - blue

||

underline || overline || line-through || blink(顺序数量都没关系)

合法值： underline
overline underline

-|单格分割符

<color> | transparent

单格分隔符的分割的两个基本元素只能出现一个
合法值：- orange -transparent
同时出现不合法

[] 分组

bold[ thin || <length>]
分组的作用

合法值

bold thin
bold 2em

数量符号

如果没有就是一个基本元素，说明基本元素只能出现一次
<length>

合法值： -1px 10em
不合法：10px 1px

+

可以出现1次或多次
<color-stop>[, <color-stop>]+

合法值

#fff, red
blue, green 50%, gray

不合法值：

?

表示基本属性可以出现也可以不出现
inset?&&<color>

合法值： -inset blue - red

{}

<length>{2,4} (表示最少出现几次，最多出现几次)

*

<time>[,<time>]*

允许出现任意次

<time># (表示它需要出现一次或者多次)

合法值：- 2s, 4s (需要逗号隔开)

属性值例子

padding-top:<length>|<percentage>

	padding-top: 1px;
	padding-top: 1em 5%;  错误

1
2
3

boder-width:[<lenght>|thick|medium|thin]{1,4}
	border-width:2px;
	border-width:2px small; 错误;

box-shadow:[inset? &&[ <length>{2, 4}&& <color>?]]#|none
分析：最外面有分隔符，说明可以是none 也可以是之前的语法
	  #号表示[]里的内容可以出现一次或者多次，多次用,隔开
	  
	  box-shadow:3px 3px rgb(50%, 50%, 50%), red 0 0 4px inset; 合法
	  box-shadow:inset 2px 4px, 2px blue; 错误

@规则语法

@标识符 xxx; 分号结尾
@标识符 {
} 属性声明块结尾

例子：
@media 用来做响应式的布局，设备只有符合@media媒体查询条件，里面的样式才能生效
@keyframes 用来描述CSS动画的中间步骤
@font-face 引入外部字体，使页面中字体更加丰富

一下是很少用到的：
@import @charset @namespace @page @supports @document

选择器

h1{color: red;}
.m-nav{height:70px;font-size:14px;}

expression表达式 -> Array

<div>
	<p>段落一</p>
	<p class="special">段落二</p>
	<p class="special stress">段落三</p>
</div>

标签选择器

p{color:blue;} p标签 // 三段文字都是蓝色

类选择器

.special{color:red;} // 段落二、段落三都是红色
单独该段落三，就加一个类 stress
.stress{font-weight: bold;} // 段落三加粗

格式：
.className

className可以是字母数字 - _ (必须以字母开头，区分大小写，出现多次)

id选择器

<div id="banner">
	banner
</div>
<div>
	content
</div>

1 2	div{color:gray;} #banner{color:black;}

格式：
以#id，
id可以是字母数字 - _(必须以字母开头，区分大小写，只出现一次)

通配符选择器

<div>
	<h2>标题</h2>
	<p>段落一</p>
</div>
<div>页脚</div>

*{color:blue;} 可以选择页面中所有的元素，设置属性

属性选择器 -

[att]

<form action="">
	<div>
		<input disabled type="text" value="张三">
	</div>
	<div>
		<input type="password" placeholder="密码">
	</div>
</form>

[disabled]{background-color:#eee;}

选中具有某个属性的元素[att=val] 选中属性等于 val 的元素

<form action="">
	<input type="text" value="文本框">
	<input type="button" value="按钮">
</form>

[type=button]{color:blue;}

id选择器是属性选择器的特例 #nav{} == [id=nav]{}

[att~val] 选中属性中包含 val 的元素

1 2	<h2 class="title sports">标题</h2> <p class="sports">内容</p>

[class~=sports]{color:blue;}

类选择.sports{} == [class~~=sports]{} 是 att~~=val的一个特例

[att|=val] 选中以val或者val-开头的元素

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="enfr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

[lang|=en]{color:red;}表示选中 lang属性值为 en 或者 en- 开头的元素
用的不多

[att^=val] 选中属性值含有以#开头的元素

<div>
	<a href="http://www.w3.org/">W3C</a>
	<a href="#html">HTML</a>
	<a href="#css">CSS</a>
</div>

[href^=”#”]{color:red;} 属性值是个符号或者包含空格就需要用引号引起来

[att$=val] 选中以…结尾的元素

1 2	<a href="http://xxx.doc">word文档.doc</a> <a href="http://xxx.pdf">pdf文件.pdf</a>

选中以…结尾的元素
[href$=pdf]{color:red;}

[att*=val]

<a href="http://lady.163.com/15.html">ssssssssssss</a>
<a href="http://lady.163.com/10.html">dddddddddddd</a>
<a href="http://sports.163.com/12.html">dddddddddddd</a>
<a href="http://sports.163.com/09.html">dddddddddddd</a>

[href*=”lady.163.com”]{color:pink;}

伪类选择器

link,visited,hover,active

1	<a href="http://www.163.com">网易首页</a>

a:link{color:gray;} 选中a标签中href里面有值的元素只用于链接元素
a:visited{color:red;} 访问过的样式只用于链接元素
a:hover{color:green;} 鼠标hover上去的时候的样式
a:active{color:orange;} 鼠标点击时的样式
伪类选择器都是以冒号开头，

如果开发中要定义四中链接，则顺序是：link 然后是 visited 然后是 hover 最后是active

enabled,disabled,checked

伪类选择器还可以选择：

enabled: 元素可用的状态
disable: 元素不可用的状态
checked: 用户选中时，可以通过checked伪类给选中的元素加一些效果

nth-child()

<ul>
	<li>一</li>
	<li>二</li>
	<li>三</li>
	<li>四</li>
	<li>五</li>
	<li>六</li>
</ul>

li:first-child{color:red;}
li:last-child{color:red;}
li:nth-child(even){color:red;} 奇偶相间选中偶数 ()中可以 odd 或表达式
li:nth-child(3n+1){color:red;} 表达式一、四为红色
li:nth-last-child(3n+1){color:red;} 倒着倒数的一、四项即三、六为红色

only-child

<ul>
	<li>一</li>
</ul>
<ul>
	<li>一</li>
	<li>二</li>
</ul>

只有一个子元素的
:only-child{color:red;} 只会选中只有一个子元素的项

<dl>
	<dt>作者</dt>
	<dd>Dave Shea</dd>
	<dd>Molly E. Holzschlag</dd>
	<dt>出版社：</dt>
	<dd>人民邮电出版社</dd>
</dl>

dd:fist-of-type{color:red;} 选中第一个这种类别的伪类 Dave Shea是红色
dt:last-of-type{color:red;} 出版社是红色
dd:nth-of-type(even){color:red;} 偶数项 Molly E. Holzschlag
dt:nth-last-of-type(2n){color:red;} 倒数的偶数项作者

1 2	<p><span>CSS</span>和<span>HTML</span>是页面制作的解除。</p> <p><span>CSS</span>主要是用于定义<em>HTML</em>内容在浏览器内的显示样式</p>

span:only-of-type{color:red;} 选中了第二个p标签的span元素
表示子类中仅有一个span类型。

不常用的伪类：

:empty 选中没有子元素的标签
:root 选中的html标签
:not() 选中不包含某个选择器的元素
:target 选中被锚点选择的目标元素
:lang() 选中一些language值为某些特殊值的元素

简单选择器：标签选择器： tag{}
类选择器：.className{}
id选择器：#id{}
通配符选择器：*{}
属性选择器：[att]{}
伪类选择器：link{}

img[src$=jpg]{} 简单选择器进行组合后也是简单选择器、选中符合两个选择器的元素。

伪元素选择器

::first-letter

1
2
3

<p>
	css伪元素选择器是...              css伪元素选择器
</p>

使第一个字母有特殊样式：
::first-letter{color:red;} 两个冒号为了区别伪类选择器。

::fist-line

1
2
3

<p>
	伪元素选择器可以为第一行文字设置特殊样式
</p>

使第一行有特殊样式：
::first-line{color:red;}

::before{content:} ::after{content:}

在某个元素之前或之后插入一些内容；

<p>
	在某个元素之前插入一些内容
	在某个元素之后插入一些内容
</p>
before 在某个元素之前插入一些内容；
在某个元素之前插入一些内容；after

::before{content:”before”;} content属性为插入内容
::after{content:”after”;}

::seletion

::selection 伪元素选择器应用于被用户选中的内容

1
2
3

<p>
	::selection伪元素选择器应用于被用户选中的内容
</p>

::selection{
color:red;
background-color:#ccc;
}

当用户选中文字后，被选中的部分就会变成属性描述的样子

组合选择器

后代选择器和子选择器

<div class="main">
	<h2>标题一</h2>
	<div>
		<h2>标题二</h2>
		<p>段落一</p>
	</div>
</div>

.main h2{color:red;} 标题一标题二变红后代选择器
.mian>h2{color:red;} 标题一为红色子选择器

兄弟选择器

相邻兄弟选择器 +

<div class="main">
	<h2>标题</h2>
	<p>段落一</p>
	<p>段落二</p>
</div>

第一个p标签变成红色

h2+p{color:red;} 选中了h2后面和他相邻的p元素

通用兄弟选择器

<div class="main">
	<p>段落一<p>
	<h2>标题</h2>
	<p>段落二</p>
	<p>段落三</p>
</div>

h2~p{color:red;} h2后面所有的兄弟节点，并且是p标签，所以会选中段落二、段落三

选择器分组

1
2
3

h1{color:gray;}
h2{color:gray;}
h3{color:gray;}

简化为：h1,h2,h3{color:gray;}

继承

页面中所有的文字体为微软雅黑

body{font-family:””} 会运用到所有子元素中去

会继承的属性：

color
font
text-align
list-style

非继承属性：

background
border
position

如何得知一个属性是否会被继承：描述文档中，一个属性有inherited 值如果等于 yes 就是可以被继承的属性。no表示不可以自动继承，如果显式的使用 inherited，则会把不继承的属性变成继承属性。

优先级

两个选择器选中同一个资源。哪个属性会应用到资源上去呢？

计算方法：

a = 行内样式 1000
b = ID选择器的 100
c = 类、伪类和属性选择器 10
d = 标签选择器和伪元素选择器 1

如果优先级一样则需要用到CSS层叠

相同的属性会覆盖，优先级高的会覆盖优先级低的，优先级一样的后面的会覆盖前面的。

不同的属性会合并。

css

<div>
	<p class="special">css层叠...</p>
</div>

<style type="text/css">
	p{
		color: blue;
		text-align: left;
		font-weight: bold;
	}

	p.special{
		color: red;
		text-align: right;
	}
	p:first-child{
		color: green;
	}
</style>

p的优先级是最后的， p.special和p:first-child优先级是一样的。

color属性为green ，优先级相同则覆盖 green
text-align:right ， p.special的优先级较高右对齐
font-weight:bold ，其他两个没有，则会合并。

CSS改变优先级

<p class="tip special">提升选择器的优先级</p>
.special{
	color:red !important(会覆盖前面样式);
}
.tip{
	color:blue;
}

改变先后顺序 (优先级一样时)
提升选择器优先级 (提升选择器的优先级，在.special前加p则会胜出)
!important (前面的方法不能用时才会使用。)

文本和颜色

设置文字大小：

font-size:<length> | <percentage> | <absolute-size> | <relative-size>

2em 是指父元素同属性的 2倍等效：200% 有参照物为父元素同属性

设置字体：

font-family:[ <family-name> | <generic-family> ]#

<generic-family> = serif|sans-serif|cursive|fantasy|monospace

font-family:arial; arial不包含中文，中文使用默认字体
    font-family:arial, Verdana, sans-serif; 当它是多个值时，所有字体会采用第一个字体，当没有改字体的文字时，会采用下一个，以此类推。
    font-family:Verdana, "microsoft yahei";

设置字体加粗：

font-weight: normal|bold|bolder|lighter
100|200|300|400|500|600|700|800|900 粗细分成了9等

         一般字体支持 400 或者 700

设置字体倾斜：

font-style: normal|italic(斜体)|oblique(倾斜，字体没有斜体的情况下，会强制倾斜)

设置行距：

line-height: normal(不固定，由浏览器决定，1.14左右)| <number> |<length> | <percentage>

em(length 类型)

% 和 number 之间的区别，上述例子中两者一样高。

.m-demo2{Line-height:300%;}
.m-demo2 .p1{font-size:16px;}

.m-demo3{line-height:3;}
.m-demo3 .p1{font-size:16px;}

demo3: line-height为number时，直接继承。因此继承下来 3 * 16px 就是 48px
demo2: line-height为300%时，先计算，然后才继承到里面的元素。这里由于其父类字体为30px，因此先计算后，所有子元素的行高就都未 30 * 3 = 90px了。

!感叹号表示不经常使用的值

font:[[<font-style>||<font-weight>]?<font-size>(必填)[/<line-height>]?<font-family>(必填)]

例子：
font:(font-size)30px/2(line-height) “Consolas”,monospace
font:italic bold 20px/1.5 arial,serif;

font:20px arial,serif; (这时，其他都是默认值)

font:100px; (结果没有变化，这个语法不起作用)

设置文字颜色：

color：red; #ff0000; rgb(255,0,0); rgba(255,0,0,1);
color: transparent (全透明)

文本左右对其

Vertical-align 垂直对齐

text-indent 首行缩进

text-indent: <length> | <percentage>

text-indent:2em (以文字大小为参照物) 缩进两个字
text-indent:20%(缩进了整个宽度的五分之一)

如果为负值，则反向缩进。如果足够大，则会跑出屏幕

white-space

white-space: 换行要不要保留，空格要不要合并，tab要不要合并

white-space:normal|nowrap|pre|pre-wrap|pre-line

<table>
	<thead>
		<tr>
			<th></th>
			<th>New Line(是否换行)</th>
			<th>Spaces and Tabs</th>
			<th>Text Wrapping</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>'normal'</td>
			<th>Collapse</th>
			<th>Collapse</th>
			<th>Wrap</th>
		</tr>
		
		<tr>
			<td>'nowrap'</td>
			<th>Collapse</th>
			<th>Collapse</th>
			<th>No Wrap</th>
		</tr>
		
		<tr>
			<td>'pre'</td>
			<th>Preserve</th>
			<th>Preserve</th>
			<th>No Wrap</th>
		</tr>

		<tr>
			<td>'pre-wrap(常用)'</td>
			<th>Preserve</th>
			<th>Preserve</th>
			<th>Wrap</th>
		</tr>
		
		<tr>
			<td>'pre-line(常用)'</td>
			<th>Preserve</th>
			<th>Collapse</th>
			<th>Wrap</th>
		</tr>
	</tbody>
</table>

collapse 换行会被合并成一个空格

wrap 自动换行

Preserve 保留格式

word-wrap

word-wrap:normal(不换)|beak-word(换)

长单词显示不下是否自动换行

word-break

word-break:normal|keep-all(所有单词中间都不换行)|beak-all

如果换行，不管那两个字母都要断掉。

text-shadow(文字阴影)

text-shadow:none|[<length>{2,3}&&<color>?]# (多个shadow)

1px：x轴的偏移方向
2px: y轴偏移方向
第三个参数是阴影颜色

第三个值的作用：模糊半径，不写颜色则会使用文字颜色作为阴影颜色

text-decoration(下划线)

text-decoration:none|[underline||overline||line-through]

text-decoration:underline overline;

盒模型

盒模型概念

边距，边框，填充，内容

width height

<length>|<perentage>

百分比的参照物在绝大部分是父元素

padding

TRBL

top right bottom left

值缩写：padding :20px;
==> 20px 20px 20px 20px

padding：20px 10px
==> 20px 10px 20px 10px

padding:20px 10px 30px
==> 20px 10px 30px 10px

top bottom只有一个值，则这两个属性都是该值，
left right只有一个值，则这两个属性都是该值。

margin 和 padding一样

margin有默认值，auto
相邻的元素margin会合并，取margin较大的值。
父元素与子元素的外边距也会合并。
水平居中：margin:0 auto。上下外边距是0，左右是auto。浏览器自动分配空间

border

[<border-width>||<border-style>||<border-color>]|inherit

dash虚线 dot点

border-radius

圆角矩形
border-radius:
0px 5px 10px 15px(水平半径)/
20px 15px 10px 5px(垂直半径);

overflow

visible|hidden|scroll|auto

visible:默认取值，超出部分仍然显示
hidden:超出部分隐藏
scroll:水平和垂直滚动条
auto:元素内容比较少，没有滚动条，超出后自动显示滚动条
overflow-x 和 overflow-y分别设置水平方向超出或垂直方向超出显示

box-sizing

box-size:content-box|border-box|inherit
边框以内的盒子叫 border-box
content-box内容盒子，这时默认属性，
width设置的是内容区。

如果是边框盒子，则设置的是边框

box-shadow

box-shadow:none|<shadow>[,<shadow>]*<shadow>:inset?&&<length>{2,4}&& <color>?

box-shadow:4px 0px 0px red;

第一个数字，水平偏移，可以想象有一模一样的盒子，红色的在它下面，水平偏移4px。
第二个值是垂直偏移，同上
第三个值是模糊半径，
第四个值是阴影大小。
颜色和内部文字颜色一致

outline 轮廓

outline:[<outline-width>]||<outline-style>||<outline-color>

outline-width:<length>
outline-style:solid|dashed|dotted
outline-color:

边框不占空间，在border外。

关于CSS属性的浏览器兼容性，可以通过 caniuse 查询。
1. border-radius ie8及以下不支持 
2. box-sizing ie7及以下不支持 
3. box-shadow ie8及以下不支持 
4. outline ie7及以下不支持 

背景

background-color : (图片始终在内层)

background-color:#ff0000、rgb(255,0,0,0.5)、transparent(默认值)

background-image:[,]*

<bg-image> = <image>|none

通过哪些方法引入image : url() url(“”)全路径、根路径、相对路径，可以不写引号

可以加入多个图片

background-repeat：[, ]*

<repeat-style> = repeat-x|repeat-y|[repeat(默认属性)|space(空隙等分，起点到终点正好容下)|round(完整展现平铺)|no-repeat{1,2}]

background-attachment(滚动)

scroll 只有内容懂， local 内容和图片一起滚动

background-position

background-position: right; 垂直默认 center
background-position: right 10px top 20px; 距离右边10px，距离上面20px;

background-position:0 -100px; left top(负数表示往上跑，会经常用)

linear-gradient() 线性渐变

[[<angle>|to<side-or-corner>],]?<color-stop>[,<color-stop>]+

角度线性方向颜色断点

<side-or-corner> = [left|right]||[top|bottom] 默认值是to bottom
<color-stop> = <color>[<percentage>|<length>]?

background-image:linear-gradient(red,blue); 从red渐变到blue(从上到下)

background-image:linear-gradient(to top,red,blue); 从red渐变到blue 从下(红色)到上(绿色)

background-image:linear-gradient(to right bottom,red,blue); 从red渐变到blue 从左上(红色)到右下(绿色)

radial-gradient() 镜像渐变

[[circle||<length>(设置一个圆形，大小)][at <position>(圆心所在的位置)]?,|[ellipse||[<length>|<percentage>(椭圆，大小百分比)]{2(x半径，y半径)}][at <position>]?,|[[circle|ellipse]||<extent-keyword>][at<position>]?,|at<position>,]?<color-stop>[,<color-stop>]+

<extent-keyword> = closest-side(离圆心近的边)|farthest-side|closest-corner(离圆心最近的角)|farthest-corner

background-image:radial-gradient(circle,red,blue);
当没有设置位置，则默认为farthest-corner。

repeat-*-gradient

background-origin

<box>[,<box>]*

<box> = border-box|padding-box(默认值)|content-box

background-clip

<box>[,<box>]*

<box> = border-box(默认值)|padding-box|content-box

background-size

cover 最小的宽度和高度都不会小于容器

将background合起来写：`[<bg-layer>,]*<final-bg-layer>`

<bg-layer> = <bg-image>||<position>[/(当出现bg-size时一定要有/)<bg-size>]?||<repeat-style>||<attachment>||<box>||<box>

<final-bg-layer> = <bg-layer>||<'background-color'>(如果要给背景加上颜色，会出现在最后一个层)

布局

display(水平居中、居中导航)
position(轮播头图、固定顶栏、遮罩、三行自适应布局)
float(两列布局)
flex(三行两列自适应)

布局-将元素以正确的大小摆放在正确的位置上

三行水平布局：

Display

设置元素的显示方式

display: block|inline|inline-block|none

div p h1-h6 ul form…

block 块级元素

默认宽度是父元素的宽度，可设置宽高，换行显示

inline

默认宽度为内容宽度，不可设置宽高，同行显示，如果后续元素宽度超过了同行的边界，则超出部分换行

span a label cite em

inline-block

默认宽度为内容宽高，可以设置宽高，同行显示，如果后续元素宽度超过了同行的边界，则会整块换行

input textarea select button

none

设置元素不显示

none 和 visibility:hidden

visibility:hidden 只是隐藏了看不到了，但是元素还在原来的位置上。

实战

块级元素水平居中

布局居中导航

布局-登录框

元素叠加的效果，display不能实现，需要用position定位实现

Position

top,right,bottom,left,z-index 设置位置

z-index:1 的元素会盖在 z-index:0 的元素上

position: static(默认)|relative|absolute|fixed

relative相对定位

相对定位的元素，仍在文档流中、参照物是元素本身

absolute

绝对定位的元素默认宽度为内容宽度，脱离文档流。参照物为(第一个定位祖先)/根元素。

例子：轮播头图

fixed

默认宽度为内容宽度，脱离文档流，参照物为视窗(不随滚动条滚动)

案例：固定顶栏、全屏灰色遮罩

三行自适应布局：顶栏固定在窗口最上面的，底栏固定在窗口最下面。内容自适应

float

需求：body中内容分区，块级结构同行显示且都要在文档流中。而position脱离了文档流

float:left|right

默认宽度为内容宽度，脱离文档流，向指定方向一直移动

float的元素在同一文档流

float元素半脱离文档流，对元素脱离文档流，对内容在文档流中：

clear

clear: both|left|right

both包含left right
用于与float的后续元素清楚对后续元素的影响，应用于块级元素

使用时，clearfix

在父元素上面加了clearfix，

clearfix:after{}

加了个内容点，在点上设置block块级元素，清除浮动效果。再让.号不可见。

如果不清除浮动，后续元素就会浮上来。

当父元素变宽的时候，两列中的一列需要自适应，随着父元素变宽而变宽

布局-两列自适应布局

多行自适应、多列自适应、间距自适应、任意对齐

Flex(弹性布局)

flex container 弹性容器，内部子元素成为 flex item 弹性元素，弹性元素的排列方向成为 main axis主轴，跟主轴垂直的方向，成为 cross axis 辅轴。

创建flex container

display: felx 即为弹性布局

只有弹性容器在文档流中的元素才是 flex item

flex 方向弹性对齐

flex: <'flex-grow'> || <'flex-shrink'>||<'flex-basis'>

initial: 0 1 main-size

方向有关

flex-direction 方向
flex-wrap 弹性的换行
flex-flow 弹性的流
order 顺序

flex-direction

row(默认)|row-reverse|column|column-revserse

flex-wrap

nowrap(默认)|wrap|wrap reverse

flex-flow

<'flex-direction'>||<'flex-wrap'>

order

<interger> 默认值为0，是个相对值

order表示排列的位置

弹性 flex-grow flex-shrink flex-basis

flex-basis 设置flex item 的初始宽高

也就是不会变形的高度

main-size|<width>

如果是水平排列，则设置初始宽，如果是纵向排列，则设置初始高

flex-grow

flex-grow: 初始值：0

flex-grow用来设置元素分配到的空间的比例，是一个相对量，flex-grow为2的元素占的剩余空间比flex-grow为1的元素大一倍。

flex-basis是基本尺寸大小，在保证基本尺寸的情况下，如果还有剩余空间，则会根据flex-grow的值进行分配

flex-shrink

<number> 初始值为1 剩余控件平均分配

flex-shrink用来设置元素分配到的空间的比例，是一个相对量，flex-shrink为2的元素占的**剩余**空间比flex-shrink为1的元素大一倍。

flex-basis是基本尺寸大小，在保证基本尺寸的情况下，如果剩余空间是**负值**，则会根据flex-shrink的值进行分配

flex ie9及以下不支持，目前主要用于移动web页面中

对齐

justify-content align-items align-self align-content

justify-content

justicy-content:flex-start|flex-end|center|space-between|space-around

align-items

align-items:flex-start|flex-end|center|baseline|stretch

align-self

设置单个flex item 在cross-axis方向上对齐方式

align-content

设置cross-axis方向上行对齐方式。

例子：三行自适应两列自适应

变形

body style= “transform:rotate(180deg)”

transform:后面可以写多个语法，translate rotate

在做动画时，多个transform的语句会有不同，因为动画后影响了其坐标。

不同的顺序导致不同的结果

先进行scale() 后进行 translate 和先进行translate 后进行scale 也不一样。
scale 将x或者y轴进行了放大之后， translate的偏移量在原基础上也会进行放大。

rotate() 变形属性

rotate(<angle>)

translate()移动

translate(<translation-value>[<translation-value>]?)

translateX
translateY

x轴、y轴都可以使用百分比作为值，参照物为自己本身

scale() 比例

scale(<number>[number]?)

skew() 倾斜

skew(<angle>[<angle>]?)

skewX() (y轴向x轴偏移，逆时针)
skewY() (x轴向y轴偏移，逆时针)

多个transform在一起，顺序会影响效果

transform-origin 设置坐标轴的轴心

默认值：50% 50% 以中心点为原点

如果是0 0 就是左上角

如果是 20%，默认y 是 50%

如果是 right 50px 20px
表示 x y z 在3d 空间内整个坐标进行偏移。
偏移到了最右边，往下移动了50px，又往z轴向正方向移动20px

如果是 top right 20px; 表示移到了右上角，并且z轴正方向移动了20px

perspective 透视效果

none|<length> (人眼离物体的距离)

perspective-origin 透视基点

translate3d()

scale3d()

rotate3d()

transform-style

在一个已经旋转的容器内再放入一个旋转的容器

没有透视的效果出现

需要加入transform-style属性

flat(默认)|preserve-3d

一个容器进行透视后，默认扁平化。

backface-visibility 背面是否可见

动画

transition

transition-property

transition-property:none; all; left; left,color; 当属性有变化，则过度而不是瞬间变化

transition-duration 动画时长

需要看老师demo

transition-timing-function

看老师demo

cubic-bezier(0.25,0.1,0.25,1) = ease
cubic-bezier(0,0,1,1) = linear

transition-delay 延时

和duration一样的值

animation

让动画自动运行，transition无法做到