HTML+CSS（学习笔记完结）

一、web组成

结构（HTML）、表现（css）、行为（js）
W3c：万维网联盟。
Ecma:欧洲电脑网上联合会。

二、相关概念

HTML：超文本标记语言
XHTML:可扩展的超文本标记语言
HTML5指HTML的第五次重大修改（第五版本）
三、网站建设流程
(了解即可)

四、HTML的基本结构

a站点的作用：规划网站所有资源代码的整合。
b站点的建立：新建–项目（存储在电脑的位置）–HTML的基本项目。

【命名规则】

A、小写字母、数字、下划线组合
B、不得包含汉字、空格和特殊符号
C、必须以英文字母或下划线开头，不可以数字开头

【调试工具】

浏览器的F12可以测试移动端

【HTML的基本结构】

<!DOCTYPE html> 声明文档类型
<html> 根标签<head> 头部信息<meta charset="utf-8" /> 网页的编码格式（格式错误引起汉字解析乱码出错）<title>网页标题</title></head><body>主体内容</body>
</html>

五、HTML的基本语法

双标签（常规标签）：
<标签 属性=属性值></标签>
单标签（空标签）：
<标签/>
尖括号里的第一个单词叫标签、标记、元素
单标签结束的反斜杠可有可无，有指的是XHTML没有则是HTML
属性和标签之间用空格隔开，属性和属性值用等号链接，属性值必须在引号里边（引号为英文）
一个标签可以有多个属性，属性之间部分先后顺序

六、HTML的常用标签

【文章标签】

标题标签：h1-h6默认加粗h1最大h6最小H1标签在一个页面上一般只出现一次
段落标签：<p>
特殊字符：
空格：&nbsp；版权图标：&copy；商标：&reg；小于号：&lt；大于号：&gt；
修饰标签：
加粗：<b>,<strong>
倾斜：<i>  <em>
下划线：<u> <ins>
删除线：<del>  <s>
上角标：<sup>下角标：<sub>
强制换行标签：<br/>（单标签）
水平线：<hr/>（单标签）
列表标签：

【有序列表】

<ol type="A、a、I、i"><li></li>
<ol>

【无序列表】

<ul type="disc,square,circle">
<li></li>
</ul>

【自定义列表】

<dl>(只能包含一个dt，其余的是dd。)
<dt>问题</dt>
<dd>答案</dd>
</dl>

超链接：

Href后边写具体路径：
URL：统一资源定位符
<a href=”#”>空连接</a>
链接具体网址
<a href=“http://www.baidu.com”>去百度</a>
链接本地站点资源
<a href=”路径”></a>
如何使用图片做超链接
<a href=”路径”><img src=”路径”></a>
超链接的打开方式：target=“_self/_blank”
_self:默认值
_blank:在新的窗口打开超链接

图片插入：

<img  src=“路径” width=“宽” height=“高” border=“边框” alt=”替换文本“ title=”提示信息“>

【alt与title的区别】

两者都有利于SEO（搜索引擎的优化）alt比较倾向于SEO，title更注重的是用户体验度；alt是当图片不存在或出现错误时显示的替换文本
Title是当鼠标放在图片上时显示的提示信息

【三种相对路径】

当前文件与目标文件在同一文件夹中直接写文件名+扩展名当前文件与目标文件所在同一目录下，写目标文件夹名称/目标文件名+扩展名
当前文件所在文件夹与目标文件在同一目录下，写…/目标文件名+扩展名

表格标签：

tr>td*8快捷生成8组，*后边{可写内容，$$一个表示1.2.3...两个则是01.02.03...}<table>
<tr>
<td></td>
</tr>
<table>

表格按照数据行分组可分为：

thead表头 tbody表体 tfoot表尾在一个表格中，表头和表尾只能有一个，表体可以有多个，他们三者的顺序是： thead、
tbody、tfoot 表格属性写给table的rules=“all，none，rows，cols，groups，列分组” 列分组
列分组rulse=“groups”需要与col（单标签）或者colgroup（双标签）连用
如果想使用相邻的几列合并需要在col或者colgroup里添加span，想要几列合并就写几，span的默认值为1，默认情况下1列是一组

表格里边的css属性：
设置单元格与单元格的间距border-spacing：0；（此属性必须写给table）
相当于html的cellspacing=“0”；

table{border: 1px solid #O00;border-spacing: 0;border-collapse: collapse;
}
td{border: 1px solid #fO0;
}

合并相邻单元格的边框：
border-collapse：collapse；（此属性必须写给table）
单元格里无内容时隐藏：
empty-cells：hide（隐藏）/show（显示默认值）
单元格的宽度固定：
table-layout：fixed；（提高浏览器解析速度）
设置表格标题位置：
caption-side：left/right/top/bottom（left-right只有火狐支持）
...........................
表格的属性：
边框  border
宽度  width
高度  height
单元格的间距      cellspacing内容和边界之间的距离       cellpadding背景颜色     bgcolor边框颜色     bordercolor表格的列标题将td换成th表格的标题       caption

水平对齐方式

align="left\center\right";
写给table指表格的水平对齐方式；
写给tr指这一行内容的水平对齐方式；
写给td指这一个单元格内容的水平对齐方式

垂直对齐方式

valign=“top\middle\bottom”;
不能写给table；
写给tr指这一行内容的垂直对齐方式；
写给td指这一个单元格内容的垂直对齐方式

行合并 rowspan (行不同指行合并) 列合并colspan(列不同指列合并)

ps用于抠图

ps的使用：
如何测量图片：
如果就是一张图可以在图像--图像大小/画布大小（看像素）
在ps中调出标尺按Ctrl+r，在标尺上右击将单位改成像素。
选框工具（M）把须知大小图片选中--快捷键F8（窗口--信息）调出信息面板（W-宽、H-高）
如何用ps截图：
选框工具（M)把需要截取的图片选中--ctrl+c--ctrl+n--enter--ctrl+v（从新建立一个窗口，不会破坏原来的图片）
裁切工具（C）把需要截取的图片选中--双击鼠标即可（会破坏原图，一定要在历史记录恢复原图，否则其他图片会丢失）
切片工具选中需要裁剪的图片--文件--存储为web所用格式--按住空格键拖到需要保存的图片位置--按住shift进行选择--存储（选中切片）
当选图不够精准时怎么办：
选框工具：在最上方的菜单面板中选择第三项（在选区中减去不需要的部分）
裁切工具：将鼠标防止在选区上变成上下或左右箭头拖动即可
切片工具：将鼠标防止在选区上变成上下或左右箭头拖动即可或右击编辑切片更改宽高，利用方向键去调节
放大镜：Z
在ps中选取颜色：
前景色单击--调出拾色器面板--鼠标找到所需颜色单击即可
ps中的辅助线：鼠标在标尺上拖动即可拉出辅助线

表单标签：
表单的作用：收集用户信息
表单的组成：
表单域form：
表单控件input：
表单字段集：
fieldset相当于一个框，可以在fieldset里去设置禁用，在这里设置一次里边的所有元素都是禁用状态
字段集标题：legend此标签必须是fieldset里的第一个元素

<body><form><fieldset><fieldset><legend>标题</legend><input type="text" disabled="disabled"/><input type="button" value="按钮" disabled></fieldset><fieldset disabled><input type="text"/><input type="button" value="按钮"></fieldset></fieldset></form>
</body>

提示信息：lable

如果将input写在lable里边可以实现点击文字时将光标定义到对应的input标签上
如果lable和input分开写，则需要给lable添加for属性，属性值为input的ID选择器名称

<lable for="pwd">密码<lable>:<input type="password" id="pwd">

上传文件域：

<input type="file" multiple="multiple"><!-- multiple实现多选的属性 -->

上传图像域：

<input type="image" src="路径" widht="100"/>

隐藏按钮：

<input type="hidden">

表单控件input与type属性值：

文本框：      text
密码框：     password
单选按钮：    radio
复选框：     checkbox
按钮：      button（value）
重置按钮：    reset
提交按钮：    submit（只有他有提交作用）

Input标签的其他属性：

默认值：value
名称：name（其他可有可无，单选按钮一定要有，一组保持一致）
默认选中：checked（只要针对单选按钮及复选框）
禁用：disabled
尺寸：size（作为了解）
限制输入字符数：maxlength

下拉菜单：

<select><option value="**"></option></select>
下拉菜单的默认选中selected给option写
多行文本域：（<textarea></textarea>
Cols控制一行显示的字符数和宽度
Rows控制文字写多少行后出现滚动条和高度）
<textarea name="" cols="" rows="" >
</textarea>
rows属性设置文本输入窗口的高度
cols属性用来设置文本输入窗口的宽度，单位是字符

Form中的属性：

表单名称：name
表单提交方法：method="get或post"
get:从服务器上获取数据，安全性低
post：向服务器传输数据，安全性高
表单提交地址：action
提交时在当前窗口或者新窗口
target="_self/_blank"

布局标签：

div：块状标签
span：文本节点
HTML注释：<!--注释-->

CSS

css是什么：
层叠样式表，用于控制网页样式。
a语法：
由两部分组成：选择器和声明，声明又包含属性和属性值
选择器{属性：属性值}b样式表：
内部样式表:写在head与head之间用style去包裹
属性和属性值用冒号链接，属性和属性之间用分号结束，冒号和分号必须是英文模
式下的
注释：
/*注释内容*/（不能用HTML的注释方法）

选择器

1、标签选择器
HTML标签{属性：属性值;}
2、ID选择器
#ID名称{属性：属性值;}
<div id="名称"></div>
一个标签只能有一个ID选择器3、Class选择器
.class名称{属性：属性值;}
<div class="名称"></div>
一个标签可以有多个class选择器4、通配符选择器（重置网页的默认样式）
*{属性：属性值;}5、群组选择器
选择器1，.选择器2，.选择器3，...{属性：属性值;}6、包含关系选择器（后代选择器）
选择器1%选择器2{属性：属性值；}（%代码中替换为空格）7、伪类选择器
<a herf=""#>超链接</a>
顺序问题：link visited hover active
：link初始状态
：visited点击过后状态
：hover鼠标划上
：active点击为抬起（击中状态）
工作中常用
a{}
a：hover{}

选择器的优先级（权重）

当给一个元素使用多个选择器时，设置相同属性，值不同时会产生权重，权重大的被显示
标签选择器的权重0001
class选择器的权重0010
id选择器的权重0100
内联样式表的权重1000（style="color:****"）
群组选择器的权重是本身
包含（后代）选择器的权重是选择器的和
权重相同生效的是后边的
继承权重最小是0000
在属性值后边添加！important此时这个选择器的权重无穷大

css的三种样式表

a、内联（内嵌、行间）样式表写在HTML标签内部<divstyle="color:red"></div>
b、内部样式表
写在head与head之间用style包裹
c、外部样式表
创建在HTML的外部，新建css

在head之间引用：

<link rel="stylesheet"href="路径">(工作中常用)
<style>@import ulr("路径")（此方法几乎不用，必须在style里的最上方）</style>

【两种外部样式表引用方式的区别：link与@import的区别】

A：老祖宗不同，link是HTML提供的一种方式，可以引用css还可以引用其他文件，@import是css提供的一种方法，只能引用css文件
B：加载顺序不同，link与HTML同时被加载，@import是当所有的HTML加载完成之后，在加载css文件
C：兼容性不同，@import必须是ie6以上支持，link没有版本要求
D：控制dom时，link支持，@import不支持

【三种样式表的优先级】
内联样式表优先最高，内部和外部书写顺序有关，谁在后谁生效

文字设置

【文字颜色color】

英文单词：color：red；十六进制数：color：#ff0000如果两两相同可以缩写成三位color：#f00；
三原色：color：rgb（255，0，0）
三原色+透明度：color：rgba（255，0，0，0.5）a代表透明度取值0-1（css3出现，低版本不支持）

【文字加粗】

font-weight:bold加粗normal不加粗

【文字倾斜】

font-style：italic倾斜normal不倾斜

【文字大小font-size】

font-size：单位px（常用）、em、rem、pt
浏览器默认文字大小16px 1em=1rem=16px 9pt=12px
网页中常用的字体大小：12、14、16、18

【文字字体font-family】

如果是汉字字体需要写在引号里边font-family：“楷体”;
如果由一个英文单词字体不需要写在引号里边font-family：arial;
如果由一组英文单词组成的字体需要写在引号里边font-family：“times new roman”;
可以同时为一个标签设置多个字体font-family：“times new roman”,“楷体”；浏览器会优先解析第一个字体，如果第一个字体不存在，则向下解析第二个……如果设置的所有字体

【文字行距/行高line-height】

值可以设置具体的像素，如果不加单位代表的是文字大小的倍数
如果行距等于元素的高度可以实现单行文本的垂直居中

【将小写字母改成小型大写字母line-variant】

line-variant：moall-caps（namal）；
font:font-weight font-style font-variant font-size/line-height font-family;
font:font-size/line-height font-family;(常用三者缺一不可)

【文字位置设置】

水平对齐方式：text-algin（left、center、right、justify[两端对齐]）
垂直对齐方式：vertical-algin（top、middle、bottom）
baseline（默认值基线）top上、middle中、bottom下

【文本修饰text-decoration】（三线显示中间用空格）

underline下划线、overline上划线、line-through删除线、blink闪烁线（不支持）

【字符间距letter-spaing】

字符之间的间距可以设置为负值

【词间距word-spacing】

词与词之间的距离，可以设置负值

【首行缩进text-indent】

首行缩进两个字的值取决于文字大小，可以设置负值
首行缩进一般设置text-indent：2em；

【英文字母大小写text-transform】

capitalized首字母大写、uppercase全部都大写、lowercase全部小写、none默认值

【文字阴影texe-shadow】

0px(水平平移)，0px（垂直偏移），0px（模糊平移[css3出现]）

【边框】

border:线型（solid实线、double双实线、dashed虚线、dotted点状线、none没有线）粗细颜色（没有顺序）
可以单独设置某一个方向border-left、bottom、right、top

边框设置三角形

width：0；border：10px solid transparent（透明）；border-方向-color：颜色；

【float浮动】

  float:left、right、none（默认值）float可以使自下而上显示的元素，从左到右一排显示清除floa：clear：float

一、网页的制作

1、建立站点
2、建立HTML、css
3、css文件引入到HTML中
4、重置网页默认样式（css的重置）
5、搭建网页的外围结构
6、添加对应的内容
7、设置对应的css效果
8、去掉搭建结构时不需要的背景颜色
9、页面的代码优化

*{margin: 0; padding: O;}a,u,ins{text-decoration: none;}h1,h2,h3,h4,h5,h6,b,strong{font-weight: normal;}i, em{font-style: normal;}img{vertical-align: middle;border: none;}li{list-style: none;}

二、溢出属性overflow

属性值

visible:默认值
hidden:溢出裁剪，裁剪内容不可见
scroll：无论内容是否有溢出都会显示滚动条的位置，溢出的内容可见
auto：如果内容有溢出，就显示对应方向溢出的滚动条，没有溢出则不显示滚动条
inherit：继承父元素的overflow

三、空白空间white-space

pre：      显示代码中所有空白区域显示出来，遇到边界不会换行，如果遇到br会换行
pre-ling：    将代码中的回车换行解析出来，遇到边界会换行
pre-wrap：    将代码中的所有空白区域都解析出来，遇到边界会换行
nowrap：  将代码中的空白区域都忽略，内容遇到边界不换行，强制在一行显示，如果遇到br会换行
nomal：       默认值

四、显示省略号text-overflow

text-overflow：clip：裁切
ellipsis：省略号

【当行文本溢出显示省略号的必要条件】(重点)

有一定的宽度

white：value

强制在一排显示

white-space：nowrap

溢出裁切

overflow：hidden；

显示省略号

text-overflow:ellipsis;

元素的分类

块状元素、内联元素、可变元素

【块状元素与内联元素的区别】

块状元素可以设置宽高，内联元素不能设置宽高，内联元素的宽高是其内容
块状元素自下而上独占一行，内联元素自左向右在一排显示
块状元素和内联元素都遵循盒子模型的设置（border、padding、margin、width、height）但是内联元素的某些属性不能正常显示
块状元素一般作为其他内联元素的盒子去使用

【常用的块状元素】

div、h1、h2、h3、h4、h5、h6、p、ul、ol、li、dl、dt、dd、form、table、tr

【常用的内联元素】

span、a、b、strong、i、em、u、ins、del、s、sup、sub、img、input

元素类型的转换display

blok：块状元素（如果给元素添加flot属性，相当于给元素添加display：blok；）

显示

inline：内联元素
none：隐藏
inline-blok：行内块
table-cell：表格元素类似td、th
list-item：列表元素
大多数内联元素的display属性值默认是inline、input、select、img、textarea
他们的display属性值默认是inline-blok（只有值为inline-blok的元素支持vertical-align属性）
大多数块状元素的display属性默认值是blok，其中li的display属性值为list-item

【图片大小不一致如何实现水平居中】

1、给图片一个参照物，这个参照物的display属性值为inline-blok，高度为100%；设置vertical-align：middle；图片设置vertical-align：middle；
2、给父元素添加display：table-cell；设置vertical-align：middle；（切记父元素不能添加float属性）
3、给父元素添加相对定位position：relative；图片片写绝对定位，四个方向清零，margin：auto

一、display属性值

【置换元素和非置换元素】

通过属性或属性值决定其显示效果的元素叫做置换元素
常见的置换元素：inline、input、select、img、textarea

【img为什么可以设置宽度和高度】

他们的display属性值为inline-blok
他们是置换元素，置换元素在解析的时候或默认生成一个框

二、定位属性position（一般与top、right、left、bottom方向值连用）

static：静态的默认值
relative：相对定位（相对于原来元素的位置的偏移，不会脱离正常文档流）
absolute：绝对定位（会脱离正常的文档流，根据离其最近父元素进行定位，如果父元素没有定位则根据浏览器窗口定位）

position: absolute;
margin: 0
auto;
right: 0;
bottom:o;

fixed：固定定位（根据浏览器窗口定位，无论浏览器是否出现滚动条都会处在给定位置不动）

position:fixed;right: 0;top:200px;

sticky：粘性定位（吸顶效果）
注意：如果元素设置position：的值为absolute或者fixed时宽高为内容的宽，如果需要占全瓶则需要自己设置widht：100%

【相对定位和绝对定位的区别】

相同点：都是定位的属性值
不同点：参照物不同；相对定位的参照物是元素本身，绝对定位的参照物是有定位的父元素，如果父元素没有定位参照浏览器窗口

【包含快】

包含快是绝对定位的基础，为绝对定位提供坐标、偏移值、百分比
父级元素相对定位，子级元素绝对定位

.main{height: 500px;width: 1000px;background:#f00;margin: 0 auto;position:relative;
}
.ma{width: 100px;height: 100px;background:#ff;position: absolute;right: -110px;
}

固定宽高水平垂直居中(两种写法)

  div{width: 200px;height: 100px;background: #f00;position: absolute/fixed;top: 50%; left: 50%;margin-left: -100px;margin-top: -50px;}

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

三、Z-index

检索定位元素的排列顺序
定位的元素默认谁在下边谁在上边显示，可以通过z-index更改显示顺序
z-index值越大，越靠上显示，只可以无穷大，也可以无穷小，还可以设置负值，z-index的默认值auto；z-index必须与定位属性连用才能生效，定位的属性值不能为static默认值

四、锚点

锚点作用：实现同一页面不同位置的跳转。想去哪里就在那里添加id选择器，超链接的href=“#id名称” 侧边栏使用的较多（楼层或楼梯）

body><div id="top">顶部</div><div class="nav">1</div><div id="two" class="nav">2</div><div id="three" class="nav">3</div><div class="nav">4</div><div class="nav" >5</div><div class="nav">6</div><div class="right"><a href="#top">去顶部</a><a href="#two">去第二块</a><a href="#three">去第三块</a><a href="">去第六块</a></div>
</ body>

五、透明度

背景透明rgba：内容不会透明
opacity:value(0-1)其他浏览器支持
内容会跟着透明（如果内容不想透明，那么内容需要单独写一行）
filter：alpha（opacity=value值0-100）IE浏览器支持

一、banner广告图

<div class="banner"><img src="/img/e.jpg"></div>

.banner{height: 500px;overflow: hidden;position: relative;
}
.banner img{position: absolute;left: 50%;margin-left: -950px;
}

二、二级导航菜单

二级导航菜单需要注意脱离正常文档流，如果下面有定位需要注意顺序，用z-index修改

三、宽高自适应

宽高函数的设置：

width：calc（100% - 像素值）函数写法（减号左右要加空格）
width：固定的宽高，如果浏览器的宽度小于给定值，则会出现滚动条
min-width：最小宽度，如果浏览器的宽高大于给定值，那么整个浏览器里的这个元素的宽，如果小于给定值，则会出现滚动条（无限大）
max-width：最大宽度，如果浏览器的宽度大于给定值，那么整个浏览器里的这个元素的宽高就是给定值，如果浏览器的宽度小于给定值，则这个元素的宽度是浏览器的宽度（无限小）
height：固定高度，给多少页面就显示多少，如果里边有内容，内容比较多会溢出
min-height：最小高度，开始没有内容时就显示给定值的高度，如果里边有内容，内容比较多，会随着内容增多而增高
ma-height：最大高度，开始没有内容时就不会显示高度，如果里边有内容，内容少则高度就是内容的高度，内容比较多则高度就是给定值的高度，多余给定值内容会溢出
如果想要元素自适应，一般用width：100%，如果由一个定值的宽度还需要随之窗口的缩小而缩小，不会出现滚动条此时用max-width
如果想要高度自适应，可以不设置高度或者高auto，如果想要高度自适应还需要一开始不管是否有内容都会显示一定区域此时用min-height

四、高度塌陷（父元素不设置高度，子元素浮动）

给父元素添加overflow：hidden；
优点：简单易记
缺点：如果内容有溢出会被裁切
给float的元素下边添加一个空div，div设置clear：both；height：0；overflow：hidden；
优点：溢出内容不会被裁切
缺点：不利于SEO（搜索引擎的优化)
万能清除法
父元素：

  after{content：“”；display：block；clear：both；height：0；overflow：hidden；visibility：hidden；}

优点：内容溢出不会被裁切，有利于SEO
缺点：不利于记忆

给父元素设置高度

五、伪对象选择符

内容之后：after{content：“哈哈”；如果是文字需要写在引号里边}
内容之前：before{content：url（路径）；如果是图片直接写url（路径）}：first-letter{}第一个字符（必须是块状元素）：first-line：{}第一行（必须是块状元素）：：selection文字选中的状态（可以更改背景颜色和文字颜色，必须是双冒号）

六、visibility：hidden与display：none；的区别

都可以实现隐藏，display是彻底隐藏不占据位置，visibility元素和内容都隐藏，保留位置

七、最小高度的兼容性

方法一：

min-height：value；_height：value；（IE6兼容）

方法二：（实用性角度来说方法二最优解）

min-height：value；height：auto！important；height：value；

八、元素的宽高自适应窗口的宽高

html，body{height：100%}元素{height：100%；width：100%；}

【文字滚动条】

<marquee width="300" height="200" direction="left" beha
vior="alternate" >内容</marquee>

九、iframe框架集标签

属性：frameborder="no"无边框
scrolling="no"无滚动条
超链接的target属性等于frame的name属性

十、超链接的target属性值

_self当前页面打开
_blank新窗口打开
_top当前页面里的超链接用iframe标签引入时此值可以跳转出iframe在当前首页面打开（

一、css的统筹
网页优化：页面头部优化（关键字、描述信息），页面本身优化
页面本身的优化：超链接的title、img的alt和title、重置样式reset、起名

二、子代选择器
子选择器与后代选择器的区别：
写法不一样：子选择器是大于号，后代选择器是空格
控制范围不一样：子选择器只选择后边的一级，后代选择器不管后边几级都选择

三、bfc
1、bfc
块级格式化
BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Blocklevel box（块）
参与，它规定了内部的Blocklevel Box如何布局，并且与这个区域外部毫不相干。
2、BFC的布局规则
1）、内部的Box会在垂直方向，一个接一个地放置。
2）、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3）、每个元素的margin box的左边，与包含块border box的左边相接触
4）、BFC的区域不会与float box重叠。
5）、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
6）、计算BFC的高度时，浮动元素也参与计算
3、哪些元素或属性能触发BFC
根元素
float属性不为none
position为absolute或fixed
display为inlineblock, tablecell, tablecaption, flex, inlineflexoverflow不为visible
4、bfc的应用
1）两栏布局(左边固定、两边自适应）：
【第一种全部float利用calc函数】

【第二种，第一个float，第二个overflow：hidden；】

2）三栏布局（左右固定中间自适应）双飞翼布局、圣杯布局
【第一种全部float】
.left{
width: 200px;
height: 100px;
background: red;
float: left;
}
.center{
width: calc(100% - 400px);
height: 100px;
background: hotpink;
float: left;
}
.right{
width: 200px;
height: 100px;
background: green;
float: right;
}
【第二种左右、中间overflow：hidden；（跟顺序有关）】
.center1{
width: calc(100% - 400px);
height: 100px;
background: gold;
overflow: hidden;
}
【利用定位position】（无顺序要求）
如何实现三栏布局（左右固定，中间自适应），要求先加载中间区域在加载左右

四、过渡transition属性
可以看到从一个状态到另一个状态的过程，过渡属性不支持display：block，和display：none；
transition效果的拆分（哪个属性有过渡、过渡延迟时间、过渡执行时间、过渡的时间曲线）
transition：all 2s 2s ease-in；复合式写法第一个是执行时间其次是过渡延迟时间

过度属性值：那个属性有过渡、过渡时间、延迟过渡时间和时间曲线

五、2d属性transfrom属性
如果transfrom同时设置多个属性值，需要注意顺序问题，值都一样顺序不一样最终显示效果是不一样的
【偏移：translate（x，y）】
在原来位置上的偏移transfrom：translate（x，y）
写一个值代表x轴方向，正值向右、负值向左 transfrom：translate（x）
写两个值，第一个代表x轴，第二个代表y轴 transfrom：translate（x，y）
可单独设置 translateX（value）、translateY(value);
如果偏移设置百分比的值，指的是元素本身的百分比
【旋转：rotate】

给定度数去旋转，内容也会跟着旋转，正值顺时针，负值逆时针，deg代表度数单位
只给定一个旋转角度值 transfrom：rotate（value）；
可以单独给定x轴和y轴 transfrom：rotatex（value）；代表上下
transfrom：rotatey（value）；代表左右
【扭曲、倾斜 skew（value）】
写一个值代表x轴方向，正值向左上，负值向右下transfrom：skew（value deg）
写两个值，第一个代表x轴，第二个代表y轴transfrom：skew（x deg，y deg）
可以单独设置 transfrom：skewx（value deg）代表左右
transfrom：skewy(value deg)代表上下
【缩放scale】
缩放指的是原来宽高的倍数
一个值代表宽度和高度同时缩放 transfrom：scale（2）；
两个值，第一个代表宽度，第二个代表高度transfrom：scale（2，1）
可以单独设置某一个方向scalex（），scaley（），如果设置负值是在这个值放大或缩小的基础上将元素反方向显示（颠倒），内容会跟着放大缩小

六、背景颜色的过渡
浏览器兼容的前缀
谷歌、苹果 -webkit-
火狐 -moz-
IE -ms-
欧鹏 -o-
一、2D动画

二、鼠标屏蔽事件：
pointer-events：none；想屏蔽谁的鼠标划上，就写给谁
三、基点：
值1左右、值2上下可以是具体方向值，还可以是具体的数值
四、背景颜色的渐变
【线性渐变】浏览器兼容
background：渐变（线性，初始位置，结束位置，从哪个颜色，到哪个颜色）；

background：渐变（初始位置（可以是方向、可以是度数），颜色……）

odeg相当于left，180deg相当于right，90deg相当于bottom，-90deg跟270deg相当于top；
【径向渐变radial】

【重复渐变repeating】
线性渐变跟径向渐变都可以实现

五、关键帧动画
创建关键帧动画
@keyframes name{
from{}
to{}
}
引用关键帧动画animation属性（属性值至少有两项，动画名称、动画执行时间
animation：dong 1s 3 1s linear altemate forwards paused
animation 动画名称、动画执行时间、动画执行次数（infinite无限循环）动画运动曲线（ease，ease-in，ease-out，ease-in-out，linear，step-start，step-end）动画下一个周期如何执行（altemalte反向）动画执行完成后保留的状态（forwards保留最后一次执行完成的状态）动画是否执行（paused停止）

一、transition与animation的区别
相同点：都有过渡过、都可以设置执行时间、延迟时间、过渡曲线
不同点：transition需要其绑定在某个元素上，当鼠标触发时才能执行，transition指某个属性或多个属性的一个过渡效果
animation引用的动画可以实现浏览器加载完成之后自动执行；animation是指执行关键帧动画
二、3D
【景深】
在多元的
perspective值越大效果越小，
两种写法：第一种直接写perspective：value；写给父元素
第二种写给本身，transform：perspectivevalue；写给元素本身。
景深基点：perspective-origin：值1（左右）值2(上下）
【rotate3d（）】
transform：rotate3d（x，y，z，度数）xyz取值0或者1，0代表不旋转、1代表旋转给度数，如果用3d写法我们的xyz轴要么旋转要么不转，此方法限制了旋转的度数必须一致，如果度数不一致，需要单独设置：rotatex（）rotatey（）rotatez（）中间用空格隔开
【translate3d（xyz）】
translatez 正值向前，负值向后
transform-style:preserve-3d;/透视效果写给父元素/

三、HTML5新增标签
【新增的结构标签】
有意义的div标签：
header：头部标签
nav：导航标签
article：文章标签
hgroup：标题组标签
aside：侧边栏
figure：媒体组标签 figcaption：标题（连用）
section/main：内容标签

footer：底部标签
time：时间标签（内联元素与span相似）
【HTML5中JS通用代码】

var e=(“abbr,article,aside,audio,canvas,datalist,details,”+“figure,footer,header,hgroup,mark,menu,meter,nav,output,”+
“progress,section,time,video,main”).split(’,’);
for(var i=0;i<e .length;i++){
document.createElement(e[i]);
}

四、HTML5新增的input的type类型

文本框:
颜色:
邮箱:
网址:
时间:
日期:
周:
月份:
数字:
搜索:
滑块:
提交:
提示信息:placeholder（跟value同时出现显示value）自动聚焦:autofocus 必填项目:required 正则验证:pattern="\d{3}";限制用户输入的是数字不能超过3个表单不进行验证直接提交：novalidate（写给form）自动补全/历史记录:autocomplete="on默认、off关闭"（写给form）第一条第二条第三条 datalist的id与input的属性list的值是一致的【计算】

五、视频和音频插入
controls（工具栏）
loop（循环播放）
poster=“图片路径”（播放前显示）
autoplay（自动播放、静音下可以播放）
muted （静音）
网页中支持的视频格式：MP4、ogg、webm
网页中支持的音频格式：MP4、ogg、MP3

第一种引用：

第二种引用：（此方式type=“video/MP4”必须写）

【音频】

六、其他标签
注释标签：
夼(kuang)
其他标签：
mark标记定义有标记的文本（黄色选中状态、背景颜色）
rt标记定义对ruby的注释内容文本
详细信息：

哈哈

第一

第二

第三

状态标签(实时状态显示:气压、气温)：状态标签 (任务过程:安装、加载)：一、CSS3选择器 1、基本选择器：id、通配符、class、标签选择器、群组选择器 2、（层次）关系选择器：子代选择器：大于号“>” 后代选择器：空格“ ” 相邻兄弟选择器：加号“+” 向后找相邻的第一个兄弟通用选择器：波浪线“~ 向后找所有的兄弟 ” 3、动态伪类选择器：：focus 获取焦点

：link 初始
：visited 点击后
：hover 划过
：active 点击中
4、目标伪类选择器
：target 指id选择器所在的元素（点击生效）
5、UI元素状态伪类选择器

：checked 选中状态
：enabled 启用状态
：disabled 禁用状态
6、结构伪类选择器
:first-child 结构中的第一个
:first-of-type 该类型中第一个
:last-child 结构中的最后一个
:last-of-type 该类型中的最后一个
【n的取值可以是具体数值，也可以是n的倍数，偶数2n或者even
奇数2n+1或2n-1或者odd】
:nth-child(n) 这个结构中的第几个
:nth-of-type(n) 该类型中的第几个
:nth-last-child(n) 这个结构中倒数第几个
:nth-last-of-type(n) 该类型中的倒数第几个
:only-child 这个结构中只有一个元素
:only-of-type 这个类型的元素只有一个

:empty 该元素内容为空时的效果
:root 最高权重（优先级高于html，body
7、否定伪类选择器
:not() 除了给定标签外，其他的元素属性显示给定值（取反）
8、属性选择器
[value]存在此属性的元素
[value=“值”]存在此属性并且值是给定值的元素
[value^=“值”]存在此属性并且属性值里初始位置包含给定值
[value$=“值”]存在此属性并且属性值里结束位置包含给定值
[value*=“值”]存在此属性并且属性值的任意位置包含给定值
9、伪元素选择器
:first-lettler
:first-line
:after
:before