HTML&CSS基本知识
一、HTML基本介绍
W3C标准（成立于1994年，web技术领域最权威和具影响力的国际中立性技术标准机构）
world Wide web Consortium(万维网联盟)
W3c标准包括：
结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM，ECMAScript）
HTML：超文本标签语言
h5并不是新语言，而是html语言的第五个版本
支持：所有主流浏览器都支持h5（chrome，Firefox，safari。。。）。IE9（部分支持）及以上支持h5，但是ie8（完全不支持）及以下不支持h5.
增加了新特性:语义特性，本地存储特性，网页多媒体，二维三维，特效。
HTML骨架:
<html> 根标签/根节点
<head> 用于存放title、meta、base、style、script、link
<title></title>标题标签
</head>
<body>主体标签
</body>
</html>
标签分类:双标签 <标签名>内容</标签名>
单标签 <标签名/> 如换行标签<br />
标签关系
1.嵌套关系：如html是所有标签的父标签、
2.并列关系：如head和body标签
如果两个标签是嵌套关系，子元素最好缩进一个tab的身位。若是并列关系，最好上下对齐。
sublime快速生成html骨架：1.html：5后tab 2.！后tab *快速生成必备插件：emmet
<!DOCTYPE xxx>标签作用：告诉我们使用哪个html版本
如<！DOCTYPE html>说明使用的是h5版本
字符集
utf-8：包含全世界所有国家需要用到的字符
gb2312：简体中文
BIG5：繁体中文
GBK：包含全部中文字符
标签的语义化：指标签的含义
遵循的原则：先确定语义的html，再选合适的CSS
二、HTML标签
HTML标签：
一、排版标签：
1.标题标签：<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5>
2.段落标签：<p> 文本内容 </p>
3.水平线标签：<hr />(单标签) 增加一条线 hr=horizon
4.换行标签：<br /> br=break
5.div span标签：网页布局的两个主要盒子 div=division
二、文本格式化标签
1.字体加粗：<strong> </strong>
2.字体倾斜：<em> </em>
3.字体加删除线:<del> </del>
4.字体加下划线：<ins> </ins>
标签属性
基本语法格式：
<标签名 属性1=“属性值” 属性2=“属性值2” ...>内容</标签名>
在上面的语法中，
标签可以拥有多个属性，必须写在开始标签中，位于标签名后面
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
任何标签的属性都有默认值，省略该属性则取默认值
采取 键值对 的格式 key=”value”的格式
三、图片标签
基本语法格式
<img src=”图像URL(图像路径)” />
<img />标记属性
属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素 图像宽度
height 像素 图像高度
border 像素 边框宽度
四、超链接
基本语法格式：
<a href=”跳转目标” target=”目标窗口的弹出方式”>文本或图像</a>
Href用于指定链接目标的url地址，当为标签应用href属性值时，它就具有了超链接的功能
Target用于指定链接页面打开方式，有_self和_blank两种取值，其中self为默认值，blank为在新窗口中打开方式。
即如果想要对元素添加点击链接功能，则需要对其加上链接标签即a标签
注意
外部链接 需要添加http://
内部链接 直接链接内部页面名称即可 比如<a href=”index.html”>首页</a>
如果没有确定链接目标，通常将链接标签的href属性值定义为”#”，表示该链接暂时为一个空链接
除了文本，图像表格音频视频等都可以添加超链接 如<a href="img标签.html" target="blank"><img src="C:\Users\Administrator\Desktop\炜\photo\职业照小.jpeg"></a>
锚点定位
<a href=”#id=uu”>xxx</a> 记得添加#和””号！！！！！非常重要！！！！！
<标签名 id=uu> </标签名>
详例见锚点定位.html
Base标签
在head中添加<base target=”_blank” /> 可实现所有链接都以新窗口打开，同理_blank改为_self则实现所有链接都以自身窗口打开
若想实现其中某个链接以不同方式打开，则对其单独设置target属性即可。
特殊字符代码 都要记得加“&”
< (<) > (>) ©(版本商标)  (空格)
注释标签
<!--xxx--> 养成注释的习惯！！！！！！！！
五、路径问题（一般使用相对路径）
六、列表
无序列表：各个列表项之间没有顺序级别之分，是并列的（没有顺序数字前戳）。
基本语法格式：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
注意事项：
1.<ul></ul>之间只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2.<li></li>之间相当于一个容器,可以容纳所有元素
3.无序列表的样式可让CSS来完成设置
有序列表：带顺序数字前缀的列表
基本语法格式：
<ol>
<li>列表项</li>
....
</ol>
注意事项与无序列表相同
自定义列表(理解即可）：常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。一般用于网页结尾。
基本语法：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
七、表格
表格创建
基本语法格式：
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
Table为整体框架
Tr为行数
Td为每一行内的单元格数（没有列的说法）
表头标签
把表头的<td>换成<th>，会自动加粗居中。
表头结构
表格布局时可分为头部主体和页脚
<thead></thead>:用于定义表格头部
<tbody></tbody>:用于定位表格主体
以上两种都不显示，只是用于布局。
表格标题
<caption>标题</caption> 写在table标签内
合并单元格
跨行合并：rowspan 跨列合并：colspan
合并单元格的思想：将多个内容合并的时候，会有多余的东西，将其删除。例如把3个td合并成一个，就多于2个，需要删除
公式 删除的个数=合并的个数-1
表格不要纠结于外观，是CSS的作用
注意事项：table里只能放tr标签，不能放其他。而td里可以放任何东西。
八、表单
组成：表单控件，提示信息，表单域3个部分构成
input控件（重点）为单标签
Type中image可以设置按钮为其他图像 <input type="image" src="img/三国.jpg">
File可以用来上传文件 添加multiple属性可以上传多个文件
如果单选框是同一组，那么可以通过name属性来设置为一组，从而限制选择
Value可以改变按钮中的文本
Checked可以设置默认选项 即<input type=”button” checked=”checked” />
Maxlength可以设置其最大输入字符数
email 用于填写邮箱，填写时必须有@符号，同时包含服务器域名。如不能满足验证，则会阻止当前的数据提交
tel 用于填写号码，不是用来验证，是为了能在移动端打开键盘时打开数字键盘。即限制了用户只能输入数字
url填写网址。只能输入合法的网址，必须包含http：//
number 只能输入数字 其中 max最大值 min最小值 value默认值
新增占位符焦点多选等属性（即input中的属性值）
color 选择颜色
Label标签的使用
若想实现点击文字就可进入文本框，则可用label标签包裹整个表单选项
如：<label>输入账号：<input type="text" /></label>
若有多个输入框，想定位到某个，则对目标框设置id，然后<label for=”id”></label>
若想实现大量文本输入，则可用textarea标签
语法：<textarea>请输入留言</textarea>
下拉菜单：用select标签
<select>
<option >北京</option>
<option selected="selected" >上海</option>
<option >广州</option>
<option >深圳</option>
</select>
其中selected=”selected”代表默认选项
option也可以为单标签，效果一样
表单域：即整个表单框架
基本语法：
<form action=”url地址” method=”提交方式” name=”表单名称”>
各种表单控件
</form>
常用属性：
Action:表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址
Method：用于设置表单数据的提交方式，其取值为get或post
Name：用于指定表单的名称，以区分同一个页面中的多个表单。
注意：每个表单都要有自己的表单域
email 用于填写邮箱，填写时必须有@符号，同时包含服务器域名。如不能满足验证，则会阻止当前的数据提交
tel 用于填写号码，不是用来验证，是为了能在移动端打开键盘时打开数字键盘。即限制了用户只能输入数字
url填写网址。只能输入合法的网址，必须包含http：//
number 只能输入数字 其中 max最大值 min最小值 value默认值
新增占位符焦点多选等属性（即input中的属性值）
color 选择颜色
九、HTML5新特性
html文档类型和字符集
HTML:sublime输入html：4s
HTML5:sublime输入html：5 或 ！
XHTML:sublime输入html：xt
H5中字符集写法：<meta charset=”UTF-8”>
H5常用新标签
Header：定义文档的页眉 头部
Nav：定义导航链接的部分
Footer：定义文档或节的页脚 底部
Article：定义文章
Section：定义文档中的节
Aside：定义其所处内容之外的内容 侧边
Datalist：标签定义选项列表，请与input元素配合使用该元素
Fieldset:可将表单内的相关元素分组，打包
Datalist用法
通过设置id并在input中的list属性链接这个id，从而达到智能显示的效果
<input type="text" value="输入明星" list="star"> <!-- input里面用list -->
<datalist id="star"> <!-- datalist里面用id实现和input的链接 -->
<option >刘德华</option>
<option >郭富城</option>
<option >黎明</option>
<option >张学友</option>
<option >叼你妈</option>
<option >臭傻逼</option>
<option >曹尼玛</option>
<option >吃屎吧</option>
</datalist>
datalist与selection的区别:前者不仅可以选择，还可以输入。
datalist弊端：在不同浏览器的显示不同，少用
如果与之连接的input type值为url，则其value值必须添加http://
Fieldset用法：
与legend搭配使用，legend包含在fieldset里面负责写标题。例：
<fieldset>
<legend>用户登录</legend> <!-- 标题 -->
用户名：<input type="text"> <br />
密 码：<input type="password">
</fieldset>
常用属性值
Placeholder 可实现用户输入时里面的文字消失，删除所有文字，自动返回
Autofocus：实现打开网页时，光标自动定位到其所在表单
Autocomplete：实现自动记录表单内容，再次输入时可智能提示
用法：用户名：<input type="text" autocomplete="on" name="username">
<input type="submit">
注意：必须要有提交按钮。其次表单必须要有名字。
required：要求必须输入
pattern:正则表达式验证
multiple 实现上传填写多个东西
form：指定某个表单id，再将当前表单的form属性值设置为与其id相同。在将来指定id号的表单进行数据提交的时候，也会将当前表单元素的数据进行提交
十、多媒体标签
多媒体标签
引用网上的视频：embed
引用本地视频：video 三种格式：mp4、ogg、wmv
引用本地音频：audio 三种格式：mp3、ogg、wav
常用属性 ：autoplay控制自动播放 controls：添加进度条等控制元素
Loop：x 循环播放x次 poster：设置视频封面
<!-- 从上往下一个个尝试 -->
<video controls>
<source src="xx.mp4">
<source src="xx.flv">
</video>
十一、解决低版本浏览器新标签不兼容的措施
<!-- 1.通过创建新标签并转化标签模式 -->
<!-- <script>
document.createElement("名字") 默认为行级元素
</script> -->
<!-- 2.通过引入第三方插件 -->
<script src="../html5shiv.min.js"></script>
其他标签
keygen 实现加密 产生私钥和公钥，私钥客户端对信息进行二次加密后与公钥一起发给服务器，服务器再通过公钥对其解密
output输出信息
十二、CSS入门
1、css样式规则
格式：选择器{ 属性：属性值；属性：属性值；}
规则：
选择器用于指定CSS样式作用的html对象，花括号内是具体的样式
属性和属性值以“键対值”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等
属性和属性值之间用英文”:”链接 不是等号
多个键值对之间用英文”;”区分
2、选择器
选择器
标签选择器
格式：
标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
类选择器
格式
.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
标签调用时用class=“类名”即可
命名规范：
长名称或词组可以使用中横线来为选择器命名
不建议使用“_”下划线命名css选择器
不要纯数字、中文等命名，尽量使用英文字母
多类名选择器
即一个标签带多个类名，从而实现灵活自由搭配
例：<div class="font20 blue">傻逼</div>
<div class="font14 blue">憨憨</div>
<div class="font20 orange">傻逼</div>
<div class="font14 orange">傻逼</div>
1.样式显示效果跟html中的类名先后顺序无关
2.各个类名中间用空格隔开
交集选择器
<style>
标签名.类名{}
</style>
并集选择器
<style>
标签名,
标签名,
标签名,
标签名{} 一般上下写
</style>
Id选择器
语法格式：
#id名{}
<xx id=””></xx>
Id与类选择器区别：一个id只能用于一个标签，类可以用于多个标签。
链接伪类选择器
语法格式
：link{} 设置未点击链接时链接的样式
：visited{} 设置点击链接后链接的样式
：hover{} 设置鼠标移动到链接时的样式
：active{} 设置鼠标点击链接且不松开时的样式
注意：必须按照以上lvha的顺序
一般工作不需要用到active和visited，所以有以下便捷写法*/
a{color:gray;}a:hover{color:red;}
结构伪类选择器(原理:先找到XX元素的父元素，再找这个父元素的第指定个元素，如果不与xx元素相同则无视。即是相对于父元素的结构伪类）
n是从0到指定的元素个数
xx:first-child{} 选择xx元素中的第一个子元素
Xx:last-child{} 选择xx元素中的最后一个子元素
Xx：nth-child（y）{} 选择xx元素中的第y个子元素
Xx：nth-child（n）{} 选择所有子元素
Xx：nth-child（even）{} 选择所有第偶数个子元素
Xx：nth-child（odd）{} 选择所有第奇数个子元素
Xx：nth-child（2n）{} 选择所有第偶数个子元素
Xx：nth-child（2n+1）{} 选择所有第奇数个子元素
Xx：nth-last-child（）{} 与上面相同，但是是倒数
xx：nth-child（-n+y）{} 选择前y个
xx:nth-of-type(n){} 只认定xx元素同级元素中所有xx元素。即所有xx元素中的第n个
xx:nth-last-of-type （）{} 倒数
兄弟伪类选择器
xx + yy {} 加号代表与xx元素相邻的yy元素 必须是相邻的 （相邻后一个标签受影响）
xx ~ yy{}波浪号代表满足条件的所有xx的兄弟元素 （相邻后同一级标签受影响）
伪元素选择器
X：：first-letter{} 选中x标签中文档的第一个字
X：：first-line{} 选中x标签中文档的第一行
X：：selection{} 使选中的文字发生实时变化（只能改变显示样式不能改变内容大小）
X：：before{content：”xx”;}在x文档的开头添加文字xx
X：：after{content:”xx”；}在x文档的结尾添加文字XX
伪元素的本质
伪元素本质为行内元素，改为块级元素(或者浮动、定位）后可以设置宽高，伪元素不占位置。设置：before和：after时必须设置content属性，否则伪元素不起作用
后代选择器（后代所有标签受影响）
父标签 子孙标签{}
可以选择父标签内的所有对应子标签、孙标签、重孙标签。。。
子元素选择器(后代一级所有标签受影响）
父标签>字标签{}
只能选择父标签的亲生儿子标签。
target样式：可以为锚点目标元素添加样式，当目标元素被触发为当前锚点链接的目标时，调用此样式
语法 目标链接：target {样式;}
3、颜色
CSS颜色三种表达方式
1.直接用名字表示 color：red
2.用16进制代码表示 color：#ffb100
3.用rgb代码表示 rgb（192，255，252） 分别代表红绿蓝，16进制数
4.rgba（x，x，x，x）最后一个数值可以设置半透明度
5.hsl（颜色，饱和度，亮度）； 颜色0~360 饱和度、亮度0%~100%
4、CSS书写规范
1.选择器与花括号之间必有空格
2.属性名与冒号之间不允许有空格，冒号后必须有空格
3.属性值后必须加分号
4.当选择器有多个并行标签时，应上下逗号分开
5.选择器的嵌套尽量不超三层
6.不同属性应另起一行
5、CSS样式表
内部样式表
<head>
<style type=’’text/CSS’’>
选择器 {属性1：属性值1；属性2：属性值2；属性3：属性值3；}
</style>
</head>
行内样式表
<标签名 style=’’属性1：属性值1；属性2：属性值2；属性3：属性值3；”>
外部样式表
<head>
<link href=’’css的路径’’ type=’’text/css’’ rel=’’stylesheet’’ /> 是个单标签
</head>
总结：推荐使用外部样式表
6、标签显示类型
块级标签
如<h1> <p> <div> <ul> <ol> <li>等
块级元素特点：
总是从新行开始
高度、行高、外边距以及内边距都可以控制
宽度默认是容器的100%
可以容纳内联元素和其他块元素
行内元素
如<a> <strong><b><em><i><del><s><ins><u><span>等
特点：
和相邻行内元素在一行上
高宽无效，但水平方向的padding和maigin可以设置，垂直方向的无效
默认宽度是它本身内容的宽度
行内元素只能容纳文本或其他行内元素
注意：文字标签里不能放块级元素。链接里不能再放链接
行内块元素
如<img/><input/><td>等
特点：
和相邻行内元素在一行上，但是之间会有空白缝隙
默认宽度就是它本身内容的宽度
高度，行高，外边距以及内边距都可以控制
7、CSS三大特性
层叠性
当同个标签设置样式属性不同值出现冲突时，则依照就近原则以最后的样式属性为准。
继承性
子元素能继承父元素的样式
优先级
CSS Speciality 权重值：
继承或*的贡献值 0,0,0,0
每个元素标签的贡献值 0,0,0,1
类、伪类、元素选择器的贡献值 0,0,1,0
Id选择器的贡献值 0,1,0,0
行内样式贡献值 1,0,0,0
！Important的贡献值 ∞无穷大
注意：
权重可以叠加 如：div ul li 的贡献值为0,0,0,3
数位之间没有进制
继承的权重为0
十三、字体设置
CSS Unicode字体
微软雅黑 \5FAE\8F6F\96C5\9ED1
宋体 \5B8B\4F53
尽量只写unicode字体 写宋体和微软雅黑
CSS中注释方式：/*xxxxx*/
设置字体样式：font-family:”xxx”
设置字体字号：font-size:”xxpx”
字体字号常用技巧：
网页中正文普遍使用14px
若有设置多个字体，则字体之间应用英文逗号隔开
中文字体需要加英文双引号，英文字体不需要，且英文字体应在中文字体之前
若字体中包含空格、π、$等符号，无论是英文还是中文字体都必须加引号
尽量使用系统默认字体
设置字体粗细
Font-weight:
可用属性值包括normal（即400）、bold（即700）、bolder、lighter、100-900之间100的整倍数
设置字体风格
Font-style:
可用属性值包括normal,italic(斜体)
字体综合设置
选择器{font：font-style font-weight font-size/line-height font-family；}
注意：
不能更换顺序，以空格隔开
不需要设置的属性可以忽略
文字阴影:
Text-shadow:水平位置(px) 垂直位置(px) 模糊距离(px) 阴影颜色(rgba);
行高对齐和首行缩进:
行间距：line-height：xxpx;
首行缩进 text-indent：xxem；
字间距:letter-spacing
Text-decoration：none 不设置下划线
Text-decoration：underline 设置下划线
Text-decoration：overline 设置上划线
Text-decoration：line-through 设置穿过文本的一条线
十四、背景设置
Background-img:url（）；背景图地址
Background-color:；设置背景颜色
Background-repeat:；设置平铺方式 有no-repeat、repeat-x、repeat-y、space、round选项，分别对应全平铺，x轴方向平铺，y轴方向平铺,图片不缩放并增加空隙后平铺，图片缩放后使其紧贴平铺
设置背景图位置
Background-position：x轴方向像素 y轴方向像素；
Background-posiiton：方位词 方位词；（无先后顺序之分）top bottom left right center
Background-position：方位词+y像素（x像素+方位词）；
背景图平铺开始位置
background-origin:border-box,padding-box,content-box(即从border、padding、content开始平铺）
bcakground-clip:border-box,padding-box,content-box(即分别只显示border及以内、padding及以内、content的内容）
背景附着
Background-attachment：scroll（fixed） 前者为默认随对象内容滚动，后者为背景图像固定 local
背景简写：background：color url 平铺方式 滚动方式 位置;（尽量采用此顺序）
背景半透明：在颜色设置中采用rgba（x，x，x，0.x）最后为透明度数值
背景缩放：
Background-size：xxpx xxpx；
Background-size：xx% xx%；
Background-size：contain； 自动调整缩放比例保证图片完整显示
Background-size：cover； 自动调整缩放比例保证图片填充满背景区域
多背景图片
Background-image：url（），url（）；
Background：url（xxxx）……，url（xxx） ……； 不同图片以逗号隔开
十五、盒子边框
Border-color： 设置边框颜色
Border-width： 设置边框厚度
Border-style： 设置边框类型
Style属性值有：
实线solid
虚线dashed
点线dotted
双实现double
不同方向边框的写法
border-top（left、right、bottom）-width（color、style）
边框综合写法
Border：width style color
合并细线表格
Border-collapse：collapse
圆角矩形
Border-radius:xxpx(xx%) 设置四个角
Border-radius:xx xx 设置左上右下 左下右上
Border-radius：XX XX XX 设置左上 左下右上 右下
Border-radius：xx xx xx xx 左上 右上 右下 左下
border-radius:xx/xx 设置每个角的水平/垂直方向
border-方位词-方位词-radius：xxpx； 如broder-top-right-radius
border-radius：x1 x3 x5 x7/x2 x4 x6 x8; x1x2为左上 x3x4右上 以此类推
边框图片
border-image-source：url（）；
border-image-slice：xx fill； 图片切片，不需加单位,即将图片四个边xx像素的宽度作为边框 fill则是将整个图片填充
border-image-width:xxpx 设置边框背景图宽度 但是不影响内容放置
border-image-outset:0 边框扩展，一般为0
border-image-repeat:repeat/round (前者直接平铺 后者缩放后平铺）
简写 border-image:source slice /width/outset repeat;
盒子内边距
Padding：xx 设置四个边距
Padding：xx xx 设置上下 左右边距
Padding：xx xx xx 设置 上 左右 下边距
Padding：xx xx xx xx 设置上 右 下 左 边距
盒子外边距
margin：xx
margin：xx 设置四个边距
margin：xx xx 设置上下 左右边距
margin：xx xx xx 设置 上 左右 下边距
margin：xx xx xx xx 设置上 右 下 左 边距
盒子模型布局稳定性
使用优先级：width>padding>margin
原因：
1.margin会有外边距合并，还有ie6下面margin加倍的bug
2.padding会影响盒子大小，需要进行加减计算
3.Width没有问题，常用宽度剩余法 高度剩余法来做
十六、盒子浮动
浮动：指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
语法：选择器{float：属性值；}
属性值：left、right、none
使用浮动首先要添加标准流父盒，从而防止布局失真
浮动特性
父盒内的盒子设置浮动后会就近对齐父盒子，但不会遮盖padding和margin
兄弟盒子中第一个盒子如果浮动，第二个盒子设置浮动后会与其顶部对齐。若第一个盒子不浮动，第二个盒子设置浮动后顶部会与其底部对齐
元素（包括块级和行内）添加浮动后，都会具有行内块元素的特性
总结：float==>浮漏特
浮：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面
漏：加了浮动的盒子，不占位置的，他浮起来了，他原来的位置漏给了标准流的盒子
特：特别注意要和标准流父级搭配使用。
清除浮动
在一般情况下，考虑到子盒子的内容变化，父盒子都不方便设置高度。子盒子没有浮动时会自动撑开父盒子。如果子盒子浮动，则父盒子高度会变为0，导致其他盒子占据位置。
清除浮动就是解决没有设置高度的父盒子在子盒子浮动后高度变为0的现象
解决方法
1.在父盒子中添加overflow：hidden；
2.浮动盒子后添加空标签，且将该标签的clear属性值设置为both
.clear {
clear: both;} 清除浮动的影响
3.用after伪元素清除浮动（推荐）
父盒子类名添加 clearfix
.clearfix:after {
content: '.';
display: block;
height: 0;
visibility:hidden;
clear: both;
}
4.用before和after伪元素清除浮动（推荐）
父盒子类名添加clearfix
.clearfix:before,.clearfix:after {display:table;content:’ ‘;}
.clearfix:after {clear:both;}
.clearfix {*zoom:1;}
十七、定位
边偏移
Top bottom left right
定位模式
语法：
Position：{属性值；}
属性值：
静态定位static：
相对定位relative：
绝对定位absolute
固定定位fixed
Static定位：
默认，该定位下无法使用边偏移属性
Relative定位：
定位后可通过边偏移改变位置，是以自身左上角为基准。不脱标，依旧是标准流，原先位置保留
Absolute定位：
可通过边偏移改变位置，完全脱标不占位置。
子盒子设置为absolute后，父盒子必须定位为任何定位类型，子盒子才能以父盒子为基准设置边偏移改变位置，否则会乱跑
子绝父相：一般子盒子设置为绝对定位后，父盒子要设置为相对定位较好
水平/垂直居中：盒子设置绝对定位后，margin中的auto无效（具体数值有效）
要居中一般是以：1首先left50%2.然后走外边距负的一半值即可
如：left：50%；margin-left：-xxpx；
Top：50%；margin-top：-xxpx；
或者 left：父盒子宽度一半减去子盒子宽度一半；top：父盒子高度一半减去子盒子高度一半
Fixed定位
固定定位的元素跟父亲没有任何关系，只认浏览器
完全脱标,不占位置,不随着滚动条移动
叠加次序
index:正整数、负整数、0
注意
1.index默认属性值为0，取值越大，定位元素在层叠元素中越居上
2.如果取值相同，则按顺序后来居上
3.后面数字不能家单位
4.只有相对定位绝对定位固定定位有这个属性。
固定绝对定位模式转换
跟浮动一样,元素添加了绝对定位和固定定位之后,元素都会变成行内块模式
也就是；如果行内元素添加了绝对定位和固定定位后,可以不用转换模式,直接添加高度宽度
十八、Display和visibility、Overflow溢出的使用
Display设置或检索对象是否及如何显示
Display：none 隐藏对象
Display：block除了转换为块级元素之外还有显示元素的意思
特点：隐藏之后，不再保留位置
Visibility
设置或检索是否显示对象
Visible：对象可视
Hidden：对象隐藏
特点:隐藏之后,继续保留原有位置
Overflow溢出
属性值
Visible:不剪切内容也不添加滚动条 （默认）
Auto：超出自动显示滚动条,不超出不显示滚动条
Hidden：不显示超出对象内容的尺寸,超出的部分隐藏掉
Scroll：不管超出内容否,总是显示滚动条