HTML
1.1 简介
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
1.2 基本结构
1.2.1文档类型
两种文xhtml 1.0和html5档的区别
1、文档声明和编码声明
2、html5新增了标签元素以及元素属性
1.2.2注释
特殊符号 & … ;
<!DOCTYPE html>
<html lang="en">
<!-- 声明式：lang=“en”’定义网页的语言为英文,
定义网页的语言为英'lang="zh-CN"' -->
<head>
<!-- 设置网页编码 -->
<meta charset="utf-8" />
<!-- 关键词： 是否能被搜索引擎搜到 -->
<meta name="keywords" content="学习html" />
<!-- 描述：当搜到本网页时，展示的简介内容... -->
<meta name="description" content="学习html非常的好，好啊啊啊啊啊啊...." />
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
1.3 基本标签
-
[1.3.1标题标签](# 1.3.1标题标签)
-
段落标签
-
换行标签
-
水平线
-
样式标签
-
图片
-
链接
-
列表
-
表格
-
表单
-
视频
正则表达式：https://www.runoob.com/regexp/regexp-syntax.html
1.3.1标题标签
通过
、
、
、
、
、
,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说：
用作主标题，其后是
，再其次是
，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
块标签
1、
标签 块元素，表示一块内容，没有具体的语义。
2、 标签 行内元素，表示一行中的一小段内容，没有具体的语义。
含样式和语义的标签
1、 标签 行内元素，表示语气中的强调词
2、 标签 行内元素，表示专业词汇
3、 标签 行内元素，表示文档中的关键字或者产品名
4、 标签 行内元素，表示非常重要的内容
语义化的标签
能认识这些标签，理解文档的结构，方便网站的收录。
比如：
- h1标签是表示标题，
- p标签是表示段落，ul、li标签是表示列表，
- a标签表示链接，
- dl、dt、dd表示定义列表等，语义化的标签不多。
html段落标签、换行标签与字符实体
段落标签
<p>------ </p>
行标签
<br/>
字符实体
代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体,代码如下：
<!-- 在段落前想缩进两个文字的空格，使用空格的字符实体： -->
<p>
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>
在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如：
<!-- “<” 和 “>” 的字符实体为 < 和 > -->
<p>
3 < 5 <br>
10 > 5
</p>
图片、路径
html图像标签
标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
· src属性 定义图片的引用地址
· alt属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。
<img src="images/pic.jpg" alt="产品图片" />
绝对路径和相对路径
像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。
· 绝对地址：相对于磁盘的位置去定位文件的地址
· 相对地址：相对于引用文件本身去定位被引用的文件地址
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：
· “ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
· “ …/ ” 表示当前文件所在目录下的上一级目录，比如：“…/images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
链接
标签可以在网页上定义一个链接地址，它的常用属性有：
· href属性 定义跳转的地址
· title属性 定义鼠标悬停时弹出的提示文字框· target属性 定义链接窗口打开的位置
o target="_self" 缺省值，新页面替换原来的页面，在原来位置打开
o target="_blank" 新页面会在新开的一个浏览器窗口打开
列表
有序列表
在网页上定义一个有编号的内容列表可以用
- 、
- 配合使用来实现，
type=“1|a|A|i|I”
代码如下：
<ol>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ol>
在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。
无序列表
在网页上定义一个无编号的内容列表可以用
- 、
- 配合使用来实现，
type=“disc|circle|square”
代码如下：
<ul>
<li><a href="#">新闻标题一</a></li>
<li><a href="#">新闻标题二</a></li>
<li><a href="#">新闻标题三</a></li>
</ul>
在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。
定义列表
定义列表通常用于术语的定义。
-
标签表示列表的整体。
标签定义术语的题目。
-
标签是术语的解释。一个
-
中可以有多个题目和解释，代码如下：
<h3>前端三大块h3>
<dl>
<dt>html</dt>
<dd>负责页面的结构</dd>
<dt>css</dt>
<dd>负责页面的表现</dd>
<dt>javascript</dt>
<dd>负责页面的行为</dd>
</dl>
表单
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：
1、： 定义整体的表单区域
- action：定义表单数据提交地址
- method：定义表单提交的方式，一般有“get”方式和“post”方式
2、
3、：定义通用的表单元素
type属性：
o type=“text” 定义单行文本输入框
o type=“password” 定义密码输入框
o type=“radio” 定义单选框
o type=“checkbox” 定义复选框
o type=“file” 定义上传文件
o type=“submit” 定义提交按钮
o type=“reset” 定义重置按钮
o type=“button” 定义一个普通按钮
o type=“image” 定义图片作为提交按钮，用src属性定义图片地址
o type=“hidden” 定义一个隐藏的表单域，用来存储值
· value： 定义表单元素的值
· name： 定义表单元素的名称，此名称是提交数据时的键名
4、： 定义多行文本输入框
5、: 定义下拉表单元素
6、标签 与标签配合，定义下拉表单元素中的选项
注册表单实例：
<form action="http://www..." method="get">
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密码：</label><input type="password" name="password" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述：</label
<textarea name="about"></textarea>
</p>
<label>籍贯：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<!-- input类型为submit定义提交按钮
还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：
<input type="image" src="xxx.gif">-->
<input type="reset" name="" value="重置">
</p>
</form></p>
表格
1、
标签：声明一个表格，它的常用属性如下：
border属性 定义表格的边框，设置值是数值
cellpadding属性 定义单元格内容与边框的距离，设置值是数值
cellspacing属性 定义单元格与单元格之间的距离，设置值是数值
align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right2、标签：定义表格中的一行
3、和标签：定义一行中的一个单元格，th表示表头单元格，td代表普通单元格，
它们的常用属性如下：
align ：水平移动，设置单元格中内容的水平对齐方式, align=left | center | right
valign ：垂直移动，设置单元格中内容的垂直对齐方式，valign="top | middle | bottom"
colspan ：跨行，设置单元格水平合并，设置值colspan="n"
rowspan ：跨列，设置单元格垂直合并，设置值rowspan="n"
<table border="1px" >
<!--表格table，行tr ，列 td -->
<tr align="right">
<td rowspan="2">1-1</td>
<td colspan="2" align="center">a</td>
</tr>
<tr>
<td valign="middle">2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td align="center">c</td>
</tr>
</table>
页面布局
布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种：
1、table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。
2、HTML+CSS布局(DIV+CSS)：主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。
table来做整体页面的布局，布局的技巧归纳为如下几点：
1、按照设计图的尺寸设置表格的宽高以及单元格的宽高。
2、将表格border、cellpadding、cellspacing全部设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的作用。
3、针对局部复杂的布局，可以在单元格里面再嵌套表格，嵌套表格划分局部的空间。
4、单元格中的元素或者嵌套的表格用align和valign设置对齐方式
5、通过属性或者css样式设置单元格中元素的样式
HTML5新增标签
音频
注意type问题：
一般而言，文件的后缀 就是type，但个别不一致，如下
<audio controls autoplay >
<source src="resources/恭喜发财.mp3" type="audio/mpeg" />
<source src="resources/恭喜发财.ogg" type="audio/ogg" />
</audio>
视频
<video>:每一个<video>对应一个视频文件；
如果考虑浏览器兼容问题，则可以编写多个视频资源，然后嵌套在一个<video>中
<!--
<video src="resources/4.第一个MQ案例.webm" controls ></video>
<video src="resources/4.第一个MQ案例.wvm" controls ></video>
<video src="resources/4.第一个MQ案例.mp4" controls ></video>
-->
<video controls >
<source src="resources/4.第一个MQ案例.webm" type="video/webm"/>
<source src="resources/4.第一个MQ案例.mp4" type="webm/mp4" />
</video>
新增语义标签
1、
页面头部、页眉
2、
###HTML5 新增表单控件
新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索
<form action="resources/b.html">
用户名（必填）：<input type="text" required /><br/>
电话（必填）：<input type="text" required pattern="^1[358]\d{9}$" /> <br/>
<!--type="email"会初步校验 内容是否为邮箱，如果不是 就会终止提交 -->
邮箱（必填）：<input type="email" required /><br/>
网址：<input type="url" /><br/>
数量：<input type="number" min="0" max="100" step="10"/><br/>
范围：<input type="range" min="0" max="100" step="10"/><br/>
搜索：<input type="search" placeholder="请输入商品名" /><br/>
提交：<input type="submit" value="提交">
</form>
<label>颜色:</label><input type="color" name=""><br><br>
<label>电话:</label><input type="tel" name=""><br><br>
<label>日期:</label><input type="date" name=""><br><br>
<label>时间:</label><input type="time" name=""><br><br>
<label>星期:</label><input type="week" name=""><br><br>
新增常用表单控件属性：
1、placeholder 设置文本框默认提示文字
2、autofocus 自动获得焦点
3、autocomplete 联想关键词
内联框架iframe
<a href="https://www.baidu.com" target="my_iframe">点我进百度</a>
<a href="https://www.163.com" target="my_iframe">点我进网易</a>
<a href="resources/b.html" target="my_iframe">点我进b.html</a>
---
<iframe src="https://www.baidu.com" name="my_iframe" width="1200px" height="500px"></iframe> <br/>
---
<br/>
<a href="https://www.baidu.com" target="_self">点我进百度</a>
<br/>
<a href="https://www.baidu.com" target="_self">点我进百度（在当前页面打开）</a>
<a href="https://www.baidu.com" target="_blank">点我进百度（在新窗口中打开）</a>
<br/><br/><br/>
<iframe src="https://www.baidu.com" name="iframe1" width="1200px" height="500px"></iframe> <br/>
<iframe src="https://www.163.com/" name="iframe2"></iframe><br/>
<iframe src="resources/b.html" name="iframe3"></iframe>
a标签的值： _blank:新打开一个窗口
_self:在当前页面打开（默认值）
iframe的name值：把当前a的href值赋值给 iframe的src值
CSS
选择器
文本
盒子模型
表格
表单
标签
浮动 （float）
溢出（overflow）
定位
透明
动画
1.1基本语法
1.1.1标签
div：块级元素，换行
span： 内联元素，不换行
标签学习：
\1. 文件标签：构成html最基本的标签
* html:html文档的根标签
* head：头标签。用于指定html文档的一些属性。引入外部的资源
* title：标题标签。
* body：体标签
* ：html5中定义该文档是html文档
\2. 文本标签：和文本有关的标签
* 注释：
*
to
：标题标签
* h1~h6:字体大小逐渐递减
*
：段落标签
*
：换行标签 *
：展示一条水平线 * 属性：
* color：颜色
* width：宽度
* size：高度
* align：对其方式
* center：居中
* left：左对齐
* right：右对齐
* ：字体加粗
* ：字体斜体
* :字体标签
*
:文本居中 * 属性：
* color：颜色
* size：大小
* face：字体
* 属性定义：
* color：
\1. 英文单词：red,green,blue
\2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
\3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
* width：
\1. 数值：width=‘20’ ,数值的单位，默认是 px(像素)
\2. 数值%：占比相对于父元素的比例
div{
/*
选择器 { 属性:值;
属性:值;
属性:值;}
选择器:将样式和页面元素关联起来的名称
属性:希望设置的样式属性每个属性有一个或多个值。
*/
width:100px;
height:100px;
color:red
}
2.1 样式引入
-
外联式：通过link标签，链接到外部样式表到页面中。
<link rel="stylesheet" type="text/css" href="css/main.css"> -
嵌入式：通过style标签，在网页上创建嵌入的样式表。
<style type="text/css"> div{ width:100px; height:100px; color:red } ...... </style> -
内联式：通过标签的style属性，在标签上直接写样式，行内：不推荐， 赶时间、应急。
<div style="width:100px; height:100px; color:red ">......</div>
外部导入的两种方式（链接式,link； 导入式,@import）区别 ：
- 推荐link
- link属于xhtml规范； @import属于css2.1标准
- link将css预先加载到网页中，再进行编译显示
- @import：先显示网页结构，然后再加载CSS内容
- @import是css2.1独有的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KGu1O7ce-1605770954735)(html概述和基本结构.assets/1571299228823.png)]
提示： 注释：html ，在css中注释 /* */
CSS优先级问题：
行内优先级 >外部 >内部
1.3 选择器
1.3.1 标签选择器
标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
举例：
*{margin:0;padding:0}
div{color:red}
<div>....</div> <!-- 对应以上两条样式 -->
<div class="box">....</div> <!-- 对应以上两条样 -->
1.3.2 id选择器
通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
举例：
#box{color:red}
<div id="box">....</div> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
1.3.3 类选择器
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>
1.3.4 层级选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
.box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class="box">
<span>....</span>
<a href="#" class="red">....</a>
</div>
<h3 class="red">....<
1.3.5 组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器。
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
1.3.6 伪类及伪元素
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
1.4 文本设置
1.4.1 文本的css样式：
color 设文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:‘微软雅黑’;
font-style 设置字体是否倾斜，如：font-style:‘normal’; 设置不倾斜，font-style:‘italic’;设置文字倾斜
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px;
·font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px ‘微软雅黑’;
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
1.4.2 颜色表示
css颜色值主要有三种表示方法：
颜色名表示，比如：red 红色，gold 金色
rgb表示，比如：rgb(255,0,0)表示红色
16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00
阴影text-shadow: 横坐标 纵坐标 发散程度
a:hover 悬浮
a:link 未访问
a:visited 已经访问过了
a:active 点击鼠标时
设置的顺序： link -> visitied > hover > active
1.5 盒子模型
1.5.1盒子模型解释
把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。
设置宽高
width:200px; /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */
设置边框
设置一边的边框，比如顶部边框，可以按如下设置：
border-top-color:red; /* 设置顶部边框颜色为红色 */
border-top-width:10px; /* 设置顶部边框粗细为10px */
border-top-style:solid; /* 设置顶部边框的线性为实线，常用的有：solid(实线) dashed(虚线) dotted(点线); */
上面三句可以简写成一句：
border-top:10px solid red;
设置其它三个边的方法和上面一样，把上面的’top’换成’left’就是设置左边，换成’right’就是设置右边，换成’bottom’就是设置底边。
四个边如果设置一样，可以将四个边的设置合并成一句：
border:10px solid red;
1.5.2内间距padding
设置盒子四边的内间距，可设置如下：
padding-top：20px; /* 设置顶部内间距20px */
padding-left:30px; /* 设置左边内间距30px */
padding-right:40px; /* 设置右边内间距40px */
padding-bottom:50px; /* 设置底部内间距50px */
上面的设置可以简写如下：
padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左
四个方向的内边距值。 */
padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：
padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/
padding：20px; /* 设置四边内边距为20px */
1.5.3设置外间距margin
外边距的设置方法和padding的设置方法相同，将上面设置项中的’padding’换成’margin’就是外边距设置方法。
<!DOCTYPE html>
<html lang="en">
<title>盒子的真实尺寸</title>
<style type="text/css">
.box01{width:50px;height:50px;background-color:gold;}
.box02{width:50px;height:50px;background-color:gold;border:50px solid #000}
.box03{width:50px;height:50px;background-color:gold;border:50px solid #000;padding: 50px;}
</style>
</head>
<body>
<div class="box01">--1---</div>
<br />
<div class="box02">--2---</div>
<br />
<div class="box03">--3--</div>
</body>
</html>
通过上面的页面得出结论：盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高，盒子的真实尺寸计算公式如下：
-
盒子宽度 = width + padding左右 + border左右
-
盒子高度 = height + padding上下 + border上下
1.5.4相关问题
margin相关技巧
1、设置元素水平居中： margin:x auto;
2、margin负值让元素位移及边框合并
外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：
1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位
margin-top 塌陷
在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：
1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：
.clearfix:before{
content: '';
display:table;
}
1.6元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，
设置的方法是通过overflow属性来设置。
overflow: visible | hidden |scroll |auto;
overflow的设置项:
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。5、inherit 规定应该从父元素继承 overflow 属性的值。
1.7 浮动
浮动特性
块级元素 -> 内敛元素 ：将不同行的元素放置到一行
浮动 ：将不同行的元素放置到一行
float: none | left | right
浮动元素有左浮动(float:left)和右浮动(float:right)两种
浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来
相邻浮动的块元素可以并在一行，超出父级宽度就换行
浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)
浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动
浮动元素之间没有垂直margin的合并
清除浮动
浮动（压缩）：压缩的是自己的空间
clear: 清除浮动（清除一半，还原了 块级元素的 换行特性，但没有还原空间）
clear:清除的是上一个元素（不是自己）
clear:left | right |both
父级上增加属性overflow：hidden
在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
使用成熟的清浮动样式类，clearfix
.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}
清除浮动的使用方法：
-
.con2{ overflow:hidden }
##1.8 定位
1.8.1文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。
块级元素（block level）：自带换行 div ，可以设置宽和高
内联元素 (inline level) ：不换行 span, a ，没有宽和高 （内敛元素不遵守盒子模型）
inline-block：
1.如果inline失效，可以尝试inline-block
2.可以设置宽和高
块级元素可以包含内敛，反之不行。
1.8.2 块元素
元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素。
块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：
- 支持全部的样式
- 如果没有设置宽度，默认的宽度为父级宽度100%
- ·盒子占据一行、即使设置了宽度
1.8.3 内联元素
内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：
- 支持部分样式（不支持宽、高、margin上下、padding上下）
- 宽高由内容决定
- 盒子并在一行
- 代码换行，盒子之间会产生间距
- 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式
解决内联元素间隙的方法
1、去掉内联元素之间的换行
2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size
1.8.4 内联块元素
内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：
- 支持全部样式
- 如果没有设置宽高，宽高由内容决定
- 盒子并在一行
- 代码换行，盒子会产生间距
- 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。
这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。
1.8.5 display属性
display属性是用来设置元素的类型及隐藏的，常用的属性有：
none 元素隐藏且不占位置
block 元素以块元素显示
inline 元素以内联元素显示
inline-block 元素以内联块元素显示
1.9 定位
position: static(默认值，没有定位) | relative(相对定位) | absolute(绝对定位) |fixed（固定定位，个别版本浏览器不支持）
relative：相对于自身
注意位置：left是指往右便宜；top是下；其他同理
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：
relative 相对定位，相对于自身定位元素,所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
absolute 绝对定位，元素脱离文档流，如果有已定位的祖先：参照祖先。不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于父级元素来进行定位，如果找不到，则相对于body元素进行定位。
fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
inherit 从父元素继承 position 属性的值。
绝对定位：
position: absolute
是否存在 “已经定位的祖先元素”
- 存在 ：则参照 “已经定位的祖先元素”定位
- 不存在： 则参照浏览器定位
绝对定位：会脱离文档流（释放空间，会让网页无法识别）
div
{
width:100px ;
height:100px ;
background: yellow ;
position:absolute ;
right :30px ;
bottom: 30px ;
}
1.9.1 定位偏移
定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。
定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级
伪代码如下:
.box01{
......
position:absolute; /* 设置了绝对定位 */
left:200px; /* 相对于参照元素左边向右偏移200px */
top:100px; /* 相对于参照元素顶部向下偏移100px */
z-index:10 /* 将元素层级设置为10 */
}
定位元素特性
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素
1.9.2background属性
background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：
background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置
background-attachment 设置背景图片是固定还是随着页面滚动条滚动
实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，
比如：“background: #00FF00
url(bgimage.gif)no-repeatleft centerfixed”，这里面的“#00ff00”是设置background-color；
“url(bgimage.gif)”是设置background-image；- “
no-repeat”是设置background-repeat；- “
left center”是设置background-position；- “
fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。
例子说明：
background-position的设置，
可以在水平方向设置“left”、“center”、“right”，
在垂直方向设置“top”、“center”、“bottom”，除了设置这些方位词之外，还可以设置具体的数值。
实现效果设置为：
“background:url(location_bg.jpg) -110px -150px”，
第一个数值表示背景图相对于自己的左上角向左偏移110px，负值向左，正值向右，
第二个数值表示背景图相对于自己的左上角向上偏移150px，负值向上，正值向下。
透明度：
opacity:0.5
filter:alpha(opacity=50)
浏览器兼容性问题，部分浏览器支持opacity，部分支持filter:alpha(opacity=50)
实现原理示意图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test background</title>
<style type="text/css">
.backshow{
width:320px;
height:160px
border:3px solid #333;
float:left;
margin:10px;
}
.bg{width:94px;
height:94px;
border:3px solid #666;
background:url(location_bg.jpg) -110px -150px;
}
</style>
</head>
<div class="bg"></div>
</body>
</html>
1.10 CSS权重
CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。
权重的等级
可以把样式的应用方式分为几个等级，按照等级来计算权重
!important，加在样式属性值后，权重值为 10000
内联样式，如：style=””，权重值为1000 ID选择器，如：#content，权重值为100类，伪类和属性选择器，如： content、:hover 权重值为10
标签选择器和伪元素选择器，如：div、p、:before 权重值为1
通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
权重的计算实例
1、实例一：
<style type="text/css">
div{
color:red !important;
}
</style>
......
<div style="color:blue">这是一个div元素</div>
<!--
两条样式同时作用一个div，上面的样式权重值为10000+1，下面的行间样式的权重值为1000，
所以文字的最终颜色为red
-->
2、实例二：
<style type="text/css">
#content div.main_content h2{
color:red;
}
#content .main_content h2{
color:blue;
}
</style>
......
<div id="content">
<div class="main_content">
<h2>这是一个h2标题</h2>
</div>
</div>
<!--
第一条样式的权重计算： 100+1+10+1，结果为112；
第二条样式的权重计算： 100+10+1，结果为111；
h2标题的最终颜色为red
-->
CSS3新增选择器
1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素
2、E:first-child：匹配元素类型为E且是父元素的第一个子元素
3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
4、E > F E元素下面第一层子集
5、E ~ F E元素后面的兄弟元素
6、E + F 紧挨着的后面的兄弟元素
<style type="text/css">
.list div:nth-child(2){
background-color:red;
}
</style>
......
<div class="list">
<h2>1</h2>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
属性选择器：
1、E[attr] 含有attr属性的元素
<style type="text/css">
div[data-attr='ok']{
color:red;
}
</style>
......
<div data-attr="ok">这是一个div元素</div>
2、E[attr=‘ok’] 含有attr属性的元素且它的值为“ok”
3、E[attr^=‘ok’] 含有attr属性的元素且它的值的开头含有“ok”
4、E[attr$=‘ok’] 含有attr属性的元素且它的值的结尾含有“ok”
5、E[attr*=‘ok’] 含有attr属性的元素且它的值中含有“ok”
1.11 CSS3圆角
CSS3圆角
设置某一个角的圆角，比如设置左上角的圆角：border-top-left-radius:30px 60px;
同时分别设置四个角： border-radius:30px 60px 120px 150px;
设置四个圆角相同：border-radius:50%;
rgba（新的颜色值表示法）
1、盒子透明度表示法：
.box
{
opacity:0.1;
/* 兼容IE */
filter:alpha(opacity=10);
}
2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度
CSS3 transition动画
1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性
###CSS3 transform变换
1、translate(x,y) 平移
2、scale(x,y) 设置盒子缩放
3、rotate(顺时针度数deg) 设置盒子旋转4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见
举例：（翻面效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻面</title>
<style type="text/css">
.box{
width:300px;
height:272px;
margin:50px auto 0;
transform-style:preserve-3d;
position:relative;
}
.box .pic{
width:300px;
height:272px;
position:absolute;
background-color:cyan;
left:0;
top:0;
transform:perspective(800px) rotateY(0deg);
backface-visibility:hidden;
transition:all 500ms ease;
}
.box .back_info{
width:300px;
height:272px;
text-align:center;
line-height:272px;
background-color:gold;
position:absolute;
left:0;
top:0;
transform:rotateY(180deg);
backface-visibility:hidden;
transition:all 500ms ease;
}
.box:hover .pic{
transform:perspective(800px) rotateY(180deg);
}
.box:hover .back_info{
transform:perspective(800px) rotateY(0deg);
}
</style>
</head>
<body>
<div class="box">
<div class="pic"><img src="images/location_bg.jpg"></div>
<div class="back_info">背面文字说明</div>
</div>
</body>
</html>
CSS3 animation动画
1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction 动画结束后是否反向还原 normal|alternate
8、animation-play-state 动画状态 paused(停止)|running(运动)
9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性
CSS3 浏览器前缀
为了让CSS3样式兼容，过渡浏览器，需要将某些样式加上浏览器前缀：
- IE9兼容IE浏览器 -ms-
- 兼容: -moz-
- 兼容/safari: -webkit-
- 兼容: -o-
如果有@，则兼容性前缀增加到@的后面，新浏览器一般都支持。
@-webkit-keyframes x
比如：
div
{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
ease;
}
.box:hover .pic{
transform:perspective(800px) rotateY(180deg);
}
.box:hover .back_info{
transform:perspective(800px) rotateY(0deg);
}
CSS3 animation动画
1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction 动画结束后是否反向还原 normal|alternate
8、animation-play-state 动画状态 paused(停止)|running(运动)
9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性
CSS3 浏览器前缀
为了让CSS3样式兼容，过渡浏览器，需要将某些样式加上浏览器前缀：
- IE9兼容IE浏览器 -ms-
- 兼容: -moz-
- 兼容/safari: -webkit-
- 兼容: -o-
如果有@，则兼容性前缀增加到@的后面，新浏览器一般都支持。
@-webkit-keyframes x
比如：
div
{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
1450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
