第一章前端开发——HTML5/CSS3

时间 2020-05-30 标签第一章前端开发 html5 html css3 css

第一章前端开发学习——HTML5/CSS3php

1、初识HTMLcss

2、HTML5/CSS3基础html

3、页面组件前端

4、页面布局 html5

5、CSS3新增功能ios

1、初识HTMLweb

什么是HTML（what）：chrome

HTML是用来制做网页的标记语言
HTML是Hypertext Markup Language的英文缩写,即超文本标记语言
HTML语言是一种标记语言,不须要编译,直接由浏览器执行
HTML文件是一个文本文件,包含了一些HTML元素,标签等
HTML文件必须使用.html或.htm为文件名后缀
HTML是大小写不敏感的,HTML与html是同样的
HTML是由W3C的维护的
HTML 是通向 WEB 技术世界的钥匙。

HTML5的兼容性：api

Internet Explorer 9 以及以上版本
chrome、Safari、opera、Firefox和各类以wekkit为内核的国产浏览器

2、HTML5/CSS3基础浏览器

（一）HTML基本语法（截图使用sumlime演示）

1.基本格式：直接输入<html>自动生成

2.html标签：

单标签 <img>
双标签 <html> </html>

3.标签属性：（红色字体）

<img src="图片的地址">
<table width="100" height="200"></table>

4.语法规范：

标签嵌套用缩进
标签名不区分大小写建议小写
属性名不区分大小写建议小写

5.注释：

<!-- 这是注释 -->


<!-- 这也是 注释 -->

6.HTML实体（特殊字符）：黄色为经常使用

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

（二）HTML经常使用标签

1.文档申明：

在最开始输入<!DOCTYPE html>

2.HTML主体结构标签：

A）<html></html>
<html></html> 此元素可告知浏览器其自身是一个 HTML 文档。
B）<head></head>
<head></head> 用于定义文档的头部，它是全部头部元素的容器。<head> 中的元素能够引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
C）<body></body>
<body></doby> 定义文档的主体

3.head头部标签：

A）<title></title>
<title></title> 定义文档标题
B）<meta/>
<meta/> 元素可提供有关页面的元信息（meta-information），好比针对搜索引擎和更新频度的描述和关键词。
<meta> 标签永远位于 head 元素内部。
属性： charset：指定字符编码
属性： name=‘keywords’+content：指定网页关键字
属性： name=’description’ +content：指定网页描述信息
C）<link></link>
<link></link> 导入css或者指定网页图标属性 src、 type 、 rel。
属性：指定css文件
属性：指定网页图标
D）<style></style>
<style></style> 签用于为 HTML 文档定义样式信息。
E）<script></script>
<script></script> 标签用于定义客户端脚本，好比 JavaScript。script 元素既能够包含脚本语句，也能够经过 src 属性指向外部脚本文件。

4.body文档主体：

（1）格式排版标签：

A）<hn></hn>
<hn></hn> 标题字标签，n为1-6，定义六级标题，并且会自动换行插入一个空行
B）<p></p>
<p></p>段落标签,里面能够加入文字,列表,表格等，能够<p></p>或<p />使用
C）<br/>
<br/>换行标签，完成文字的紧凑显示。可使用连续多个<br/>标签来换行
D）<hr/>
<hr/> 水平分割线标签，用于段落与段落之间的分割
E）<pre></pre>
<pre></pre>按原文显示标签，能够把原文件中的空格,回车,换行,tab键表现出来
F）<div></div>
<div></div> 没有任何语义的标签，只有CSS嵌套样式才起做用

（2）文本标签：

A）<em></em>
<em></em> 表示强调，一般为斜体字
B）<strong></strong>
<strong></strong> 表示强调(语气更强)，一般为粗体字
C）<del></del>
<del></del> 标签订义文档中已删除的文本。
D）<ins></ins>
<ins></ins> 标签订义已经被插入文档中的文本
E）<sub></sub>
<sub></sub> 文字下标字体标签
F）<sup></sup>
<sup></sup> 文字上标字体标签
G）<mark></mark>
<mark></mark> 给文字加上背景色（默认黄色），标签订义带有记号的文本请在须要突出显示文本时使用,如搜索引擎搜索页面
H）<ruby></ruby>
<ruby></ruby> 标签订义 ruby 注释（中文注音或字符）在东亚使用，显示的是东亚字符的发音。
（I）其余了解

<!--一下文本标签 做为了解-->
<cite> 用于引证、举例、(标签订义做品（好比书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题)一般为斜体字 <dfn> 定义一个定义项目 <code> 定义计算机代码文本 <samp> 定义样式文本 标签并不常用。只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以强调的极少状况下，才使用这个标签。 <kbd> 定义键盘文本。它表示文本是从键盘上键入的。它常常用在与计算机相关的文档或手册中。 <abbr> 定义缩写 配合title属性 (IE6以上) <bdo> 来覆盖默认的文本方向 dir属性 值: lrt rtl <var> 定义变量。您能够将此标签与 <pre> 及 <code> 标签配合使用。 <small> 标签订义小型文本（和旁注） <b>    粗体字标签 根据 HTML 5 的规范，<b> 标签应该作为最后的选择，只有在没有其余标记比较合适时才使用它。 <i> 斜体字标签 标签被用来表示科技术语、其余语种的成语俗语、想法、宇宙飞船的名字等等。 <u>    下划线字体标签 标签订义与常规文本风格不一样的文本，像拼写错误的单词或者汉语中的专有名词。 请尽可能避免使用 <u> 为文本加下划线，用户会把它混淆为一个超连接。 <q> 签订义一个短的引用。浏览器常常会在这种引用的周围插入引号。(小段文字) <blockquote> 标签订义摘自另外一个源的块引用。浏览器一般会对 <blockquote> 元素进行缩进。(大段文字) (块状元素) <address> 定义地址 一般为斜体 (注意非通信地址) 块状元素 <font> H5已删除 字体标签，能够经过标签的属性指定文字的大小、颜色及字体等信息 <tt> H5已删除 打字机文字 <big> H5已删除 大型字体标签 <strike> H5已删除 添加删除线 <acronym>  H5已删除 首字母缩写 请使用<abbr>代替 <bdi> H5新增 标签容许您设置一段文本，使其脱离其父元素的文本方向设置。(经测试,各大浏览器都不起做用) <mark> H5新增 标签订义带有记号的文本 请在须要突出显示文本时使用,如搜索引擎搜索页面 <meter> H5新增 定义预约义范围的度量 <progress> H5新增 标签标示任务的进度（进程） <time> H5新增 定义时间和日期 <wbr>        H5新增    规定在文本中的何处适合添加换行符。Word Break Opportunity

了解

（三）CSS基础语法

（1）使用方法：（注意：若是同时修饰同一个标签，已代码最后产生效果的为准）

方法①：link引入外部css文件（建议使用）

方法②：<style></style>中设置

方式③：使用html元素的style属性（优先级最高，尽可能避免使用，由于要内容与样式分离）

（2）CSS格式：

格式①：

选择器 {
　　CSS属性: 值;
　　CSS属性: 值;
}

格式②：

选择器 {属性:值;属性:值}

（3）CSS注释：

/*注释内容*/

（4）CSS长度单位

em 倍数默认字体大小的倍数
px：pixel，像素，屏幕上显示的最小单位，用于网页设计，直观方便；
%：百分比
pt：point，是一个标准的长度单位，1pt＝1/72英寸，用于印刷业，很是简单易用；
cm 厘米
mm 毫米

（5）CSS颜色单位

colorName： red/green/bue/purple/orange/yellow/pink/skyblue
rgb数字 rgb(34,45,23) rgb(20%, 57%, 100%)
16进制 #abcdef #f90 #ccc

（6）CSS选择器

A）HTML元素名选择器

B）ID选择器（只修饰一个元素，尽可能不要用在多个元素）

#id名称{...}

C）class选择器（全部元素均可以有这个属性）

.classname{...}

class=''类1 类2''

D）全局选择器（优先级最高，通常不使用）

*{...}

E）组合：后代元素

选择器选择器选择器

F）组合：子元素

选择器>选择器>选择器

G）群组

选择器，选择器，选择器

选择器优先级：

ID > CLASS > tagName > *

　组合内计算class数量

计算选择符中ID的数量(=a)

计算选择符中类选择器属性选择器伪类选择器的数量(=b)

计算选择符中标签选择器伪对象选择器的数量 (=c)

忽略全局选择器

a的权重100 b的权重10 c的权重1 相加

（7）CSS经常使用属性和值

A）字体属性

（1）font
font:字体风格（加粗，斜体）+字体大小+字体家族
（2）font-family 字体族科宋体|微软雅黑
```
font-family:"Arial","Helvetica",sans-serif; 
```
（3）font-size 字体大小
（4）font-style 字体风格 normal | italic | oblique (斜体)
（5）font-weight 字体加粗 normal | bold | lighter
（6）font-variant 字体变形 normal | small-caps

B）字体颜色

color 设置文字颜色

C）文本属性

（1）word-spacing 词的间距
（2）letter-spacing 字母间隔
（3）text-align: left / center /right 横向排列
（4）vertical-align: baseline / middle .... 垂直对齐方式
用于文字垂直对其图片
（5）line-height 行高（行高=元素高即垂直居中）
（6）text-decoration ： none/overline/underline/line-through 文字修饰
（7）text-indent: 2em 文本缩进
（8）word-wrap: break-word 容许长单词或URL地址换行到下一行
（8*）overflow-wrap word-wrap的别名 CSS3 CSS3中把word-wrap 更名为 overflow-wrap
（9）white-space pre pre-wrap

3、页面组件

（一）尺寸相关属性与内边距相关属性

1.尺寸相关属性

height 高度
min-height 最小高度
max-height 最大高度
width 宽度
min-width 最小宽度
max-width 最大宽度
总结：

2.内边距相关属性

（1）padding 内边距
（2）padding-left 左内边距
（3）padding-right 右内边距
（4）padding-top 上内边距
（5）padding-bottom 下内边距
总结：

（二）边框

（1）border-style 边框风格
（2）border-color 边框颜色 border-left-color | border-right-color | border-top-color | border-bottom-color
（3）border-width 边框宽度 border-left-width | border-right-width | border-top-width | border-bottom-width
（4）border 复合属性
总结：

（三）背景

（1）background-color 设置背景色或设置为transparent（透明）
（2）background-image 背景图片 url 或者 none
（3）background-repeat 背景重复repeat | repeat-x | repeat-y | no-repeat
（4）background-attachment 背景附件 scroll | fixed
（5）background-position 背景位置
（6）background 复合属性
总结：
重点知识 CSS Sprite 精灵图/雪碧图：
①先在<body>内创建<button>按钮。
②在<head>内设定<button>按钮的宽度与<button>按钮相同。
③设定背景图片background-image。
④设定无平铺效果background-repeat：no-repeat。
⑤设定背景图片位置background-position：-1px 想添加的图标左上角的坐标。
好处：减小网络请求数量

（四）超连接与锚点

1.超连接

（1）href -- 地址，表明一个url连接源(就是连接到什么地方)
（2）target -- 新标签中打开，用来指出哪一个窗口或框架应该被此连接打开
（3）title -- 鼠标放到连接元素上显示的信息，表明连接的附加提示信息
（4）download HTML5新添加属性表示下载（IE能够成功）
（5）超连接范例
（6）路径
（7）鼠标属性

2.锚点

方式一：

①添加锚点（这是锚点<a name='xxx'></a>）

②添加超连接（这是超连接<a href='#xxx'></a>），定位到锚点位置

方式二：

①为元素添加ID

②超连接到锚点ID位置

其余用法：

A）返回顶部

B）跳转到其余网页的锚点

3.完整URL

URL(Uniform Resoure Locator)，统一资源定位符是对能够从互联网上获得的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每一个文件都有一个惟一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

protocol 协议【经常使用的协议是http】
hostname 主机地址，能够是域名，也能够是IP地址【www.baidu.com / IP】
port 端口 http协议默认端口是：80端口，若是不写默认就是:80端口【port：80】
path 路径网络资源在服务器中的指定路径【/path/demo/contents/】
filename 文件名【index.php】
query 查询字符串若是须要从服务器那里查询内容，在这里编辑【?a=100&b=300】
hash 锚点部分，指向页面中的某个位置【#mao1】

（五）图像

（1）alt -- 表明图像的替代文字
（2）src -- 表明一个图像源(就是图像的位置)
（3）title 提示信息
（4）border – 表明图片边框的宽度
（5）height -- 表明一个图像的高度
（6）width -- 表明一个图像的宽度（通常为了防止图片失真，修改一个宽度就行）
（7）usemap 将图像定义为客户器端图像映射。（具体就是点击图片指定区域，超连接到其余位置）usemap=“#＋名字”

<map>图片映射

（1）name 图片映射名

（2）id 元素id

<area>区域

（1）shape

　　rect 矩形

　　circle 圆形

　　poly：三角形

（2）coords

　　rect 矩形 coords=“左上角坐标，右下角坐标”

　　circle 圆形 coords=“圆心坐标，半径”

　　poly：不规则图形 coords=“三个点的坐标”

（3）title 鼠标指针移动到该区域显示的内容

（4）target 新标签中打开

（5）href 图像映射地址

常见图片格式：

GIF -- 最多支持256色,支持透明,支持多帧动画显示效果.
JPEG -- 支持多种颜色,能够有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果.
PNG -- 是一种新的图片技术,能够表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画.

（六）列表

（1）无序列表

<ul></ul> 表明HTML无序列表，里面每一列表项使用<li>标签订义
<li></li> 表明HTML列表项目，每一个列表项使用一对<li></li>标记
`

（2）有序列表

<ol></ol> 表明HTML有序列表，里面每一列表项使用<li>标签订义
<li></li> 表明HTML列表项目，每一个列表项使用一对<li></li>标记
　　
①start　　规定有序列表的起始值
②type 规定在列表中使用的标记类型。(1 a A i I)
③reversed 降序

（3）定义列表

<dl></dl> 定义了定义列表（definition list）
<dt></dt> 标签订义了定义列表中的项目（即术语部分）
<dd></dd> 在定义列表中定义条目的定义部分。

（4）列表相关的CSS属性

①list-style-type 列表样式
②list-style-position 位置
③list-style-image 使用图片
④list-style 复合属性
list-style：type position url;
布局时能够设置list-style：none；

（七）表格

（1）HTML表格标签

A）<table></table> 表格标签
B）<thead></thead> 表格头部
C）<tr></tr> 表格行
D）<th></th> 表头单元格
E）<tbody></tbody> 表主体
F）<td></td> 单元格
G）<tfoot></tfoot> 表底

（2）CSS表格属性

A）table-layout 表格布局方式
B）border-collapse 表格的行和单元格的边是合并仍是独立
C）border-spacing 当表格边框独立时，行和单元格的边框在横向和纵向上的间距
D）caption-side caption 在table上面仍是下面
E）empty-cells 没有内容的单元格隐藏仍是显示

（3）合并单元格

rowspan 合并行
colspan 合并列

（八）表单

（1）表单标签

<form></from> 定义一个 HTML 表单，用于用户输入。

（2）表单组成控件

A）文本输入框
B）密码输入框
C）单选按钮
D）复选框
E）文件选择框
F）规定类型的文本输入框
a）邮箱
b）url
c）数字
d）搜索框
e）电话号码
G）范围选择框
H）颜色选择框
I）时间选择框
J）下拉选项
K）多行文本输入
L）按钮

（3）表单中的其余标签

field/legend：加外框文字效果

datalist：智能输入效果

小应用：直接将输入的内容放到百度网页内搜索

（4）表单输入的智能验证

required 必填

给全部可输入的控件添加 required属性，表示必填

指定类型验证

Input:email 、input:url、input:number 会自动验证类型

pattern 正则

<input type="text" pattern="\w{4,6}">
<input type="text" pattern="\d{4,6}" title="必须是4~6位数字">

（5）表单空间相关属性

disabled 表示不可用用于全部的表单控件
enabled 表示可用用于全部的表单控件
readable 表示只读用于可输入的表单控件
autofocus 自动获取焦点全部表单控件
autocomplete 值on/off 用于可输入的控件是否自动填充内容
pattern 正则验证可输入的控件
required 必填

（九）视频/音频

（1）HTML标签

<video></video> 定义视频
<audio></audio> 定义音频
<source></source>为媒体元素（好比 <video> 和 <audio>）定义媒体资源

（2）视频

支持的视频类型

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始	YES	YES
Safari	YES	NO	NO
Opera	YES 从 Opera 25 版本开始	YES	YES

MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开

（3）音频

支持的音频格式

浏览器	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

音频格式MIME类型

格式	MIME-type
MP3	audio/mp3
Wav	audio/wav
Ogg	audio/ogg

4、页面布局

有些CSS属性（例如：font类型、color、文本属性），后代元素会集成祖先元素的设置。

有些CSS属性（例如：布局相关、border、背景），不会继承祖先元素。

（一）页面组成

页头（header）+网站标题

导航栏

主要内容（main）

侧边栏

页脚（footer）

（二）布局相关标签

<div></div> 定义文档中的分区或节
<span></span> 这是一个行内元素，没有任何意义
<header></header> 页头部分，HTML5新增定义 section 或 page 的页眉
<footer></footer> 页脚部分，HTML5新增定义 section 或 page 的页脚
<main></main> 主要内容，HTML5新增标签规定文档的主要内容。<main> 元素中的内容对于文档来讲应当是惟一的。它不该包含在文档中重复出现的内容，好比侧栏、导航栏、版权信息、站点标志或搜索表单。IE都不识别
<nav></nav> 导航栏 ，HTML5新增表示连接导航部分若是文档中有“先后”按钮，则应该把它放到元素中
<section></section> 代替DIV（块），HTML5新增定义文档中的节一般不推荐那些没有标题的内容使用section
<article></article> 文章，HTML5新增定义文章论坛帖子报纸文章博客条目用户评论
<aside></aside> 侧边栏，HTML5新增相关内容，相关辅助信息，如侧边栏

（三）盒子模型

1.什么是盒子模型（what）：

全部HTML元素能够看做盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型容许咱们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) 清除边框外的区域，外边距是透明的【不会影响盒子大小】。
Border(边框) 围绕在内边距和内容外的边框【会影响盒子大小】。
Padding(内边距) 清除内容周围的区域，内边距是透明的【会影响盒子大小】。
Content(内容) 盒子的内容，显示文本和图像【会影响盒子大小】。

总结：

任意一个元素均可以当作盒子模型
盒子的大小内容宽高(width/height) + 边距(padding)+边框(border)
盒子有外边距，影响盒子的位置

2.块状元素与内联元素

（1）块状元素（块级元素）

老是在新行上开始，能单独占据一整行；
默认宽度是父元素的宽，高度是自动（被内容撑开）
它能够容纳内联元素和其余块元素。

（2）内联元素（行内元素）

和其余元素都在一行上，不能独占一行；
默认宽度是自动(被内容撑开)，高度也是自动
大部份内联元素设置宽高无效，设置内边距有效可是影响其余元素
CSS的文本属性会对内联元素生效
margin能够设置左右，不能设置上下的

3.盒子模型之间的关系

document树

父元素  子元素   后代元素   祖先元素    兄弟元素

标准文档流

块状元素独占一行，行内元素不占据单独的空间，依附于块级元素，行内元素没有本身的区域。它一样是DOM树中的一个节点，在这一点上行内元素和块级元素是没有区别的。
内联共享一行，块级元素老是以块的形式表现出来，而且跟同级的兄弟块依次竖直排列，左右自动伸展，直到包含它的元素的边界，在水平方向不能并排。

盒子在标准流中的定位原则

给盒子设置边距，前面有兄弟元素，距离兄弟元素的距离。没有距离父元素的内容的距离
垂直方向的margin会塌陷。上（margin-bottom）下（margin-top）两个元素之间的距离，取最大。水平方向没有这个问题
父子元素，给子元素设置垂直方向的margin，一样会产生塌陷。解决：给父元素设置边框或者 overflow:hidden
margin能够设置为负值

4.盒子模型相关的CSS属性

布局属性：
（1）display
inline：把块状元素转换成内联元素
block：把内联元素转换成块状元素
inline-block：兼具二者有些html元素，默认就是inline-block （img, input, textarea .td,th）
none：隐藏（该隐藏直接将位置也隐藏）
（2）visibility
visible：默认值，元素是可见的。
hidden：默认值，元素是不可见的。（该隐藏只是显示上隐藏，实际仍是占据位置的）
（3）overflow
hidden：内容会被修剪，而且其他内容是不可见的。
scroll：出现滚动条
auto：只有子元素内容超过父元素时才会出现滚动条
visible：默认值。内容不会被修剪，会呈如今元素框以外。
inherit：规定应该从父元素继承 overflow 属性的值。
（4）overflow-x
hidden：水平方向隐藏
（5）overflow-y
hidden：垂直方向隐藏
尺寸：
width / max-width / min-width
height / max-height / min-height
内补白：
padding / padding-left / padding-right / padding-top / padding-bottom
外边距：
margin
margin-left
margin-right
margin-top
margin-bottom

（四）浮动

1.什么是浮动（what）：

元素能够设置向左或者向右浮动（不会跳出父元素的宽）
元素浮动后，会脱离文档流。（对后面的元素产生影响）
元素一旦浮动，会转换为块状元素
浮动的元素并不独占一行(仍然是块状元素) 由于脱离标准文档流
浮动的元素，宽度默认会是auto，被内容撑开
多个元素浮动，会排成一行，宽度超过父元素宽度，会自动换行
float：none（默认） | left | right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首字符环绕</title>
    <style> p { width: 800px; padding: 10px; border: 1px solid #ccc;
        } p strong { font-size:3em; width: 40px;
            /*浮动*/ float: left;
        }
    </style>
</head>
<body>
    <h1>同志环绕</h1>
    <hr>

    <p>
        <strong>L</strong>orem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid rerum temporibus, harum quia consequatur suscipit at facilis minima eveniet! Consectetur suscipit veniam doloremque, eligendi, porro soluta cupiditate voluptates eos? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laborum ipsum adipisci recusandae dicta dignissimos repellat rerum similique dolores quod molestiae voluptatum sed, animi sequi, mollitia asperiores voluptates, quasi quae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius vel nam assumenda, rerum ullam officiis molestiae veniam, quos tempora necessitatibus illum minima reprehenderit explicabo dignissimos! Quas consequuntur, doloribus qui, sequi eum tenetur quia. Laborum quisquam, sunt iusto ipsa provident quos amet commodi officiis consequatur eveniet? Sunt ipsum molestias aperiam esse saepe, dolorum corporis nostrum tempora rerum laboriosam mollitia culpa doloribus fuga temporibus assumenda natus? Incidunt a, numquam quisquam aspernatur. Placeat, nihil, excepturi! Consequatur illum accusamus eveniet praesentium dolores doloribus, suscipit assumenda veniam, laudantium aspernatur quas. Nemo quo debitis, sint cupiditate natus, id, facere, soluta a tenetur dolores magnam recusandae! Itaque! </p>
</body>
</html>

首字符环绕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字环绕图片</title>
    <style> article { width: 600px; padding: 10px; border: 2px solid #ccc;
        } article img { width:100px; float: left; margin-right:10px;
        }
    </style>
</head>
<body>
    <h1>同志新闻</h1>
    <hr>

    <article>
        <img src="../../dist/images_one/10.jpg" alt="">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dicta sit eos magni alias, nesciunt veniam at reiciendis eius. Labore inventore, sunt nulla ullam! Voluptate iste, libero unde tempora corporis autem voluptatum similique repellat perspiciatis ducimus, vero natus aperiam aliquam, ut reiciendis nesciunt. Quod cum, enim. Voluptatum quae eum repellendus quo voluptatem dolorem earum ut modi inventore sint reiciendis culpa recusandae ea neque harum nesciunt alias, totam, omnis nemo! Tempore, sunt expedita nemo minus nihil recusandae temporibus maiores quia numquam dolores voluptatibus eaque voluptatem debitis eos, nisi, quod quas. Corporis laudantium dolore, ipsam hic commodi, ullam illum necessitatibus nesciunt repudiandae! </p>
    </article>
</body>
</html>

文字环绕图片

2.浮动带来的影响

对后面元素影响。后面元素会总体向前
对父元素有影响（父元素的高不能被撑开）

3.清除浮动

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。

所以，建立浮动框可使文本围绕图像：

（1）消除元素对后面元素的影响，在后面的元素设置
clear:both/left/right
（2）消除子元素浮动对父元素的影响
设置overflow

4.浮动实验

实现如下实现

初始状态
设置第一浮动的div
设置第2个浮动div
设置第3个浮动div
改变第三个浮动方向
改变第二个浮动方向
所有向左浮动,增长第一个的高度
使用clear属性清除浮动的影响
扩展盒子的高度 (元素高度和浮动的元素)
段落首字母浮动
图片浮动
简单浮动布局

（五）定位

1.相对定位

经过 position:relative 设置元素为相对定位元素
元素设置为相对定位以后，不会脱离文档流，不影响其余元素
能够经过 left、top、right、bottom给相对定位的元素设置位置
定位元素：根据原先默认的位置去定位

2.绝对定位

经过position:absolute来设置绝对定位
元素绝对定位后，脱离文档流，影响后面的元素。宽度默认会被内容撑开
能够经过 left、top、right、bottom给绝对定位的元素设置位置
定位规则：根据第一个定位的祖先元素，若是没有定位的祖先元素，根据html元素。祖先元素什么定位均可以

相对定位与绝对定位的区别：

相对定位根据本身原先默认位置定位；绝对定位根据第一个定位的祖先元素
相对定位不脱离文档流；绝对定位脱离文档流

3.固定定位

position: fixed;
left/top/right/bottom: 长度单位；

根据屏幕进行定位
脱离文档流（宽度默认变成内容撑开）
元素设置为固定定位或绝对定位以后，会变为块状元素

4.空间位置

使用css属性 z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素老是会处于堆叠顺序较低的元素的前面。
z-index: number; 只能用于被定位的元素

5.定位相关CSS属性总结

position static(默认值) /relative /position /fixed
top
left
right
bottom
z-index auto(默认值)/数字

（6）浏览器兼容性

主流浏览器(原生浏览器)

拥有独立内核的浏览器被称为主流浏览器

chrome 内核 blink 早期的chrome使用apple的开源内核 webkit. 咱们依然习惯上称呼chrome的内核为webkit
safari 内核 webkit
IE 内核 Trident
Firfox 内核 Gecko
Opera v12.17之前采用 Presto 内核。后来紧跟chrome的步伐，使用chrome的内核成为了壳浏览器

壳浏览器

在某浏览器内核之上增长相应的辅助功能，并改变其名称与外观的浏览器

opera、360安全、360极速、UC、搜狗、猎豹、QQ浏览器、2345浏览器、淘宝浏览器等

浏览器对HTML5和CSS3的兼容性状况

HTML5须要 IE9以及以上版本的IE浏览器支持
CSS3不一样的模块对浏览器的兼容程度各不相同。对于IE浏览器，确定须要IE9以及以上的浏览器支持
chrome、firefox浏览器通常都会自动更新，因此兼容性特别棒！
手机浏览器，大多使用webkit内核，兼容性较好。关键是手机上没有IE！
目前的国产浏览器，多采用双内核，使用chrome内核的时候兼容性较好

兼容技巧：

设置IE使用最新的渲染引擎

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

让双核浏览器默认使用webkit内核

<meta name="renderer" content="webkit">

让IE8识别HTML5新增标签

<!--[if lt IE 9]> <script src="/html5shiv/dist/html5shiv.js"></script> <![endif]-->

5、CSS3新增功能

1.CSS3的选择器

（1）基础选择器

通配选择器*
元素选择器E
ID选择器#id
CLASS选择器.class
群组选择器select1,selectN

（2）层级选择器

后代选择器 E F
子选择器 E>F
相邻兄弟选择器 E+F
通用兄弟选择器 E~F

（3）属性选择器

E[attr] 选择具备att属性的E元素。
E[attr="val"] 选择具备att属性且属性值等于val的E元素。
E[attr~="val"] 选择具备att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的状况）。
E[attr^="val"] 选择具备att属性且属性值为以val开头的字符串的E元素。
E[attr$="val"]选择具备att属性且属性值为以val结尾的字符串的E元素。
E[attr*="val"] 选择具备att属性且属性值为包含val的字符串的E元素。
E[attr|="val"] 选择具备att属性且属性值为以val开头并用链接符"-"分隔的字符串的E元素，若是属性值仅为val，也将被选择。
TIips：多个属性做为条件

（4）伪类选择器

动态伪类选择器

①设置超连接不一样状态的颜色：link——>visted——>hover——>active

②获取焦点

结构伪类选择器

①child

first-child 子元素第一个

last-child 子元素最后一个

nth-child（n）子元素第n个

nth-last-child（n）子元素倒数第n个

only-child 匹配只有一个元素的子元素

其余用法：

斑马线效果

②type

first-of-type：匹配同类型中的第一个同级兄弟元素E

last-of-type：匹配同类型中的最后一个同级兄弟元素E

only-of-type：匹配同类型中的惟一的一个同级兄弟元素E

nth-of-type(n)：匹配同类型中的第n个同级兄弟元素E

nth-last-of-type(n)：匹配同类型中的倒数第n个同级兄弟元素E

（5）伪元素选择器

first-letter：设置对象内的第一个字符的样式

first-line：设置对象内的第一行的样式。

before：在前面插入一个子元素（必须与content连用）

after：在后面插入一个子元素（必须与content连用）

可用于清除浮动

2.CSS3基础

（1）浏览器私有前缀

-weibkit-* chrome/safari
-moz-* firefox
-ms-* ie
-o-* opera

（2）CSS3新增的颜色

rgba(r,g,b,不透明度) 不透明度：0~1 小数，数越大，越不透明

（3）CSS3新增加度单位

px
em 默认字体大小的倍数
rem 根元素字体大小的倍数
vw 窗口宽度分红100份 50vw
vh 窗口高度分红100份

（4）CSS3新增属性

# 从新设置 盒子模型的规则 box-sizing: content-box(默认) / border-box （width/height盒子的宽高） # 外轮廓 在border的外面 不算盒子 outline: outline-style outline-color outline-width # 不透明度 opacity 0~1 小数

（5）设置圆角

border-radius border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius

（6）盒子阴影

box-shadow:水平偏移垂直偏移; 偏移能够负值

box-shadow:水平偏移垂直偏移颜色;

box-shadow:水平偏移垂直偏移模糊值颜色; /*最多见的*/

box-shadow:水平偏移垂直偏移模糊值外延值颜色;

多重阴影：

（7）背景

background-size: cover / contain / 400px 300px / 100% 100%

background: color image postion/size repeat attachment

（8）变换transform

translate(x, y)
translate()：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。若是第二个参数未提供，则默认值为0
translatex()
translatex()：指定对象X轴（水平方向）的平移
translatey()
translatey()：指定对象Y轴（垂直方向）的平移
rotate() 角度 deg
rotate()：指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义
skewx() 角度deg
scalex()：指定对象X轴的（水平方向）缩放
skewy()
scaley()：指定对象Y轴的（垂直方向）缩放
skew(x, y)
skew()：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。若是第二个参数未提供，则默认值为0

transform-origin 变换的原点

若是提供两个值，第一个用于横坐标，第二个用于纵坐标。 
若是只提供一个，该值将用于横坐标；纵坐标将默认为50%。 
3D变形须要制定Z坐标 第三个参数值

left  right  center   <lenght>  <percentage> top bottom center <lenght>  <percentage>

（9）过渡transition

哪些CSS属性能够过渡

长度 (padding margin width height left/top/right/bottom border-width background-position ...) 颜色 变换 纯数字 (opacity、z-index)

触发过渡方法：

伪类触发 :hover :focus .... 媒体查询 @media JS

相关属性：

transition-property 指定要过渡的属性用,隔开。默认是 all
transition-duration 过渡持续时间
transition-timing-function 过渡线性效果默认 ease
transition-delay 过渡延迟
transition：property timing-function duration delay

（10）动画

关键帧：帧——就是动画中最小单位的单幅影像画面，至关于电影胶片上的每一格镜头。

定义动画：

@keyframes 动画名字 { 0% { } 20% { } 40% { } 100% { } }